Integrating CodeBlitz WebIDE with Alibaba Cloud Codeup: Features and Usage Guide

Alibaba Cloud Codeup (https://codeup.aliyun.com) has recently integrated CodeBlitz, releasing its own WebIDE component that provides a smoother and more consistent product experience. This guide explains how to use CodeBlitz to build a WebIDE within Codeup.

1.1 How to use WebIDE in Codeup

WebIDE capabilities are enabled by default for all Codeup repositories. Simply click the WebIDE button on the repository homepage to open the Codeup WebIDE interface.

1.2 Basic capabilities of Codeup WebIDE

Code browsing with a front‑end experience similar to traditional IDEs.

Code search supporting file‑level and global search, filter, replace, and a command palette (default shortcut F1).

Syntax services for dozens of languages, providing syntax highlighting, definition jumps, and reference searches.

WebSCM for Git operations such as file creation, editing, commit, diff, blame, and revert.

Third‑party plugin support for OpenSumi front‑end plugins and VS Code for Web plugins.

1.3 Unique advantages of Codeup WebIDE

No OAuth authorization required; permissions are the same as the Codeup user.

Batch read/write and commit capabilities for Codeup code.

Rich functional modules and style components covering common read/write scenarios.

Integrated third‑party plugins such as GitGraph, CodeRunnerForWeb, VS Code AnyCode, CodeSwing, etc.

1.4 GitGraph capability

Provides a graph view to inspect branch commit history and detailed file changes, with diff support. Open the view via the bottom status bar or the command palette (type View Git Graph ).

1.5 CodeRunnerForWeb capability

Leveraging WebAssembly, backend languages can run in the browser. The CodeRunnerForWeb plugin uses Pyodide to run Python directly in the browser and is pre‑installed in Codeup WebIDE.

2. How to integrate CodeBlitz

2.1 Install the IDE package

yarn add @codeblitzjs/ide-core

2.2 Use the component

import { AppRenderer } from '@codeblitzjs/ide-core';

const App: React.FC = () => (

);

ReactDOM.render(
, document.getElementById('main'));

These lines render a WebIDE interface.

2.3 Import language packs

// Full import

import '@codeblitzjs/ide-core/languages';

// Or import selectively

// Built‑in language packs are continuously updated

import '@codeblitzjs/ide-core/languages/java';

import '@code-blitzjs/ide-core/languages/javascript';

import '@codeblitzjs/ide-core/languages/json';

import '@codeblitzjs/ide-core/languages/html';

import '@codeblitzjs/ide-core/languages/css';

import '@codeblitzjs/ide-core/languages/go';

...

Language packages are listed at npm .

2.4 Plugin system

import html from '@codeblitzjs/ide-core/extensions/codeblitz.html-language-features-worker';

import css from '@codeblitzjs/ide-core/extensions/codeblitz.css-language-features-worker';

import typescript from '@codeblitzjs/ide-core/extensions/codeblitz.typescript-language-features-worker';

import json from '@codeblitzjs/ide-core/extensions/codeblitz.json-language-features-worker';

These plugins provide LSP services such as intelligent suggestions and definition jumps.

2.5 File system integration

CodeBlitz includes an optimized BrowserFS with several file‑system types (IndexedDB, InMemory, FileIndexSystem, DynamicRequest, ZipFS, FolderAdapter, OverlayFS). Example of integrating FileIndexSystem :

<AppRenderer

runtimeConfig={{

workspace: {

filesystem: {

fs: 'FileIndexSystem',

options: {

// Initial full file index

requestFileIndex() {

return Promise.resolve({

'main.html': '<div id="root"></div>',

'main.css': 'body {}',

'main.js': 'console.log("main")',

'package.json': '{ "name": "CodeBlitz" }',

});

},

},

},

},

}}

/>

2.6 Third‑party code service integration

CodeBlitz can adapt to GitHub, GitLab, Gitlink, AtomGit, etc. Example for GitLab:

import { CodeServiceModule } from '@codeblitzjs/ide-code-service';

import { CodeAPIModule, CodePlatform } from '@codeblitzjs/ide-code-api';

<AppRenderer

appConfig={{

modules: [

CodeServiceModule.Config({

platform: 'gitlab',

owner: 'groupName',

name: 'repoName',

}),

CodeAPIModule,

]

}}

/>

This configuration dynamically requests the GitLab API.

2.7 Editor mode

For scenarios that only need an editor (online exams, function editing, SQL editor, etc.), CodeBlitz provides a lightweight EditorRenderer component:

import { EditorRenderer } from "@codeblitzjs/ide-core/lib/editor.all";

import "@codeblitzjs/ide-core/bundle/codeblitz.editor.all.css";

<EditorRenderer

Langing={{}}

appConfig={{...}}

runtimeConfig={{...}}

editorConfig={{...}}

documentModel={{...}}

/>

For more details, refer to the official CodeBlitz documentation and sample repository.