diff --git a/js-framework/package.json b/js-framework/package.json
index 5211f3a3..08448252 100644
--- a/js-framework/package.json
+++ b/js-framework/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "hego-jsframework",
+  "name": "hego-js-framework",
   "version": "0.1.0",
   "description": "The JS Framework of Hego",
   "main": "index.js",
@@ -8,8 +8,8 @@
     "dev": "tsc -p .&& node ./build/index.js"
   },
   "repository": {
-    "type": "git",
-    "url": "git+https://github.com/penfeizhou/hego.git"
+    "type": "https",
+    "url": "https://github.com/penfeizhou/hego.git"
   },
   "author": "pengfeizhou",
   "license": "Apache-2.0",
diff --git a/js-framework/src/mock/driver.ts b/js-framework/src/mock/driver.ts
new file mode 100644
index 00000000..7656ac55
--- /dev/null
+++ b/js-framework/src/mock/driver.ts
@@ -0,0 +1,23 @@
+import { Page } from '../ui/page'
+import { View } from '../ui/view'
+
+export interface Driver {
+    /**
+     * Create and destory page
+     */
+    createPage(): Page
+    destoryPage(): Page
+
+    /**
+     * Page lifecycle
+     */
+    dispatchOnCreate(): void
+    dispatchOnDestory(): void
+    dispatchOnShow(): void
+    dispatchOnHidden(): void
+
+    /**
+     * Page render
+     */
+    dispatchBuild(): View
+}
\ No newline at end of file
diff --git a/js-framework/src/ui/page.js b/js-framework/src/ui/page.js
deleted file mode 100644
index 070534a9..00000000
--- a/js-framework/src/ui/page.js
+++ /dev/null
@@ -1,30 +0,0 @@
-"use strict";
-exports.__esModule = true;
-var Page = /** @class */ (function () {
-    function Page() {
-    }
-    Page.prototype.onCreate = function () { };
-    Page.prototype.onDestory = function () { };
-    Page.prototype.onShow = function () { };
-    Page.prototype.onHidden = function () { };
-    /**
-     * Native Call
-     */
-    Page.prototype.__onCreate__ = function () {
-        this.onCreate();
-    };
-    Page.prototype.__onDestory__ = function () {
-        this.onDestory();
-    };
-    Page.prototype.__onShow__ = function () {
-        this.onShow();
-    };
-    Page.prototype.__onHidden__ = function () {
-        this.onHidden();
-    };
-    Page.prototype.__build__ = function () {
-        return this.build();
-    };
-    return Page;
-}());
-exports.Page = Page;
diff --git a/js-framework/src/ui/state.js b/js-framework/src/ui/state.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/js-framework/src/ui/view.js b/js-framework/src/ui/view.js
deleted file mode 100644
index 00ca9ae9..00000000
--- a/js-framework/src/ui/view.js
+++ /dev/null
@@ -1,251 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-exports.__esModule = true;
-require("reflect-metadata");
-function Property(target, propKey) {
-    Reflect.defineMetadata(propKey, true, target);
-}
-exports.Property = Property;
-var View = /** @class */ (function () {
-    function View() {
-        var _this = this;
-        this.width = 0;
-        this.height = 0;
-        this.x = 0;
-        this.y = 0;
-        /** Anchor end*/
-        this.__dirty_props__ = {};
-        return new Proxy(this, {
-            get: function (target, p) {
-                return Reflect.get(target, p);
-            },
-            set: function (target, p, v) {
-                var oldV = Reflect.get(target, p);
-                var ret = Reflect.set(target, p, v);
-                if (Reflect.getMetadata(p, target)) {
-                    _this.onPropertyChanged(p.toString(), oldV, v);
-                }
-                return ret;
-            }
-        });
-    }
-    Object.defineProperty(View.prototype, "left", {
-        /** Anchor start*/
-        get: function () {
-            return this.x;
-        },
-        set: function (v) {
-            this.x = v;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(View.prototype, "right", {
-        get: function () {
-            return this.x + this.width;
-        },
-        set: function (v) {
-            this.x = v - this.width;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(View.prototype, "top", {
-        get: function () {
-            return this.y;
-        },
-        set: function (v) {
-            this.y = v;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(View.prototype, "bottom", {
-        get: function () {
-            return this.y + this.height;
-        },
-        set: function (v) {
-            this.y = v - this.height;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    View.prototype.onPropertyChanged = function (propKey, oldV, newV) {
-        if (newV instanceof Object
-            && Reflect.has(newV, 'toModel')
-            && Reflect.get(newV, 'toModel') instanceof Function) {
-            newV = Reflect.apply(Reflect.get(newV, 'toModel'), newV, []);
-        }
-        this.__dirty_props__[propKey] = newV;
-    };
-    View.prototype.toModel = function () {
-        return this.__dirty_props__ || {};
-    };
-    __decorate([
-        Property
-    ], View.prototype, "width");
-    __decorate([
-        Property
-    ], View.prototype, "height");
-    __decorate([
-        Property
-    ], View.prototype, "x");
-    __decorate([
-        Property
-    ], View.prototype, "y");
-    __decorate([
-        Property
-    ], View.prototype, "bgColor");
-    __decorate([
-        Property
-    ], View.prototype, "corners");
-    __decorate([
-        Property
-    ], View.prototype, "border");
-    __decorate([
-        Property
-    ], View.prototype, "shadow");
-    __decorate([
-        Property
-    ], View.prototype, "alpha");
-    __decorate([
-        Property
-    ], View.prototype, "padding");
-    __decorate([
-        Property
-    ], View.prototype, "config");
-    return View;
-}());
-exports.View = View;
-var Alignment;
-(function (Alignment) {
-    Alignment[Alignment["center"] = 0] = "center";
-    Alignment[Alignment["start"] = 1] = "start";
-    Alignment[Alignment["end"] = 2] = "end";
-})(Alignment = exports.Alignment || (exports.Alignment = {}));
-var Gravity;
-(function (Gravity) {
-    Gravity[Gravity["center"] = 0] = "center";
-    Gravity[Gravity["left"] = 1] = "left";
-    Gravity[Gravity["right"] = 2] = "right";
-    Gravity[Gravity["top"] = 3] = "top";
-    Gravity[Gravity["bottom"] = 4] = "bottom";
-})(Gravity = exports.Gravity || (exports.Gravity = {}));
-var Group = /** @class */ (function (_super) {
-    __extends(Group, _super);
-    function Group() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.children = [];
-        return _this;
-    }
-    __decorate([
-        Property
-    ], Group.prototype, "children");
-    return Group;
-}(View));
-exports.Group = Group;
-var Stack = /** @class */ (function (_super) {
-    __extends(Stack, _super);
-    function Stack() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate([
-        Property
-    ], Stack.prototype, "gravity");
-    return Stack;
-}(Group));
-exports.Stack = Stack;
-var LinearLayout = /** @class */ (function (_super) {
-    __extends(LinearLayout, _super);
-    function LinearLayout() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate([
-        Property
-    ], LinearLayout.prototype, "space");
-    __decorate([
-        Property
-    ], LinearLayout.prototype, "gravity");
-    return LinearLayout;
-}(Group));
-var VLayout = /** @class */ (function (_super) {
-    __extends(VLayout, _super);
-    function VLayout() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return VLayout;
-}(LinearLayout));
-exports.VLayout = VLayout;
-var HLayout = /** @class */ (function (_super) {
-    __extends(HLayout, _super);
-    function HLayout() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return HLayout;
-}(LinearLayout));
-exports.HLayout = HLayout;
-var Text = /** @class */ (function (_super) {
-    __extends(Text, _super);
-    function Text() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate([
-        Property
-    ], Text.prototype, "text");
-    __decorate([
-        Property
-    ], Text.prototype, "textColor");
-    __decorate([
-        Property
-    ], Text.prototype, "textSize");
-    __decorate([
-        Property
-    ], Text.prototype, "maxLines");
-    return Text;
-}(View));
-exports.Text = Text;
-var Image = /** @class */ (function (_super) {
-    __extends(Image, _super);
-    function Image() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate([
-        Property
-    ], Image.prototype, "imageUrl");
-    return Image;
-}(View));
-exports.Image = Image;
-var List = /** @class */ (function (_super) {
-    __extends(List, _super);
-    function List() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return List;
-}(View));
-exports.List = List;
-var Slide = /** @class */ (function (_super) {
-    __extends(Slide, _super);
-    function Slide() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return Slide;
-}(View));
-exports.Slide = Slide;
diff --git a/js-framework/src/util/color.js b/js-framework/src/util/color.js
deleted file mode 100644
index 462f95d0..00000000
--- a/js-framework/src/util/color.js
+++ /dev/null
@@ -1,63 +0,0 @@
-"use strict";
-exports.__esModule = true;
-/**
- *  Store color as format AARRGGBB or RRGGBB
- */
-var Color = /** @class */ (function () {
-    function Color(v) {
-        this._value = 0;
-        this._value = v;
-    }
-    Color.parse = function (str) {
-        if (!str.startsWith("#")) {
-            throw new Error("Parse color error with " + str);
-        }
-        var val = parseInt(str.substr(1), 16);
-        if (str.length === 7) {
-            return new Color(val | 0xff000000);
-        }
-        else if (str.length === 9) {
-            return new Color(val);
-        }
-        else {
-            throw new Error("Parse color error with " + str);
-        }
-    };
-    Color.safeParse = function (str, defVal) {
-        if (defVal === void 0) { defVal = Color.TRANSPARENT; }
-        var color = defVal;
-        try {
-            color = Color.parse(str);
-        }
-        catch (e) {
-        }
-        finally {
-            return color;
-        }
-    };
-    Color.prototype.toModel = function () {
-        return this._value;
-    };
-    Color.TRANSPARENT = new Color(0);
-    return Color;
-}());
-exports.Color = Color;
-var GradientOrientation;
-(function (GradientOrientation) {
-    /** draw the gradient from the top to the bottom */
-    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
-    /** draw the gradient from the top-right to the bottom-left */
-    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
-    /** draw the gradient from the right to the left */
-    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
-    /** draw the gradient from the bottom-right to the top-left */
-    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
-    /** draw the gradient from the bottom to the top */
-    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
-    /** draw the gradient from the bottom-left to the top-right */
-    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
-    /** draw the gradient from the left to the right */
-    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
-    /** draw the gradient from the top-left to the bottom-right */
-    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
-})(GradientOrientation = exports.GradientOrientation || (exports.GradientOrientation = {}));
diff --git a/js-framework/src/util/types.js b/js-framework/src/util/types.js
deleted file mode 100644
index 0e345787..00000000
--- a/js-framework/src/util/types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-"use strict";
-exports.__esModule = true;
diff --git a/js-framework/src/util/uniqueId.js b/js-framework/src/util/uniqueId.js
deleted file mode 100644
index c807ef45..00000000
--- a/js-framework/src/util/uniqueId.js
+++ /dev/null
@@ -1,7 +0,0 @@
-"use strict";
-exports.__esModule = true;
-var __uniqueId__ = 0;
-function uniqueId() {
-    return "__unique_" + __uniqueId__++ + "__";
-}
-exports.uniqueId = uniqueId;
diff --git a/js-runtime/.gitignore b/js-runtime/.gitignore
new file mode 100644
index 00000000..40b878db
--- /dev/null
+++ b/js-runtime/.gitignore
@@ -0,0 +1 @@
+node_modules/
\ No newline at end of file
diff --git a/js-runtime/package.json b/js-runtime/package.json
new file mode 100644
index 00000000..0bf30ce3
--- /dev/null
+++ b/js-runtime/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "hego-js-runtime",
+  "version": "0.1.0",
+  "description": "The JS Runtime of Hego",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "tsc -p .&& node ./build/index.js"
+  },
+  "repository": {
+    "type": "https",
+    "url": "https://github.com/penfeizhou/hego.git"
+  },
+  "author": "pengfeizhou",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/penfeizhou/hego/issues"
+  },
+  "homepage": "https://github.com/penfeizhou/hego#readme",
+  "dependencies": {
+    "reflect-metadata": "^0.1.13"
+  }
+}
\ No newline at end of file
diff --git a/js-runtime/src/sandbox.ts b/js-runtime/src/sandbox.ts
new file mode 100644
index 00000000..c6b19b7c
--- /dev/null
+++ b/js-runtime/src/sandbox.ts
@@ -0,0 +1,62 @@
+/**
+ * ``` TypeScript
+ * // run in global scope
+ * Reflect.apply(
+ * function(hego,context,require){
+ *  //Script content
+ *  REG()
+ * },hego.obtainContext(id),[
+ * undefined,
+ * hego.obtainContext(id),
+ * hego.__require__,
+ * ])
+ * 
+ * Reflect.apply(hego.registerModule,this,[
+ *  moduleName,
+ *  Reflect.apply(function(__module){
+ *          return function(module,export,require){
+ *                  })(__module,__module.exports,hego.__require__)
+ *      },this,[{exports:{}}])
+ * ])
+ * 
+ * ```
+ */
+
+export interface Context {
+    id: number
+    asyncCall(module: string, method: string, args: any, callbackId: string): any
+}
+
+const gContexts = new Map
+const gModules = new Map
+
+export function obtainContext(id: string) {
+    if (gContexts.has(id)) {
+        return gContexts.get(id)
+    } else {
+        const context = { id }
+        gContexts.set(id, context)
+        return context
+    }
+}
+
+export function releaseContext(id: string) {
+    gContexts.delete(id)
+}
+
+declare function nativeRequire(name: string): boolean
+
+export function __require__(name: string): any {
+    if (gModules.has(name)) {
+        return gModules.get(name)
+    } else {
+        if (nativeRequire(name)) {
+            return gModules.get(name)
+        } else {
+            return undefined
+        }
+    }
+}
+export function registerModule(name: string, moduleObject: any) {
+    gModules.set(name, moduleObject)
+}
\ No newline at end of file
diff --git a/js-runtime/tsconfig.json b/js-runtime/tsconfig.json
new file mode 100644
index 00000000..c3efcf59
--- /dev/null
+++ b/js-runtime/tsconfig.json
@@ -0,0 +1,62 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "ES2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
+    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "build/", /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    /* Strict Type-Checking Options */
+    "strict": true, /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    /* Module Resolution Options */
+    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */
+  },
+  "include": [
+    "**/*.ts",
+  ]
+}
\ No newline at end of file