diff --git a/packages/editor-framework/demo/usage.md b/packages/editor-framework/demo/usage.md
index 819d1ac15..9f19eae0b 100644
--- a/packages/editor-framework/demo/usage.md
+++ b/packages/editor-framework/demo/usage.md
@@ -8,13 +8,11 @@ order: 1
 ````jsx
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import Demo from 'editor-framework';
 
 class App extends Component {
   render() {
     return (
       <div>
-        <Demo />
       </div>
     );
   }
diff --git a/packages/editor-framework/es/context.d.ts b/packages/editor-framework/es/context.d.ts
new file mode 100644
index 000000000..7836d2580
--- /dev/null
+++ b/packages/editor-framework/es/context.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const context: import("react").Context<{}>;
+export default context;
diff --git a/packages/editor-framework/es/context.js b/packages/editor-framework/es/context.js
new file mode 100644
index 000000000..450ae72fb
--- /dev/null
+++ b/packages/editor-framework/es/context.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var context = createContext({});
+export default context;
\ No newline at end of file
diff --git a/packages/editor-framework/es/index.d.ts b/packages/editor-framework/es/index.d.ts
deleted file mode 100644
index ceb2fe364..000000000
--- a/packages/editor-framework/es/index.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare function TSDemo(props: any): JSX.Element;
-declare namespace TSDemo {
-    var propTypes: {};
-    var defaultProps: {};
-}
-export default TSDemo;
diff --git a/packages/editor-framework/es/index.js b/packages/editor-framework/es/index.js
deleted file mode 100644
index 9ea3ef8aa..000000000
--- a/packages/editor-framework/es/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-import * as React from 'react';
-export default function TSDemo(props) {
-  var type = props.type,
-      others = _objectWithoutPropertiesLoose(props, ["type"]);
-
-  return React.createElement("div", _extends({
-    className: "TSDemo"
-  }, others), "Hello TSDemo");
-}
-TSDemo.propTypes = {};
-TSDemo.defaultProps = {};
\ No newline at end of file
diff --git a/packages/editor-framework/es/index.scss b/packages/editor-framework/es/index.scss
deleted file mode 100644
index 3a0f72cfb..000000000
--- a/packages/editor-framework/es/index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-/* write style here */
-.TSDemo {
-
-}
diff --git a/packages/editor-framework/es/style.js b/packages/editor-framework/es/style.js
deleted file mode 100644
index bf3c23acb..000000000
--- a/packages/editor-framework/es/style.js
+++ /dev/null
@@ -1 +0,0 @@
-import './index.scss';
\ No newline at end of file
diff --git a/packages/editor-framework/package.json b/packages/editor-framework/package.json
index ebcbe65db..2b11f2c53 100644
--- a/packages/editor-framework/package.json
+++ b/packages/editor-framework/package.json
@@ -28,7 +28,8 @@
     "events": "^3.1.0",
     "intl-messageformat": "^7.8.4",
     "lodash": "^4.17.15",
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.5.8",
+    "store": "^2.0.12"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.3",
diff --git a/packages/editor-framework/src/editor.ts b/packages/editor-framework/src/editor.ts
index daeeb2182..b3328df2d 100644
--- a/packages/editor-framework/src/editor.ts
+++ b/packages/editor-framework/src/editor.ts
@@ -1,7 +1,46 @@
 import EventEmitter from 'events';
 import Debug from 'debug';
-let instance = null;
+import store from 'store';
 
+import {
+  unRegistShortCuts,
+  registShortCuts,
+  transformToPromise,
+  generateI18n
+} from './utils';
+
+// 根据url参数设置debug选项
+const res = /_?debug=(.*?)(&|$)/.exec(location.search);
+if (res && res[1]) {
+  window.__isDebug = true;
+  store.storage.write('debug', res[1] === 'true' ? '*' : res[1]);
+} else {
+  window.__isDebug = false;
+  store.remove('debug');
+}
+
+//重要，用于矫正画布执行new Function的window对象上下文
+window.__newFunc = funContext => {
+  return new Function(funContext);
+};
+
+//关闭浏览器前提醒,只有产生过交互才会生效
+window.onbeforeunload = function(e) {
+  e = e || window.event;
+  // 本地调试不生效
+  if (location.href.indexOf('localhost') > 0) return;
+  var msg = '您确定要离开此页面吗？';
+  e.cancelBubble = true;
+  e.returnValue = msg;
+  if (e.stopPropagation) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+  return msg;
+};
+
+
+let instance = null;
 const debug = Debug('editor');
 EventEmitter.defaultMaxListeners = 100;
 
@@ -9,7 +48,7 @@ export interface editor {
 
 };
 
-export class Editor extends EventEmitter {
+export default class Editor extends EventEmitter {
   static getInstance = () => {
     if (!instance) {
       instance = new Editor();
@@ -21,22 +60,62 @@ export class Editor extends EventEmitter {
     super();
     instance = this;
     Object.assign(this, config);
+    this.init();
   }
 
   init() {
+    const {
+      hooks,
+      shortCuts,
+      lifeCycles
+    } = this.config || {};
+    this.destroy();
+    this.locale = store.get('lowcode-editor-locale') || 'zh-CN';
+    this.messages = this.messagesSet[this.locale];
+    this.i18n = generateI18n(this.locale, this.messages);
+    this.pluginStatus = this.initPluginStatus();
+    this.initHooks(hooks, appHelper);
 
+    appHelper.emit('editor.beforeInit');
+    const init = lifeCycles && lifeCycles.init || () => {};
+    // 用户可以通过设置extensions.init自定义初始化流程；
+    transformToPromise(init(this))
+      .then(() => {
+        // 注册快捷键
+        registShortCuts(shortCuts, this);
+        this.emit('editor.afterInit');
+      })
+      .catch(err => {
+        console.warn(err);
+      });
   }
 
   destroy() {
-    
+    try {
+        const {
+          hooks = [],
+          shortCuts = [],
+          lifeCycles = {}
+        } = this.config;
+        unRegistShortCuts(shortCuts);
+        this.destroyHooks(hooks);
+        lifeCycles.destroy && lifeCycles.destroy();
+      } catch (err) {
+        console.warn(err);
+        return;
+      }
   }
 
   get(key:string):any {
     return this[key];
   }
 
-  set(key, val) {
+  set(key:string|object, val:any):void {
     if (typeof key === 'string') {
+      if (['init', 'destroy', 'get', 'set', 'batchOn', 'batchOff', 'batchOnce'].includes(key)) {
+        console.warning('init, destroy, get, set, batchOn, batchOff, batchOnce is private attribute');
+        return;
+      }
       this[key] = val;
     } else if (typeof key === 'object') {
       Object.keys(key).forEach(item => {
@@ -45,18 +124,63 @@ export class Editor extends EventEmitter {
     }
   }
 
-  batchOn(events, lisenter) {
+  batchOn(events:Array<string>, lisenter:function):void {
     if (!Array.isArray(events)) return;
     events.forEach(event => this.on(event, lisenter));
   }
 
-  batchOnce(events, lisenter) {
+  batchOnce(events:Array<string>, lisenter:function):void {
     if (!Array.isArray(events)) return;
     events.forEach(event => this.once(event, lisenter));
   }
 
-  batchOff(events, lisenter) {
+  batchOff(events:Array<string>, lisenter:function):void {
     if (!Array.isArray(events)) return;
     events.forEach(event => this.off(event, lisenter));
   }
+
+  //销毁hooks中的消息监听
+  private destroyHooks(hooks = []) {
+    hooks.forEach((item, idx) => {
+      if (typeof this.__hooksFuncs[idx] === 'function') {
+        this.appHelper.off(item.message, this.__hooksFuncs[idx]);
+      }
+    });
+    delete this.__hooksFuncs;
+  };
+
+  //初始化hooks中的消息监听
+  private initHooks(hooks = []) {
+    this.__hooksFuncs = hooks.map(item => {
+      const func = (...args) => {
+        item.handler(this, ...args);
+      };
+      this[item.type](item.message, func);
+      return func;
+    });
+  };
+
+
+  private initPluginStatus () {
+    const {plugins = {}} = this.config;
+    const pluginAreas = Object.keys(plugins);
+    const res = {};
+    pluginAreas.forEach(area => {
+      (plugins[area] || []).forEach(plugin => {
+        if (plugin.type === 'Divider') return;
+        const { visible, disabled, dotted } = plugin.props || {};
+        res[plugin.pluginKey] = {
+          visible: typeof visible === 'boolean' ? visible : true,
+          disabled: typeof disabled === 'boolean' ? disabled : false,
+          dotted: typeof dotted === 'boolean' ? dotted : false
+        };
+        const pluginClass = this.props.components[skeletonUtils.generateAddonCompName(addon.addonKey)];
+        // 判断如果编辑器插件有init静态方法，则在此执行init方法
+        if (pluginClass && pluginClass.init) {
+          pluginClass.init(this);
+        }
+      });
+    });
+    return res;
+  };
 }
diff --git a/packages/editor-framework/src/index.ts b/packages/editor-framework/src/index.ts
index e69de29bb..aac18d138 100644
--- a/packages/editor-framework/src/index.ts
+++ b/packages/editor-framework/src/index.ts
@@ -0,0 +1,4 @@
+import Editor from './editor';
+
+
+export default Editor;
\ No newline at end of file
diff --git a/packages/editor-framework/src/utils.ts b/packages/editor-framework/src/utils.ts
index 5cc738bca..d09c4929c 100644
--- a/packages/editor-framework/src/utils.ts
+++ b/packages/editor-framework/src/utils.ts
@@ -72,4 +72,146 @@ export function getEnv() {
   const isTheia = window.is_theia === true;
   if (isTheia) return ENV.WEBIDE;
   return ENV.WEB;
+}
+
+// 注册快捷键
+export function registShortCuts(config, editor) {
+  const keyboardFilter = (keymaster.filter = event => {
+    let eTarget = event.target || event.srcElement;
+    let tagName = eTarget.tagName;
+    let isInput = !!(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
+    let isContenteditable = !!eTarget.getAttribute('contenteditable');
+    if (isInput || isContenteditable) {
+      if (event.metaKey === true && [70, 83].includes(event.keyCode)) event.preventDefault(); //禁止触发chrome原生的页面保存或查找
+      return false;
+    } else {
+      return true;
+    }
+  });
+
+  const ideMessage = appHelper.utils && appHelper.utils.ideMessage;
+
+  //复制
+  if (!document.copyListener) {
+    document.copyListener = e => {
+      if (!keyboardFilter(e) || appHelper.isCopying) return;
+      const schema = appHelper.schemaHelper && appHelper.schemaHelper.schemaMap[appHelper.activeKey];
+      if (!schema || !isSchema(schema)) return;
+      appHelper.isCopying = true;
+      const schemaStr = serialize(transformSchemaToPure(schema), {
+        unsafe: true
+      });
+      setClipboardData(schemaStr)
+        .then(() => {
+          ideMessage && ideMessage('success', '当前内容已复制到剪贴板，请使用快捷键Command+v进行粘贴');
+          appHelper.emit('schema.copy', schemaStr, schema);
+          appHelper.isCopying = false;
+        })
+        .catch(errMsg => {
+          ideMessage && ideMessage('error', errMsg);
+          appHelper.isCopying = false;
+        });
+    };
+    document.addEventListener('copy', document.copyListener);
+    if (window.parent.vscode) {
+      keymaster('command+c', document.copyListener);
+    }
+  }
+
+  //粘贴
+  if (!document.pasteListener) {
+    const doPaste = (e, text) => {
+      if (!keyboardFilter(e) || appHelper.isPasting) return;
+      const schemaHelper = appHelper.schemaHelper;
+      let targetKey = appHelper.activeKey;
+      let direction = 'after';
+      const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey;
+      if (!targetKey || topKey === targetKey) {
+        const schemaHelper = appHelper.schemaHelper;
+        const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey;
+        if (!topKey) return;
+        targetKey = topKey;
+        direction = 'in';
+      }
+      appHelper.isPasting = true;
+      const schema = parseObj(text);
+      if (!isSchema(schema)) {
+        appHelper.emit('illegalSchema.paste', text);
+        // ideMessage && ideMessage('error', '当前内容不是模型结构，不能粘贴进来！');
+        console.warn('paste schema illegal');
+        appHelper.isPasting = false;
+        return;
+      }
+      appHelper.emit('material.add', {
+        schema,
+        targetKey,
+        direction
+      });
+      appHelper.isPasting = false;
+      appHelper.emit('schema.paste', schema);
+    };
+    document.pasteListener = e => {
+      const clipboardData = e.clipboardData || window.clipboardData;
+      const text = clipboardData && clipboardData.getData('text');
+      doPaste(e, text);
+    };
+    document.addEventListener('paste', document.pasteListener);
+    if (window.parent.vscode) {
+      keymaster('command+v', e => {
+        const sendIDEMessage = window.parent.sendIDEMessage;
+        sendIDEMessage &&
+          sendIDEMessage({
+            action: 'readClipboard'
+          })
+            .then(text => {
+              doPaste(e, text);
+            })
+            .catch(err => {
+              console.warn(err);
+            });
+      });
+    }
+  }
+
+  (config || []).forEach(item => {
+    keymaster(item.keyboard, ev => {
+      ev.preventDefault();
+      item.handler(ev, appHelper, keymaster);
+    });
+  });
+}
+
+// 取消注册快捷
+export function unRegistShortCuts(config) {
+  (config || []).forEach(item => {
+    keymaster.unbind(item.keyboard);
+  });
+  if (window.parent.vscode) {
+    keymaster.unbind('command+c');
+    keymaster.unbind('command+v');
+  }
+  if (document.copyListener) {
+    document.removeEventListener('copy', document.copyListener);
+    delete document.copyListener;
+  }
+  if (document.pasteListener) {
+    document.removeEventListener('paste', document.pasteListener);
+    delete document.pasteListener;
+  }
+}
+
+// 将函数返回结果转成promise形式，如果函数有返回值则根据返回值的bool类型判断是reject还是resolve，若函数无返回值默认执行resolve
+export function transformToPromise(input) {
+  if (input instanceof Promise) return input;
+  return new Promise((resolve, reject) => {
+    if (input || input === undefined) {
+      resolve();
+    } else {
+      reject();
+    }
+  });
+}
+
+export function comboEditorConfig(defaultConfig, customConfig) {
+
 }
\ No newline at end of file
diff --git a/packages/editor-skeleton/build.json b/packages/editor-skeleton/build.json
new file mode 100644
index 000000000..77627cdf9
--- /dev/null
+++ b/packages/editor-skeleton/build.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "build-plugin-component",
+    "build-plugin-fusion",
+    ["build-plugin-moment-locales", {
+      "locales": ["zh-cn"]
+    }]
+  ]
+}
\ No newline at end of file
diff --git a/packages/editor-skeleton/demo/usage.md b/packages/editor-skeleton/demo/usage.md
new file mode 100644
index 000000000..9f19eae0b
--- /dev/null
+++ b/packages/editor-skeleton/demo/usage.md
@@ -0,0 +1,24 @@
+---
+title: Simple Usage
+order: 1
+---
+
+本 Demo 演示一行文字的用法。
+
+````jsx
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+class App extends Component {
+  render() {
+    return (
+      <div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render((
+  <App />
+), mountNode);
+````
diff --git a/packages/editor-skeleton/es/components/LeftIcon/index.js b/packages/editor-skeleton/es/components/LeftIcon/index.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/components/LeftIcon/index.scss b/packages/editor-skeleton/es/components/LeftIcon/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/components/LeftPlugin/index.js b/packages/editor-skeleton/es/components/LeftPlugin/index.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/components/LeftPlugin/index.scss b/packages/editor-skeleton/es/components/LeftPlugin/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/components/Panel/index.js b/packages/editor-skeleton/es/components/Panel/index.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/components/TopIcon/index.d.ts b/packages/editor-skeleton/es/components/TopIcon/index.d.ts
new file mode 100644
index 000000000..0e1aea7cb
--- /dev/null
+++ b/packages/editor-skeleton/es/components/TopIcon/index.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface Props {
+    name: string;
+}
+declare const Greeting: ({ name }: Props) => JSX.Element;
+export default Greeting;
diff --git a/packages/editor-skeleton/es/components/TopIcon/index.js b/packages/editor-skeleton/es/components/TopIcon/index.js
new file mode 100644
index 000000000..3a62c613d
--- /dev/null
+++ b/packages/editor-skeleton/es/components/TopIcon/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+var Greeting = function Greeting(_ref) {
+  var name = _ref.name;
+  return React.createElement("div", {
+    style: {
+      textAlign: 'center',
+      fontSize: '40px',
+      fontWeight: 'bold'
+    }
+  }, "Hello, ", name);
+};
+
+export default Greeting;
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/components/TopPlugin/index.js b/packages/editor-skeleton/es/components/TopPlugin/index.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/components/TopPlugin/index.scss b/packages/editor-skeleton/es/components/TopPlugin/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/config/skeleton.d.ts b/packages/editor-skeleton/es/config/skeleton.d.ts
new file mode 100644
index 000000000..67ae8a0ae
--- /dev/null
+++ b/packages/editor-skeleton/es/config/skeleton.d.ts
@@ -0,0 +1,14 @@
+declare const routerConfig: {
+    path: string;
+    component: any;
+    children: ({
+        path: string;
+        component: any;
+        redirect?: undefined;
+    } | {
+        path: string;
+        redirect: string;
+        component?: undefined;
+    })[];
+}[];
+export default routerConfig;
diff --git a/packages/editor-skeleton/es/config/skeleton.js b/packages/editor-skeleton/es/config/skeleton.js
new file mode 100644
index 000000000..8fb0727ab
--- /dev/null
+++ b/packages/editor-skeleton/es/config/skeleton.js
@@ -0,0 +1,14 @@
+import Dashboard from '@/pages/Dashboard';
+import BasicLayout from '@/layouts/BasicLayout';
+var routerConfig = [{
+  path: '/',
+  component: BasicLayout,
+  children: [{
+    path: '/dashboard',
+    component: Dashboard
+  }, {
+    path: '/',
+    redirect: '/dashboard'
+  }]
+}];
+export default routerConfig;
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/config/utils.d.ts b/packages/editor-skeleton/es/config/utils.d.ts
new file mode 100644
index 000000000..5e5bda5ab
--- /dev/null
+++ b/packages/editor-skeleton/es/config/utils.d.ts
@@ -0,0 +1,2 @@
+declare const asideMenuConfig: any[];
+export { asideMenuConfig };
diff --git a/packages/editor-skeleton/es/config/utils.js b/packages/editor-skeleton/es/config/utils.js
new file mode 100644
index 000000000..39cee308b
--- /dev/null
+++ b/packages/editor-skeleton/es/config/utils.js
@@ -0,0 +1,3 @@
+// 菜单配置
+var asideMenuConfig = [];
+export { asideMenuConfig };
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/global.scss b/packages/editor-skeleton/es/global.scss
new file mode 100644
index 000000000..68689a592
--- /dev/null
+++ b/packages/editor-skeleton/es/global.scss
@@ -0,0 +1,23 @@
+.next-loading {
+  .next-loading-wrap {
+    height: 100%;
+  }
+}
+.lowcode-editor {
+  .lowcode-main-content {
+    position: absolute;
+    top: 54px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+  }
+  .lowcode-center-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #f7f7f7;
+    padding: 10px;
+    overflow: auto;
+  }
+}
diff --git a/packages/editor-skeleton/es/index.d.ts b/packages/editor-skeleton/es/index.d.ts
new file mode 100644
index 000000000..f07a622f4
--- /dev/null
+++ b/packages/editor-skeleton/es/index.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PureComponent } from 'react-dom';
+import './global.scss';
+export default class Skeleton extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
diff --git a/packages/editor-skeleton/es/index.js b/packages/editor-skeleton/es/index.js
new file mode 100644
index 000000000..7031d8ee9
--- /dev/null
+++ b/packages/editor-skeleton/es/index.js
@@ -0,0 +1,43 @@
+import _ConfigProvider from "@alifd/next/es/config-provider";
+import _Loading from "@alifd/next/es/loading";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react-dom'; // import Editor from '@ali/lowcode-engine-editor';
+
+import './global.scss';
+
+var Skeleton = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(Skeleton, _PureComponent);
+
+  function Skeleton(props) {
+    return _PureComponent.call(this, props) || this; // this.editor = new Editor(props.config, props.utils);
+  }
+
+  var _proto = Skeleton.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {// this.editor && this.editor.destroy();
+    // this.editor = null;
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        location = _this$props.location,
+        history = _this$props.history,
+        messages = _this$props.messages;
+    return React.createElement(_ConfigProvider, {
+      locale: messages[appHelper.locale]
+    }, React.createElement(_Loading, {
+      tip: this.i18n('loading'),
+      size: "large",
+      visible: loading || !initReady,
+      shape: "fusion-reactor",
+      fullScreen: true
+    }, React.createElement("div", {
+      className: "lowcode-editor"
+    })));
+  };
+
+  return Skeleton;
+}(PureComponent);
+
+Skeleton.displayName = 'lowcodeEditorSkeleton';
+export { Skeleton as default };
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/layouts/CenterArea/index.d.ts b/packages/editor-skeleton/es/layouts/CenterArea/index.d.ts
new file mode 100644
index 000000000..201db137a
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/CenterArea/index.d.ts
@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class CenterArea extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}
diff --git a/packages/editor-skeleton/es/layouts/CenterArea/index.js b/packages/editor-skeleton/es/layouts/CenterArea/index.js
new file mode 100644
index 000000000..4b9710f81
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/CenterArea/index.js
@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var CenterArea = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(CenterArea, _PureComponent);
+
+  function CenterArea(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = CenterArea.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-center-area"
+    });
+  };
+
+  return CenterArea;
+}(PureComponent);
+
+CenterArea.displayName = 'lowcodeCenterArea';
+export { CenterArea as default };
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/layouts/CenterArea/index.scss b/packages/editor-skeleton/es/layouts/CenterArea/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/layouts/LeftArea/index.d.ts b/packages/editor-skeleton/es/layouts/LeftArea/index.d.ts
new file mode 100644
index 000000000..d888d90f0
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/LeftArea/index.d.ts
@@ -0,0 +1,5 @@
+declare const _default: {
+    Nav: any;
+    Panel: any;
+};
+export default _default;
diff --git a/packages/editor-skeleton/es/layouts/LeftArea/index.js b/packages/editor-skeleton/es/layouts/LeftArea/index.js
new file mode 100644
index 000000000..50ecfad2f
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/LeftArea/index.js
@@ -0,0 +1,6 @@
+import Nav from './nav';
+import Panel from './panel';
+export default {
+  Nav: Nav,
+  Panel: Panel
+};
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/layouts/LeftArea/index.scss b/packages/editor-skeleton/es/layouts/LeftArea/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/layouts/LeftArea/nav.d.ts b/packages/editor-skeleton/es/layouts/LeftArea/nav.d.ts
new file mode 100644
index 000000000..c44a09527
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/LeftArea/nav.d.ts
@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class LeftAreaPanel extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}
diff --git a/packages/editor-skeleton/es/layouts/LeftArea/nav.js b/packages/editor-skeleton/es/layouts/LeftArea/nav.js
new file mode 100644
index 000000000..962129007
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/LeftArea/nav.js
@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var LeftAreaPanel = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(LeftAreaPanel, _PureComponent);
+
+  function LeftAreaPanel(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = LeftAreaPanel.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-left-area-nav"
+    });
+  };
+
+  return LeftAreaPanel;
+}(PureComponent);
+
+LeftAreaPanel.displayName = 'lowcodeLeftAreaNav';
+export { LeftAreaPanel as default };
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/layouts/LeftArea/panel.d.ts b/packages/editor-skeleton/es/layouts/LeftArea/panel.d.ts
new file mode 100644
index 000000000..c44a09527
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/LeftArea/panel.d.ts
@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class LeftAreaPanel extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}
diff --git a/packages/editor-skeleton/es/layouts/LeftArea/panel.js b/packages/editor-skeleton/es/layouts/LeftArea/panel.js
new file mode 100644
index 000000000..0120423d8
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/LeftArea/panel.js
@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var LeftAreaPanel = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(LeftAreaPanel, _PureComponent);
+
+  function LeftAreaPanel(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = LeftAreaPanel.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-left-area"
+    });
+  };
+
+  return LeftAreaPanel;
+}(PureComponent);
+
+LeftAreaPanel.displayName = 'lowcodeLeftAreaPanel';
+export { LeftAreaPanel as default };
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/layouts/RightArea/index.d.ts b/packages/editor-skeleton/es/layouts/RightArea/index.d.ts
new file mode 100644
index 000000000..ad87a57de
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/RightArea/index.d.ts
@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class RightArea extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}
diff --git a/packages/editor-skeleton/es/layouts/RightArea/index.js b/packages/editor-skeleton/es/layouts/RightArea/index.js
new file mode 100644
index 000000000..d1d38689d
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/RightArea/index.js
@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var RightArea = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(RightArea, _PureComponent);
+
+  function RightArea(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = RightArea.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-right-area"
+    });
+  };
+
+  return RightArea;
+}(PureComponent);
+
+RightArea.displayName = 'lowcodeRightArea';
+export { RightArea as default };
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/layouts/RightArea/index.scss b/packages/editor-skeleton/es/layouts/RightArea/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/layouts/TopArea/index.d.ts b/packages/editor-skeleton/es/layouts/TopArea/index.d.ts
new file mode 100644
index 000000000..716bd94a8
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/TopArea/index.d.ts
@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class TopArea extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}
diff --git a/packages/editor-skeleton/es/layouts/TopArea/index.js b/packages/editor-skeleton/es/layouts/TopArea/index.js
new file mode 100644
index 000000000..39f2b2b23
--- /dev/null
+++ b/packages/editor-skeleton/es/layouts/TopArea/index.js
@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var TopArea = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(TopArea, _PureComponent);
+
+  function TopArea(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = TopArea.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-top-area"
+    });
+  };
+
+  return TopArea;
+}(PureComponent);
+
+TopArea.displayName = 'lowcodeTopArea';
+export { TopArea as default };
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/layouts/TopArea/index.scss b/packages/editor-skeleton/es/layouts/TopArea/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/es/locale/en-US.js b/packages/editor-skeleton/es/locale/en-US.js
new file mode 100644
index 000000000..f190625da
--- /dev/null
+++ b/packages/editor-skeleton/es/locale/en-US.js
@@ -0,0 +1,10 @@
+export default {
+  loading: 'loading...',
+  rejectRedirect: 'Redirect is not allowed',
+  expand: 'Unfold',
+  fold: 'Fold',
+  pageNotExist: 'The current Page not exist',
+  enterFromAppCenter: 'Please enter from the app center',
+  noPermission: 'Sorry, you do not have the develop permission',
+  getPermission: 'Please connect the app owners {owners} to get the permission'
+};
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/locale/ja-JP.js b/packages/editor-skeleton/es/locale/ja-JP.js
new file mode 100644
index 000000000..7c645e42f
--- /dev/null
+++ b/packages/editor-skeleton/es/locale/ja-JP.js
@@ -0,0 +1 @@
+export default {};
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/locale/zh-CN.js b/packages/editor-skeleton/es/locale/zh-CN.js
new file mode 100644
index 000000000..51791f741
--- /dev/null
+++ b/packages/editor-skeleton/es/locale/zh-CN.js
@@ -0,0 +1,10 @@
+export default {
+  loading: '加载中...',
+  rejectRedirect: '开发中，已阻止发生跳转',
+  expand: '展开',
+  fold: '收起',
+  pageNotExist: '当前访问地址不存在',
+  enterFromAppCenter: '请从应用中心入口重新进入',
+  noPermission: '抱歉，您暂无开发权限',
+  getPermission: '请移步应用中心申请开发权限, 或联系 {owners} 开通权限'
+};
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/locale/zh-TW.js b/packages/editor-skeleton/es/locale/zh-TW.js
new file mode 100644
index 000000000..7c645e42f
--- /dev/null
+++ b/packages/editor-skeleton/es/locale/zh-TW.js
@@ -0,0 +1 @@
+export default {};
\ No newline at end of file
diff --git a/packages/editor-skeleton/es/style.js b/packages/editor-skeleton/es/style.js
new file mode 100644
index 000000000..ba2702ef4
--- /dev/null
+++ b/packages/editor-skeleton/es/style.js
@@ -0,0 +1,2 @@
+import '@alifd/next/es/config-provider/style';
+import '@alifd/next/es/loading/style';
\ No newline at end of file
diff --git a/packages/editor-skeleton/package.json b/packages/editor-skeleton/package.json
index 7ada377d0..9067b4544 100644
--- a/packages/editor-skeleton/package.json
+++ b/packages/editor-skeleton/package.json
@@ -15,20 +15,26 @@
     "react-router-dom": "^5.0.1"
   },
   "devDependencies": {
+    "@alib/build-scripts": "^0.1.3",
+    "@alifd/next": "1.x",
     "@ice/spec": "^0.1.1",
-    "css-modules-typescript-loader": "^2.0.4",
+    "@types/lodash": "^4.14.149",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
+    "build-plugin-component": "^0.2.0",
+    "build-plugin-fusion": "^0.1.0",
+    "build-plugin-moment-locales": "^0.1.0",
     "eslint": "^6.0.1",
-    "ice-plugin-fusion": "^0.1.4",
-    "ice-plugin-moment-locales": "^0.1.0",
-    "ice-scripts": "^2.0.0",
-    "stylelint": "^10.1.0"
+    "prettier": "^1.19.1",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "scripts": {
-    "start": "ice-scripts dev",
-    "build": "ice-scripts build",
-    "lint": "npm run eslint && npm run stylelint",
-    "eslint": "eslint --cache --ext .js,.jsx ./",
-    "stylelint": "stylelint ./**/*.scss"
+    "start": "build-scripts start",
+    "build": "build-scripts build",
+    "prepublishOnly": "npm run prettier && npm run build",
+    "lint": "eslint --cache --ext .js,.jsx ./",
+    "prettier": "prettier  --write \"./src/**/*.{ts,tsx,js,jsx,ejs,less,css,scss,json}\" "
   },
   "engines": {
     "node": ">=8.0.0"
@@ -43,5 +49,6 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/ice-lab/react-materials/tree/master/scaffolds/ice-ts"
-  }
+  },
+  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-engine-skeleton@0.0.1/build/index.html"
 }
