diff --git a/doric-cli/contents/$.ts b/doric-cli/contents/$.ts
index a366fa6b..0d63958d 100644
--- a/doric-cli/contents/$.ts
+++ b/doric-cli/contents/$.ts
@@ -1,67 +1,40 @@
-import { ViewHolder, VMPanel, ViewModel, Gravity, Text, VLayout, Group } from "doric"
-
-
-interface CountModel {
-    count: number
-}
-
-class CounterView extends ViewHolder {
-    number = new Text
-    counter = new Text
-    build(root: Group) {
-        const vlayout = new VLayout
-        vlayout.width = 200
-        vlayout.height = 200
-        vlayout.gravity = new Gravity().center()
-        this.number.textSize = 40
-        this.number.layoutConfig = {
-            alignment: new Gravity().center()
-        }
-        this.counter = new Text
-        this.counter.text = "Click to count"
-        this.counter.textSize = 20
-        vlayout.space = 20
-        vlayout.layoutConfig = {
-            alignment: new Gravity().center()
-        }
-        vlayout.addChild(this.number)
-        vlayout.addChild(this.counter)
-        root.addChild(vlayout)
-    }
-
-    setNumber(n: number) {
-        this.number.text = n.toString()
-    }
-
-    setCounter(v: Function) {
-        this.counter.onClick = v
-    }
-}
-
-class CounterVM extends ViewModel<CountModel, CounterView> {
-
-    binding(v: CounterView, model: CountModel): void {
-        v.setNumber(model.count)
-        v.setCounter(() => {
-            this.getModel().count++
-        })
-    }
-}
+import { Panel, Group, vlayout, layoutConfig, Gravity, IVLayout, text, Text, Color } from "doric";
 
 @Entry
-class __$__ extends VMPanel<CountModel, CounterView>{
-
-    getVMClass() {
-        return CounterVM
+class __$__ extends Panel {
+    build(rootView: Group): void {
+        let number: Text
+        let count = 0
+        vlayout([
+            number = text({
+                textSize: 40,
+                text: '0',
+            }),
+            text({
+                text: "Click to count",
+                textSize: 20,
+                bgColor: Color.parse('#70a1ff'),
+                textColor: Color.WHITE,
+                onClick: () => {
+                    number.text = `${++count}`
+                },
+                layoutConfig: layoutConfig().exactly(),
+                width: 100,
+                height: 50,
+            }),
+        ])
+            .apply({
+                layoutConfig: layoutConfig().exactly().a(Gravity.Center),
+                width: 200,
+                height: 200,
+                space: 20,
+                border: {
+                    color: Color.BLUE,
+                    width: 1,
+                },
+                gravity: Gravity.Center,
+            } as IVLayout)
+            .in(rootView)
     }
 
-    getModel() {
-        return {
-            count: 0
-        }
-    }
-
-    getViewHolder() {
-        return new CounterView
-    }
 }
\ No newline at end of file
diff --git a/doric-cli/contents/_launch.json b/doric-cli/contents/_launch.json
new file mode 100644
index 00000000..39c84064
--- /dev/null
+++ b/doric-cli/contents/_launch.json
@@ -0,0 +1,24 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug TS",
+            "program": "${workspaceFolder}/${relativeFile}",
+            "preLaunchTask": "Doric Build",
+            "sourceMaps": true,
+            "serverReadyAction": {
+                "pattern": "listening on port ([0-9]+)",
+                "uriFormat": "http://localhost:%s",
+                "action": "openExternally"
+            },
+            "outFiles": [
+                "${workspaceFolder}/bundle/**/*.js"
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/doric-cli/contents/_package.json b/doric-cli/contents/_package.json
index 61768afc..d8812de4 100644
--- a/doric-cli/contents/_package.json
+++ b/doric-cli/contents/_package.json
@@ -10,7 +10,7 @@
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "doric": "file:../js-framework",
+        "doric": "0.1.0",
         "reflect-metadata": "^0.1.13",
         "rollup": "^1.17.0",
         "rollup-plugin-commonjs": "^10.0.1",
diff --git a/doric-cli/contents/_tasks.json b/doric-cli/contents/_tasks.json
new file mode 100644
index 00000000..d51f6710
--- /dev/null
+++ b/doric-cli/contents/_tasks.json
@@ -0,0 +1,28 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Doric Build",
+            "type": "shell",
+            "command": "doric build",
+            "group": "build",
+            "problemMatcher": []
+        },
+        {
+            "label": "Doric Clean",
+            "type": "shell",
+            "command": "doric clean",
+            "group": "build",
+            "problemMatcher": []
+        },
+        {
+            "label": "Doric Dev",
+            "type": "shell",
+            "command": "doric dev",
+            "group": "build",
+            "problemMatcher": []
+        }
+    ]
+}
\ No newline at end of file
diff --git a/doric-cli/contents/_tsconfig.json b/doric-cli/contents/_tsconfig.json
index 4d880db4..8a7c268d 100644
--- a/doric-cli/contents/_tsconfig.json
+++ b/doric-cli/contents/_tsconfig.json
@@ -4,7 +4,7 @@
     // "incremental": true,                   /* Enable incremental compilation */
     "target": "ES2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
     "module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    "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'. */
diff --git a/doric-cli/package.json b/doric-cli/package.json
index fe59a82e..0c9d6256 100644
--- a/doric-cli/package.json
+++ b/doric-cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "doric-cli",
-  "version": "1.0.0",
-  "description": "Doric tools",
+  "version": "0.1.0",
+  "description": "Doric command line tools",
   "main": "index.js",
   "bin": {
     "doric": "index.js"
@@ -31,4 +31,4 @@
     "source-map-merger": "^0.2.0",
     "typescript": "^3.7.2"
   }
-}
+}
\ No newline at end of file
diff --git a/doric-cli/scripts/init.js b/doric-cli/scripts/init.js
index 20c1138d..2c8b2bbd 100644
--- a/doric-cli/scripts/init.js
+++ b/doric-cli/scripts/init.js
@@ -15,6 +15,9 @@ module.exports = function (name) {
         fs.writeFileSync(`${name}/tsconfig.json`, fs.readFileSync(`${__dirname}/../contents/_tsconfig.json`))
         fs.writeFileSync(`${name}/rollup.config.js`, fs.readFileSync(`${__dirname}/../contents/_rollup.config.js`))
         fs.writeFileSync(`${name}/.gitignore`, fs.readFileSync(`${__dirname}/../contents/_gitignore`))
+        fs.mkdirSync(`${name}/.vscode`)
+        fs.writeFileSync(`${name}/.vscode/launch.json`, fs.readFileSync(`${__dirname}/../contents/_launch.json`).toString().replace(/__\$__/g, name))
+        fs.writeFileSync(`${name}/.vscode/tasks.json`, fs.readFileSync(`${__dirname}/../contents/_tasks.json`).toString().replace(/__\$__/g, name))
         fs.mkdirSync(`${name}/src`)
         fs.writeFileSync(`${name}/src/${name}.ts`, fs.readFileSync(`${__dirname}/../contents/$.ts`).toString().replace(/__\$__/g, name))
         fs.writeFileSync(`${name}/index.ts`, `export default ['src/${name}']`)