Transform Your Low‑Code Engine with Application‑Level Workspace and Multi‑Scope Plugins

Background

Current low‑code engines are designed for single‑page usage, with extensions limited to page design. In real projects we need navigation, dependency configuration, low‑code components, and logic orchestration at the application level, and a smoother, VS‑Code‑like experience.

Application‑Level Capabilities

The proposed capabilities allow editing low‑code pages, components, application‑level logic, and internationalization within a single designer, even using Webview for configuration without switching browser tabs.

To achieve this, the engine adds:

Workspace mode with new concepts of resources and views

Application‑level extension areas

Multi‑layer scope development mode

Workspace Mode

When the workspace mode is enabled, the designer must register "resources" and "resource views".

Resource

A resource is a file edited in the application‑level designer, such as a page schema, component schema, or a piece of JavaScript logic.

Resource Types

Different resources require different editor plugins and panels, so they are classified into types (e.g., page resources, logic resources).

Resource View

A resource can have multiple views; each view registers a different panel to edit specific modules of the same resource.

Application‑Level Extension Areas

Three extension levels are introduced:

Application extensions (initialized once):

leftArea – panels like resource explorer, app configuration, branch management

topArea – app name, icon, save/preview, internationalization

subTopArea – auxiliary info such as resource tabs

Resource extensions (initialized per resource):

topArea – displays resource‑specific information

View extensions (initialized per view):

leftArea – outline tree, component list

topArea – view‑specific capabilities

mainArea – the editing canvas

rightArea – component configuration

Unregistered extension areas are hidden, allowing developers to choose only the needed ones.

Multi‑Layer Scope Development Mode

Plugins must register panels in the appropriate scope (application, resource, or view) instead of using a global API.

import { skeleton } from "@alilc/lowcode-engine";
// Register logo panel
skeleton.add({
  area: "topArea",
  type: "Widget",
  name: "logo",
  content: Logo,
  contentProps: { logo: "https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png", href: "/" },
  props: { align: "left", width: 100 },
});

Using the plugin context, the correct skeleton is obtained for each layer.

import { IPublicModelPluginContext } from '@alilc/lowcode-types';
function pluginDemo(ctx: IPublicModelPluginContext) {
  const { skeleton } = ctx;
  return {
    init() {
      skeleton.add({
        area: 'topArea',
        type: 'Widget',
        name: 'pluginDemo',
        props: { align: 'left', width: 800 },
        index: -1,
        content: Content,
        contentProps: { ctx },
      });
    }
  };
}
pluginDemo.pluginName = 'pluginDemo';

Application Layer

import { init, workspace } from '@alilc/lowcode-engine';
(async function main() {
  workspace.registerResourceType(pageResourceType);
  await workspace.plugins.register(pluginDemo);
  init(undefined, { enableWorkspaceMode: true });
})();

Resource Layer

import { IPublicModelPluginContext } from '@alilc/lowcode-types';
function pageResourceType(ctx) {
  return {
    category: '页面',
    defaultViewType: 'page',
    defaultTitle: window.pageConfig.title,
    editorViews: [pageView],
    icon: PageIcon,
    async init() { await ctx.plugins.register(pluginDemo); },
  };
}
pageResourceType.resourceName = 'page';
pageResourceType.resourceType = 'editor';
export default pageResourceType;

View Layer

import { IPublicModelPluginContext } from '@alilc/lowcode-types';
export const pageView = (ctx, options) => {
  return {
    async init() {
      await ctx.plugins.register(pluginDemo);
    },
  };
};
pageView.viewName = 'page';

Each layer’s ctx.skeleton registers panels only within its scope, preventing cross‑view contamination.

How to Upgrade the Application‑Level Designer

Enable Application Mode

import { init, workspace } from '@alilc/lowcode-engine';
(async function main() {
  init(undefined, { enableWorkspaceMode: true });
})();

Register Resource Types and Views

Define page view, page resource type, and register them with the workspace as shown in the code snippets above.

Precautions

Always obtain APIs from the plugin context (ctx) rather than the global scope; otherwise, plugins may register panels in unintended views.

Future Plans

Application‑Level Low‑Code Platform Rollout

We will adopt the application‑level capabilities across the group, upgrade existing low‑code platforms, and share experiences externally.

Premium Application‑Level Plugins

More high‑quality plugins will be developed to leverage the new designer.

Performance Optimization

With more resource types, plugins, and simultaneous editing areas, performance will be a focus for ongoing improvements.