diff --git a/packages/editor-skeleton/src/components/Guide/index.module.scss b/packages/editor-skeleton/src/components/Guide/index.module.scss
deleted file mode 100644
index eeb4e21aa..000000000
--- a/packages/editor-skeleton/src/components/Guide/index.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.item {
-  height: 34px;
-  line-height: 34px;
-}
-.title {
-  text-align: center;
-}
-.container {
-  width: 470px;
-  margin: 40px auto;
-}
\ No newline at end of file
diff --git a/packages/editor-skeleton/src/components/Guide/index.tsx b/packages/editor-skeleton/src/components/Guide/index.tsx
deleted file mode 100644
index 9a07b5789..000000000
--- a/packages/editor-skeleton/src/components/Guide/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { Button } from '@alifd/next';
-import styles from './index.module.scss';
-
-const Guide = () => {
-  return (
-    <div className={styles.container}>
-      <h2 className={styles.title}>使用指南</h2>
-      <ul>
-        <li className={styles.item}>
-          1. 该模板适用于从 0 到 1 开始搭建项目，内置引导页面，路由和菜单展示。
-        </li>
-        <li className={styles.item}>2. 菜单配置: menuConfig.js。</li>
-        <li className={styles.item}>3. 路由配置: routerConfig.js。</li>
-        <li className={styles.item}>
-          4. 通过 GUI 工具{' '}
-          <a
-            href="https://alibaba.github.io/ice/iceworks"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Iceworks
-          </a>{' '}
-          创建页面，会同步的更新菜单和路由配置。
-        </li>
-        <li className={styles.item}>
-          5. 基于{' '}
-          <a
-            href="https://alibaba.github.io/ice/block"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            物料
-          </a>{' '}
-          生成的页面将会添加在 pages 目录。
-        </li>
-        <li className={styles.item}>
-          6. 让前端工程变的轻松便捷，
-          <a
-            href="https://alibaba.github.io/ice/docs/iceworks"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            下载 iceworks
-          </a>{' '}
-          。
-        </li>
-      </ul>
-      <div style={{ textAlign: 'center', marginTop: '40px' }}>
-        <a
-          href="https://alibaba.github.io/ice/docs/iceworks"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Button type="secondary" style={{ marginRight: '20px' }}>
-            快速开始{' '}
-          </Button>
-        </a>
-        <a
-          href="https://www.tslang.cn/docs/home.html"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Button type="primary">学习 TypeScript</Button>
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default Guide;
diff --git a/packages/editor-skeleton/src/components/LeftIcon/index.scss b/packages/editor-skeleton/src/components/LeftIcon/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/components/LeftIcon/index.tsx b/packages/editor-skeleton/src/components/LeftIcon/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/components/LeftPlugin/index.scss b/packages/editor-skeleton/src/components/LeftPlugin/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/components/LeftPlugin/index.tsx b/packages/editor-skeleton/src/components/LeftPlugin/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/components/Panel/index.tsx b/packages/editor-skeleton/src/components/Panel/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/components/Greeting/index.tsx b/packages/editor-skeleton/src/components/TopIcon/index.tsx
similarity index 100%
rename from packages/editor-skeleton/src/components/Greeting/index.tsx
rename to packages/editor-skeleton/src/components/TopIcon/index.tsx
diff --git a/packages/editor-skeleton/src/components/TopPlugin/index.scss b/packages/editor-skeleton/src/components/TopPlugin/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/components/TopPlugin/index.tsx b/packages/editor-skeleton/src/components/TopPlugin/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/config/routes.ts b/packages/editor-skeleton/src/config/skeleton.ts
similarity index 100%
rename from packages/editor-skeleton/src/config/routes.ts
rename to packages/editor-skeleton/src/config/skeleton.ts
diff --git a/packages/editor-skeleton/src/config/menu.ts b/packages/editor-skeleton/src/config/utils.ts
similarity index 100%
rename from packages/editor-skeleton/src/config/menu.ts
rename to packages/editor-skeleton/src/config/utils.ts
diff --git a/packages/editor-skeleton/src/global.scss b/packages/editor-skeleton/src/global.scss
index 6086b53a6..68689a592 100644
--- a/packages/editor-skeleton/src/global.scss
+++ b/packages/editor-skeleton/src/global.scss
@@ -1,6 +1,23 @@
-// 引入默认全局样式
-@import '@alifd/next/reset.scss';
-
-body {
-  -webkit-font-smoothing: antialiased;
-}
\ No newline at end of file
+.next-loading {
+  .next-loading-wrap {
+    height: 100%;
+  }
+}
+.lowcode-editor {
+  .lowcode-main-content {
+    position: absolute;
+    top: 54px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+  }
+  .lowcode-center-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #f7f7f7;
+    padding: 10px;
+    overflow: auto;
+  }
+}
diff --git a/packages/editor-skeleton/src/index.tsx b/packages/editor-skeleton/src/index.tsx
index ba347d027..2a9643b69 100644
--- a/packages/editor-skeleton/src/index.tsx
+++ b/packages/editor-skeleton/src/index.tsx
@@ -1,13 +1,52 @@
-import ReactDOM from 'react-dom';
+import React, {PureComponent} from 'react-dom';
+
+// import Editor from '@ali/lowcode-engine-editor';
+import { Loading, ConfigProvider } from '@alifd/next';
+import defaultConfig from './config/skeleton';
+
+import TopArea from './layouts/TopArea';
+import LeftArea from './layouts/LeftArea';
+import CenterArea from './layouts/CenterArea';
+import RightArea from './layouts/RightArea';
 
 import './global.scss';
 
-import router from './router';
+export default class Skeleton extends PureComponent {
+  static displayName = 'lowcodeEditorSkeleton';
 
-const ICE_CONTAINER = document.getElementById('ice-container');
+  constructor(props) {
+    super(props);
+    // this.editor = new Editor(props.config, props.utils);
+  }
 
-if (!ICE_CONTAINER) {
-  throw new Error('当前页面不存在 <div id="ice-container"></div> 节点.');
+  componentWillUnmount() {
+    // this.editor && this.editor.destroy();
+    // this.editor = null;
+  }
+
+  render() {
+    const { location, history, messages } = this.props;
+    
+    return (
+      <ConfigProvider locale={messages[appHelper.locale]}>
+        <Loading
+          tip={this.i18n('loading')}
+          size="large"
+          visible={loading || !initReady}
+          shape="fusion-reactor"
+          fullScreen
+        >
+          <div className="lowcode-editor">
+            {/* <TopArea/>
+            <div className="lowcode-main-content">
+              <LeftArea.Nav/>
+              <LeftArea.Panel/>
+              <CenterArea/>
+              <RightArea/>
+            </div> */}
+          </div>
+        </Loading>
+      </ConfigProvider>
+    );
+  }
 }
-
-ReactDOM.render(router(), ICE_CONTAINER);
diff --git a/packages/editor-skeleton/src/layouts/BasicLayout/index.tsx b/packages/editor-skeleton/src/layouts/BasicLayout/index.tsx
deleted file mode 100644
index b45f3c44e..000000000
--- a/packages/editor-skeleton/src/layouts/BasicLayout/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-export default function BasicLayout({ children }) {
-  return (
-    <div style={{ paddingTop: '100px' }}>
-      {children}
-    </div>
-  );
-}
diff --git a/packages/editor-skeleton/src/layouts/CenterArea/index.scss b/packages/editor-skeleton/src/layouts/CenterArea/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/layouts/CenterArea/index.tsx b/packages/editor-skeleton/src/layouts/CenterArea/index.tsx
new file mode 100644
index 000000000..36263969c
--- /dev/null
+++ b/packages/editor-skeleton/src/layouts/CenterArea/index.tsx
@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react';
+
+import './index.scss';
+
+export default class CenterArea extends PureComponent {
+  static displayName = 'lowcodeCenterArea';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="lowcode-center-area" />
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/editor-skeleton/src/layouts/LeftArea/index.scss b/packages/editor-skeleton/src/layouts/LeftArea/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/layouts/LeftArea/index.tsx b/packages/editor-skeleton/src/layouts/LeftArea/index.tsx
new file mode 100644
index 000000000..f77a9b830
--- /dev/null
+++ b/packages/editor-skeleton/src/layouts/LeftArea/index.tsx
@@ -0,0 +1,7 @@
+import Nav from './nav';
+import Panel from './panel';
+
+export default {
+  Nav,
+  Panel
+};
\ No newline at end of file
diff --git a/packages/editor-skeleton/src/layouts/LeftArea/nav.tsx b/packages/editor-skeleton/src/layouts/LeftArea/nav.tsx
new file mode 100644
index 000000000..5c1fbea92
--- /dev/null
+++ b/packages/editor-skeleton/src/layouts/LeftArea/nav.tsx
@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react';
+
+import './index.scss';
+
+export default class LeftAreaPanel extends PureComponent {
+  static displayName = 'lowcodeLeftAreaNav';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="lowcode-left-area-nav"/>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/editor-skeleton/src/layouts/LeftArea/panel.tsx b/packages/editor-skeleton/src/layouts/LeftArea/panel.tsx
new file mode 100644
index 000000000..c378ad929
--- /dev/null
+++ b/packages/editor-skeleton/src/layouts/LeftArea/panel.tsx
@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react';
+
+import './index.scss';
+
+export default class LeftAreaPanel extends PureComponent {
+  static displayName = 'lowcodeLeftAreaPanel';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="lowcode-left-area"/>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/editor-skeleton/src/layouts/RightArea/index.scss b/packages/editor-skeleton/src/layouts/RightArea/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/layouts/RightArea/index.tsx b/packages/editor-skeleton/src/layouts/RightArea/index.tsx
new file mode 100644
index 000000000..449a273e5
--- /dev/null
+++ b/packages/editor-skeleton/src/layouts/RightArea/index.tsx
@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react';
+
+import './index.scss';
+
+export default class RightArea extends PureComponent {
+  static displayName = 'lowcodeRightArea';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="lowcode-right-area"/>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/editor-skeleton/src/layouts/TopArea/index.scss b/packages/editor-skeleton/src/layouts/TopArea/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-skeleton/src/layouts/TopArea/index.tsx b/packages/editor-skeleton/src/layouts/TopArea/index.tsx
new file mode 100644
index 000000000..3bc7e3562
--- /dev/null
+++ b/packages/editor-skeleton/src/layouts/TopArea/index.tsx
@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react';
+
+import './index.scss';
+
+export default class TopArea extends PureComponent {
+  static displayName = 'lowcodeTopArea';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="lowcode-top-area"/>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/editor-skeleton/src/locale/en-US.js b/packages/editor-skeleton/src/locale/en-US.js
new file mode 100644
index 000000000..936701e33
--- /dev/null
+++ b/packages/editor-skeleton/src/locale/en-US.js
@@ -0,0 +1,10 @@
+export default {
+  loading: 'loading...',
+  rejectRedirect: 'Redirect is not allowed',
+  expand: 'Unfold',
+  fold: 'Fold',
+  pageNotExist: 'The current Page not exist',
+  enterFromAppCenter: 'Please enter from the app center',
+  noPermission: 'Sorry, you do not have the develop permission',
+  getPermission: 'Please connect the app owners {owners} to get the permission'
+};
diff --git a/packages/editor-skeleton/src/locale/ja-JP.js b/packages/editor-skeleton/src/locale/ja-JP.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/packages/editor-skeleton/src/locale/ja-JP.js
@@ -0,0 +1 @@
+export default {};
diff --git a/packages/editor-skeleton/src/locale/zh-CN.js b/packages/editor-skeleton/src/locale/zh-CN.js
new file mode 100644
index 000000000..efe4ea898
--- /dev/null
+++ b/packages/editor-skeleton/src/locale/zh-CN.js
@@ -0,0 +1,10 @@
+export default {
+  loading: '加载中...',
+  rejectRedirect: '开发中，已阻止发生跳转',
+  expand: '展开',
+  fold: '收起',
+  pageNotExist: '当前访问地址不存在',
+  enterFromAppCenter: '请从应用中心入口重新进入',
+  noPermission: '抱歉，您暂无开发权限',
+  getPermission: '请移步应用中心申请开发权限, 或联系 {owners} 开通权限'
+};
diff --git a/packages/editor-skeleton/src/locale/zh-TW.js b/packages/editor-skeleton/src/locale/zh-TW.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/packages/editor-skeleton/src/locale/zh-TW.js
@@ -0,0 +1 @@
+export default {};
diff --git a/packages/editor-skeleton/src/pages/Dashboard/index.tsx b/packages/editor-skeleton/src/pages/Dashboard/index.tsx
deleted file mode 100644
index 2130cc8ce..000000000
--- a/packages/editor-skeleton/src/pages/Dashboard/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import Guide from '@/components/Guide';
-import Greeting from '@/components/Greeting';
-
-export default function Dashboard() {
-  return (
-    <div>
-      <Greeting name="TypeScript" />
-      <Guide />
-    </div>
-  );
-}
diff --git a/packages/editor-skeleton/src/router.tsx b/packages/editor-skeleton/src/router.tsx
deleted file mode 100644
index e260e72c8..000000000
--- a/packages/editor-skeleton/src/router.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
-import path from 'path';
-import routes from '@/config/routes';
-
-const RouteItem = (props) => {
-  const { redirect, path: routePath, component, key } = props;
-  if (redirect) {
-    return (
-      <Redirect
-        exact
-        key={key}
-        from={routePath}
-        to={redirect}
-      />
-    );
-  }
-  return (
-    <Route
-      key={key}
-      component={component}
-      path={routePath}
-    />
-  );
-};
-
-const router = () => {
-  return (
-    <Router>
-      <Switch>
-        {routes.map((route, id) => {
-          const { component: RouteComponent, children, ...others } = route;
-          return (
-            <Route
-              key={id}
-              {...others}
-              component={(props) => {
-                return (
-                  children ? (
-                    <RouteComponent key={id} {...props}>
-                      <Switch>
-                        {children.map((routeChild, idx) => {
-                          const { redirect, path: childPath, component } = routeChild;
-                          return RouteItem({
-                            key: `${id}-${idx}`,
-                            redirect,
-                            path: childPath && path.join(route.path, childPath),
-                            component,
-                          });
-                        })}
-                      </Switch>
-                    </RouteComponent>
-                  ) : (
-                    <>
-                      {
-                        RouteItem({
-                          key: id,
-                          ...route,
-                        })
-                      }
-                    </>
-                  )
-                );
-              }}
-            />
-          );
-        })}
-      </Switch>
-    </Router>
-  );
-};
-
-export default router;
diff --git a/packages/editor-skeleton/tsconfig.json b/packages/editor-skeleton/tsconfig.json
index 3f5e62810..a511d68ba 100644
--- a/packages/editor-skeleton/tsconfig.json
+++ b/packages/editor-skeleton/tsconfig.json
@@ -2,30 +2,20 @@
   "compileOnSave": false,
   "buildOnSave": false,
   "compilerOptions": {
-    "baseUrl": ".",
     "outDir": "build",
     "module": "esnext",
     "target": "es6",
     "jsx": "react",
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
     "lib": ["es6", "dom"],
     "sourceMap": true,
     "allowJs": true,
-    "rootDir": "src",
-    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
-    "noImplicitAny": false,
-    "importHelpers": true,
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
-    "skipLibCheck": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "noImplicitAny": true,
+    "skipLibCheck": true
   },
-  "include": ["src/*"],
+  "include": ["src/*.ts", "src/*.tsx"],
   "exclude": ["node_modules", "build", "public"]
 }
diff --git a/packages/editor/.editorconfig b/packages/editor/.editorconfig
new file mode 100644
index 000000000..5760be583
--- /dev/null
+++ b/packages/editor/.editorconfig
@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/packages/editor/.eslintignore b/packages/editor/.eslintignore
new file mode 100644
index 000000000..3b437e614
--- /dev/null
+++ b/packages/editor/.eslintignore
@@ -0,0 +1,11 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js
diff --git a/packages/editor/.eslintrc.js b/packages/editor/.eslintrc.js
new file mode 100644
index 000000000..18ae6baa7
--- /dev/null
+++ b/packages/editor/.eslintrc.js
@@ -0,0 +1,7 @@
+const { eslint, deepmerge } = require('@ice/spec');
+
+module.exports = deepmerge(eslint, {
+  rules: {
+    "global-require": 0,
+  },
+});
diff --git a/packages/editor/.gitignore b/packages/editor/.gitignore
new file mode 100644
index 000000000..c590da5b0
--- /dev/null
+++ b/packages/editor/.gitignore
@@ -0,0 +1,20 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/build
+/dist
+
+# misc
+.idea/
+.happypack
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# ignore d.ts auto generated by css-modules-typescript-loader
+*.module.scss.d.ts
\ No newline at end of file
diff --git a/packages/editor/.stylelintignore b/packages/editor/.stylelintignore
new file mode 100644
index 000000000..82af6f60d
--- /dev/null
+++ b/packages/editor/.stylelintignore
@@ -0,0 +1,7 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
diff --git a/packages/editor/.stylelintrc.js b/packages/editor/.stylelintrc.js
new file mode 100644
index 000000000..eeb605b33
--- /dev/null
+++ b/packages/editor/.stylelintrc.js
@@ -0,0 +1,3 @@
+const { stylelint } = require('@ice/spec');
+
+module.exports = stylelint;
diff --git a/packages/editor/README.md b/packages/editor/README.md
new file mode 100644
index 000000000..6a1a5d0fa
--- /dev/null
+++ b/packages/editor/README.md
@@ -0,0 +1,20 @@
+# ice-typescript-starter
+
+## 使用
+
+- 启动调试服务: `npm start`
+- 构建 dist: `npm run build`
+
+## 目录结构
+
+- 入口文件: `src/index.jsx`
+- 导航配置: `src/config/menu.js`
+- 路由配置: `src/config/routes.js`
+- 路由入口: `src/router.jsx`
+- 布局文件: `src/layouts`
+- 通用组件: `src/components`
+- 页面文件: `src/pages`
+
+## 效果图
+
+![screenshot](https://img.alicdn.com/tfs/TB13AFlH6TpK1RjSZKPXXa3UpXa-2860-1580.png)
diff --git a/packages/editor/abc.json b/packages/editor/abc.json
new file mode 100644
index 000000000..dce1f92ed
--- /dev/null
+++ b/packages/editor/abc.json
@@ -0,0 +1,4 @@
+{
+  "type": "ice-scripts",
+  "builder": "@ali/builder-ice-scripts"
+}
diff --git a/packages/editor-skeleton/ice.config.js b/packages/editor/ice.config.js
similarity index 100%
rename from packages/editor-skeleton/ice.config.js
rename to packages/editor/ice.config.js
diff --git a/packages/editor/jsconfig.json b/packages/editor/jsconfig.json
new file mode 100644
index 000000000..9e0f3c03d
--- /dev/null
+++ b/packages/editor/jsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "react",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/packages/editor/package.json b/packages/editor/package.json
new file mode 100644
index 000000000..5f31e94e0
--- /dev/null
+++ b/packages/editor/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@icedesign/ts-scaffold",
+  "version": "0.0.1",
+  "description": "低代码编辑器",
+  "dependencies": {
+    "@alifd/next": "^1.x",
+    "@icedesign/theme": "^1.x",
+    "@types/react": "^16.8.3",
+    "@types/react-dom": "^16.8.2",
+    "moment": "^2.23.0",
+    "prop-types": "^15.5.8",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-router-dom": "^5.1.2"
+  },
+  "devDependencies": {
+    "@ice/spec": "^0.1.1",
+    "css-modules-typescript-loader": "^2.0.4",
+    "eslint": "^6.0.1",
+    "ice-plugin-fusion": "^0.1.4",
+    "ice-plugin-moment-locales": "^0.1.0",
+    "ice-scripts": "^2.0.0",
+    "stylelint": "^10.1.0"
+  },
+  "scripts": {
+    "start": "ice-scripts dev",
+    "build": "ice-scripts build",
+    "lint": "npm run eslint && npm run stylelint",
+    "eslint": "eslint --cache --ext .js,.jsx ./",
+    "stylelint": "stylelint ./**/*.scss"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "iceworks": {
+    "type": "react",
+    "adapter": "adapter-react-v3"
+  },
+  "ideMode": {
+    "name": "ice-react"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ice-lab/react-materials/tree/master/scaffolds/ice-ts"
+  }
+}
diff --git a/packages/editor-skeleton/public/favicon.png b/packages/editor/public/favicon.png
similarity index 100%
rename from packages/editor-skeleton/public/favicon.png
rename to packages/editor/public/favicon.png
diff --git a/packages/editor-skeleton/public/index.html b/packages/editor/public/index.html
similarity index 100%
rename from packages/editor-skeleton/public/index.html
rename to packages/editor/public/index.html
diff --git a/packages/editor/src/config/components.js b/packages/editor/src/config/components.js
new file mode 100644
index 000000000..96acc32a7
--- /dev/null
+++ b/packages/editor/src/config/components.js
@@ -0,0 +1,3 @@
+
+export default {
+};
\ No newline at end of file
diff --git a/packages/editor/src/config/constants.js b/packages/editor/src/config/constants.js
new file mode 100644
index 000000000..1c713fc4e
--- /dev/null
+++ b/packages/editor/src/config/constants.js
@@ -0,0 +1,3 @@
+export default {
+  "namespace": "page"
+}
\ No newline at end of file
diff --git a/packages/editor/src/config/locale/en-US.js b/packages/editor/src/config/locale/en-US.js
new file mode 100644
index 000000000..7c645e42f
--- /dev/null
+++ b/packages/editor/src/config/locale/en-US.js
@@ -0,0 +1 @@
+export default {};
\ No newline at end of file
diff --git a/packages/editor/src/config/locale/index.js b/packages/editor/src/config/locale/index.js
new file mode 100644
index 000000000..eaa4da099
--- /dev/null
+++ b/packages/editor/src/config/locale/index.js
@@ -0,0 +1,10 @@
+import en_us from './en-US';
+import zh_cn from './zh-CN';
+import zh_tw from './zh-TW';
+import ja_jp from './ja-JP';
+export default {
+  'en-US': en_us,
+  'zh-CN': zh_cn,
+  'zh-TW': zh_tw,
+  'ja-JP': ja_jp
+};
\ No newline at end of file
diff --git a/packages/editor/src/config/locale/ja-JP.js b/packages/editor/src/config/locale/ja-JP.js
new file mode 100644
index 000000000..7c645e42f
--- /dev/null
+++ b/packages/editor/src/config/locale/ja-JP.js
@@ -0,0 +1 @@
+export default {};
\ No newline at end of file
diff --git a/packages/editor/src/config/locale/zh-CN.js b/packages/editor/src/config/locale/zh-CN.js
new file mode 100644
index 000000000..7c645e42f
--- /dev/null
+++ b/packages/editor/src/config/locale/zh-CN.js
@@ -0,0 +1 @@
+export default {};
\ No newline at end of file
diff --git a/packages/editor/src/config/locale/zh-TW.js b/packages/editor/src/config/locale/zh-TW.js
new file mode 100644
index 000000000..7c645e42f
--- /dev/null
+++ b/packages/editor/src/config/locale/zh-TW.js
@@ -0,0 +1 @@
+export default {};
\ No newline at end of file
diff --git a/packages/editor/src/config/skeleton.js b/packages/editor/src/config/skeleton.js
new file mode 100644
index 000000000..3b3841521
--- /dev/null
+++ b/packages/editor/src/config/skeleton.js
@@ -0,0 +1,435 @@
+export default {
+  "skeleton": {
+    "config": {
+     "package": "@ali/lowcode-skeleton",
+     "version": "0.0.1" 
+    },
+  },
+  "theme": {
+    "fusion": {
+      "package": "@alife/dpl-iceluna",
+      "version": "^2.3.0"
+    },
+    "scss": ""
+  },
+  "constants": {
+    "namespace": "page"
+  },
+  "utils": [],
+  "plugins": {
+    "topArea": [{
+      "pluginKey": "logo",
+      "type": "Custom",
+      "props": {
+        "width": 110,
+        "align": "left"
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-logo",
+        "version": "^1.0.2"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "divider",
+      "type": "Divider",
+      "props": {
+        "align": "left"
+      }
+    }, {
+      "pluginKey": "pageList",
+      "type": "Custom",
+      "props": {
+        "align": "left",
+        "width": 360
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-page-list",
+        "version": "^1.0.11"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "partner",
+      "type": "Custom",
+      "props": {
+        "align": "right",
+        "width": 200
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-partner",
+        "version": "^1.0.3"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "divider",
+      "type": "Divider",
+      "props": {
+        "align": "right"
+      }
+    }, {
+      "pluginKey": "designMode",
+      "type": "Custom",
+      "props": {
+        "align": "right",
+        "width": 144
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-design-mode",
+        "version": "^1.0.3"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "divider",
+      "type": "Divider",
+      "props": {
+        "align": "right"
+      }
+    }, {
+      "pluginKey": "undoRedo",
+      "type": "Custom",
+      "props": {
+        "align": "right",
+        "width": 88
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-undo-redo",
+        "version": "^1.0.3"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "d2c",
+      "type": "Custom",
+      "props": {
+        "align": "right",
+        "width": 44
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-d2c",
+        "version": "^1.0.1"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "history",
+      "type": "DialogIcon",
+      "props": {
+        "align": "right",
+        "icon": "lishijilu1",
+        "title": "历史",
+        "dialogProps": {
+          "title": "历史记录",
+          "footer": false,
+          "shouldUpdatePosition": true
+        }
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-history",
+        "version": "^1.0.3"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "refresh",
+      "type": "Icon",
+      "props": {
+        "align": "right",
+        "icon": "shuaxin",
+        "title": "刷新",
+        "onClick": function(appHelper) {
+          appHelper.emit('ide.reset');
+        }
+      }
+    }, {
+      "pluginKey": "divider",
+      "type": "Divider",
+      "props": {
+        "align": "right"
+      }
+    }, {
+      "pluginKey": "save",
+      "type": "Custom",
+      "props": {
+        "align": "right",
+        "width": 86
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-save",
+        "version": "^1.0.3"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "preview",
+      "type": "Custom",
+      "props": {
+        "align": "right",
+        "width": 86
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-preview",
+        "version": "^1.0.1"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "publish",
+      "type": "Custom",
+      "props": {
+        "align": "right",
+        "width": 104
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-publish",
+        "version": "^1.0.1"
+      },
+      "pluginProps": {}
+    }],
+    "leftArea": [{
+      "pluginKey": "componentTree",
+      "type": "PanelIcon",
+      "props": {
+        "align": "top",
+        "icon": "shuxingkongjian",
+        "title": "组件树",
+        "panelProps": {
+          "minWidth": 100,
+          "maxWidth": 500
+        }
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-component-tree",
+        "version": "^1.0.5"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "componentList",
+      "type": "PanelIcon",
+      "props": {
+        "align": "top",
+        "icon": "zujianku",
+        "title": "组件库"
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-component-list",
+        "version": "^1.0.4"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "blockList",
+      "type": "PanelIcon",
+      "props": {
+        "align": "top",
+        "icon": "jihe",
+        "title": "区块库"
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-block-list",
+        "version": "^1.0.2"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "schema",
+      "type": "PanelIcon",
+      "props": {
+        "align": "bottom",
+        "icon": "ceshi",
+        "title": "schema 源码开发",
+        "panelProps": {
+          "defaultWidth": 480
+        }
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-schema",
+        "version": "^1.0.3"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "style",
+      "type": "PanelIcon",
+      "props": {
+        "align": "bottom",
+        "icon": "SCSS",
+        "title": "scss 全局样式设置",
+        "panelProps": {
+          "defaultWidth": 480
+        }
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-style",
+        "version": "^1.0.2"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "utils",
+      "type": "PanelIcon",
+      "props": {
+        "align": "bottom",
+        "icon": "funcsgaiban",
+        "title": "utils 全局公共函数设置",
+        "panelProps": {
+          "defaultWidth": 540
+        }
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-utils",
+        "version": "^1.0.7"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "constants",
+      "type": "PanelIcon",
+      "props": {
+        "align": "bottom",
+        "icon": "constgaiban",
+        "title": "constants 全局常量设置",
+        "panelProps": {
+          "defaultWidth": 480
+        }
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-constants",
+        "version": "^1.0.3"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "package",
+      "type": "PanelIcon",
+      "props": {
+        "align": "bottom",
+        "icon": "packagegaiban",
+        "title": "package.json 应用设置",
+        "panelProps": {
+          "defaultWidth": 480
+        }
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-package",
+        "version": "^1.0.2"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "canvasSetting",
+      "type": "PanelIcon",
+      "props": {
+        "align": "bottom",
+        "icon": "huabushezhi",
+        "title": "canvas 画布配置",
+        "panelProps": {
+          "defaultWidth": 300
+        }
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-canvas-setting",
+        "version": "^1.0.2"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "issue",
+      "type": "LinkIcon",
+      "props": {
+        "align": "bottom",
+        "icon": "chongzi",
+        "title": "issue 问题反馈",
+        "linkProps": {
+          "href": "//work.aone.alibaba-inc.com/project/860698/issue/new",
+          "target": "blank"
+        }
+      }
+    }, {
+      "pluginKey": "document",
+      "type": "LinkIcon",
+      "props": {
+        "align": "bottom",
+        "icon": "wendangzhongxin",
+        "title": "docs 文档中心",
+        "linkProps": {
+          "href": "https://iceluna.alibaba-inc.com/#/document",
+          "target": "blank"
+        }
+      }
+    }],
+    "rightArea": [{
+      "pluginKey": "componentStyle",
+      "props": {
+        "title": "样式"
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-component-style",
+        "version": "^1.0.8"
+      }
+    }, {
+      "pluginKey": "componentAttr",
+      "props": {
+        "title": "属性"
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-component-attr",
+        "version": "^1.0.3"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "componentEvent",
+      "props": {
+        "title": "事件"
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-component-event",
+        "version": "^1.0.4"
+      },
+      "pluginProps": {}
+    }, {
+      "pluginKey": "componentData",
+      "props": {
+        "title": "数据"
+      },
+      "config": {
+        "package": "@ali/iceluna-addon-component-data",
+        "version": "^1.0.3"
+      },
+      "pluginProps": {}
+    }],
+    "centerArea": [{
+      "pluginKey": "canvas",
+      "config": {
+        "package": "@ali/iceluna-addon-canvas",
+        "version": "^1.0.8"
+      }
+    }, {
+      "pluginKey": "guide",
+      "config": {
+        "package": "@ali/iceluna-addon-guide",
+        "version": "^1.0.1"
+      }
+    }]
+  },
+  "hooks": [{
+    "message": "wsHelper.result.updateInfo",
+    "type": "on",
+    "handler": function(appHelper, data) {
+      const pageInfo = appHelper.pageInfo;
+      if (data && data.code > 0 && pageInfo) {
+        const {
+          clientLocks,
+          entityLocks,
+          entityUsers,
+          entityPubInfo
+        } = data.data;
+        if (JSON.stringify(clientLocks || {}) !== JSON.stringify(appHelper.clientLocks || {})) {
+          clientLocks.schema = clientLocks[pageInfo.id];
+          appHelper.set('clientLocks', clientLocks);
+          appHelper.emit('wsHelper.update.clientLocks', clientLocks);
+        }
+        if (JSON.stringify(entityLocks || {}) !== JSON.stringify(appHelper.entityLocks || {})) {
+          entityLocks.schema = entityLocks[pageInfo.id];
+          appHelper.set('entityLocks', entityLocks);
+          appHelper.emit('wsHelper.update.entityLocks', entityLocks);
+        }
+        if (JSON.stringify(entityUsers || {}) !== JSON.stringify(appHelper.entityUsers || {})) {
+          appHelper.set('entityUsers', entityUsers);
+          appHelper.emit('wsHelper.update.entityUsers', entityUsers);
+        }
+        if (JSON.stringify(entityPubInfo || {}) !== JSON.stringify(appHelper.entityPubInfo || {})) {
+          appHelper.set('entityPubInfo', entityPubInfo);
+          appHelper.emit('wsHelper.update.entityPubInfo', entityPubInfo);
+        }
+      }
+    }
+  }],
+  "shortCuts": [],
+  "lifeCycles": {}
+};
\ No newline at end of file
diff --git a/packages/editor/src/config/theme.scss b/packages/editor/src/config/theme.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor/src/config/utils.js b/packages/editor/src/config/utils.js
new file mode 100644
index 000000000..dd651ca49
--- /dev/null
+++ b/packages/editor/src/config/utils.js
@@ -0,0 +1,3 @@
+export default {
+
+};
\ No newline at end of file
diff --git a/packages/editor/src/global.scss b/packages/editor/src/global.scss
new file mode 100644
index 000000000..e827d91b7
--- /dev/null
+++ b/packages/editor/src/global.scss
@@ -0,0 +1,8 @@
+body {
+  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light,
+    Microsoft YaHei;
+  font-size: 12px;
+  * {
+    box-sizing: border-box;
+  }
+}
\ No newline at end of file
diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx
new file mode 100644
index 000000000..f4b8bc855
--- /dev/null
+++ b/packages/editor/src/index.tsx
@@ -0,0 +1,42 @@
+import ReactDOM from 'react-dom';
+import { HashRouter as Router, Route } from 'react-router-dom';
+import Skeleton from '@ali/lowcode-engine-skeleton';
+
+import config from './config/skeleton';
+import components from './config/components';
+import componentsMap from './config/componentsMap';
+import utils from './config/utils';
+import constants from './config/constants';
+import messages from './config/locale';
+
+import pkg from '../package.json';
+import './global.scss';
+import './config/theme.scss';
+
+window.__pkg = pkg;
+
+const ICE_CONTAINER = document.getElementById('ice-container');
+
+if (!ICE_CONTAINER) {
+  throw new Error('当前页面不存在 <div id="ice-container"></div> 节点.');
+}
+
+ReactDOM.render(
+  <Router>
+    <Route
+      path="/*"
+      component={props => {
+        return (
+          <Skeleton
+            {...props}
+            {...(config.skeleton && config.skeleton.props)}
+            config={config}
+            utils={utils}
+            messages={messages}
+            constants={constants}
+            pluginComponents={components}
+          />
+        );
+      }}
+    />
+  </Router>, ICE_CONTAINER);
diff --git a/packages/editor/tests/index.js b/packages/editor/tests/index.js
new file mode 100644
index 000000000..346e384d2
--- /dev/null
+++ b/packages/editor/tests/index.js
@@ -0,0 +1 @@
+// test file
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
new file mode 100644
index 000000000..3f5e62810
--- /dev/null
+++ b/packages/editor/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/*"],
+  "exclude": ["node_modules", "build", "public"]
+}