diff --git a/packages/demo/build.plugin.js b/packages/demo/build.plugin.js
index 6c89f05c1..53380e73a 100644
--- a/packages/demo/build.plugin.js
+++ b/packages/demo/build.plugin.js
@@ -1,15 +1,13 @@
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
-
 module.exports = ({ onGetWebpackConfig }) => {
   onGetWebpackConfig((config) => {
-    config.resolve
-      .plugin('tsconfigpaths')
-      .use(TsconfigPathsPlugin, [{
-        configFile: "./tsconfig.json"
-      }]);
-
+    config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [
+      {
+        configFile: './tsconfig.json',
+      },
+    ]);
 
     config
     // 定义插件名称
diff --git a/packages/demo/src/editor/config.js b/packages/demo/src/editor/config.js
index 91de783fe..5e61d7054 100644
--- a/packages/demo/src/editor/config.js
+++ b/packages/demo/src/editor/config.js
@@ -65,6 +65,7 @@ export default {
         props: {
           align: 'top',
           icon: 'zujianku',
+          description: '资源面板',
           panelProps: {
             floatable: true,
             defaultWidth: 500,
diff --git a/packages/demo/src/editor/editor.ts b/packages/demo/src/editor/editor.ts
new file mode 100644
index 000000000..2a03ebaee
--- /dev/null
+++ b/packages/demo/src/editor/editor.ts
@@ -0,0 +1,47 @@
+import { globalContext, Editor } from '@ali/lowcode-editor-core';
+import { Designer, addBuiltinComponentAction } from '@ali/lowcode-designer';
+import Outline from '@ali/lowcode-plugin-outline-pane';
+
+import DesignerPlugin from '@ali/lowcode-plugin-designer';
+import { Skeleton, SettingsPrimaryPane } from '@ali/lowcode-editor-skeleton';
+
+import { InstanceNodeSelector } from './components';
+
+export const editor = new Editor();
+globalContext.register(editor, Editor);
+
+export const skeleton = new Skeleton(editor);
+editor.set(Skeleton, skeleton);
+
+export const designer = new Designer({ editor: editor });
+editor.set(Designer, designer);
+
+skeleton.add({
+  area: 'mainArea',
+  name: 'designer',
+  type: 'Widget',
+  content: DesignerPlugin,
+});
+skeleton.add({
+  area: 'rightArea',
+  name: 'settingsPane',
+  type: 'Panel',
+  content: SettingsPrimaryPane,
+});
+skeleton.add({
+  area: 'leftArea',
+  name: 'outlinePane',
+  type: 'PanelDock',
+  content: Outline,
+  panelProps: {
+    area: 'leftFixedArea',
+  },
+});
+
+// 实例节点选择器，线框高亮
+addBuiltinComponentAction({
+  name: 'instance-node-selector',
+  content: InstanceNodeSelector,
+  important: true,
+  condition: 'always',
+});
diff --git a/packages/demo/src/editor/index.tsx b/packages/demo/src/editor/index.tsx
index 0b501350b..041acd148 100644
--- a/packages/demo/src/editor/index.tsx
+++ b/packages/demo/src/editor/index.tsx
@@ -6,8 +6,4 @@ import './global.scss';
 
 const LCE_CONTAINER = document.getElementById('lce-container');
 
-if (!LCE_CONTAINER) {
-  throw new Error('当前页面不存在 <div id="lce-container"></div> 节点.');
-}
-
 render(<GeneralWorkbench config={config} components={components} />, LCE_CONTAINER);