diff --git a/packages/editor/README.md b/packages/editor/README.md
new file mode 100644
index 00000000..b8d99575
--- /dev/null
+++ b/packages/editor/README.md
@@ -0,0 +1,11 @@
+# `editor`
+
+> TODO: description
+
+## Usage
+
+```
+const editor = require('editor');
+
+// TODO: DEMONSTRATE API
+```
diff --git a/packages/editor/__tests__/editor.test.js b/packages/editor/__tests__/editor.test.js
new file mode 100644
index 00000000..0f51416c
--- /dev/null
+++ b/packages/editor/__tests__/editor.test.js
@@ -0,0 +1,7 @@
+'use strict';
+
+const editor = require('..');
+
+describe('editor', () => {
+  it('needs tests');
+});
diff --git a/packages/editor/babel.config.js b/packages/editor/babel.config.js
new file mode 100644
index 00000000..be22fda2
--- /dev/null
+++ b/packages/editor/babel.config.js
@@ -0,0 +1,7 @@
+// only for jest
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+};
diff --git a/packages/editor/jest.config.js b/packages/editor/jest.config.js
new file mode 100644
index 00000000..35fcb1b3
--- /dev/null
+++ b/packages/editor/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  ...require("../../config/jest.config"),
+};
diff --git a/packages/editor/package.json b/packages/editor/package.json
new file mode 100644
index 00000000..2db19f4e
--- /dev/null
+++ b/packages/editor/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "editor",
+  "version": "0.0.0",
+  "description": "meta-ui editor",
+  "author": "Bowen Tan <bowen.tan@smartx.com>",
+  "homepage": "https://github.com/webzard-io/meta-ui#readme",
+  "license": "MIT",
+  "main": "src/main.tsx",
+  "scripts": {
+    "dev": "vite",
+    "test": "jest"
+  },
+  "publishConfig": {
+    "registry": "http://192.168.26.29:7001"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webzard-io/meta-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/webzard-io/meta-ui/issues"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^1.6.8",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "typescript": "^4.4.3",
+    "vite": "^2.5.10",
+    "vite-tsconfig-paths": "^3.3.14",
+    "babel-jest": "^27.2.1",
+    "jest": "^27.2.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,html}": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ]
+  }
+}
diff --git a/packages/editor/src/main.tsx b/packages/editor/src/main.tsx
new file mode 100644
index 00000000..23e77a36
--- /dev/null
+++ b/packages/editor/src/main.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export default function renderApp() {
+  ReactDOM.render(
+    <React.StrictMode>
+      <div>Hello, editor</div>
+    </React.StrictMode>,
+    document.getElementById('root')
+  );
+}
+
+renderApp();
diff --git a/packages/editor/src/vite-env.d.ts b/packages/editor/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/packages/editor/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
new file mode 100644
index 00000000..0c59dc71
--- /dev/null
+++ b/packages/editor/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "types": ["@emotion/react/types/css-prop"],
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@traits/*": ["src/traits/*"],
+      "@types/*": ["src/types/*"],
+      "@utils/*": ["src/utils/*"],
+    },
+  },
+  "include": ["./src"]
+}
diff --git a/packages/editor/vite.config.ts b/packages/editor/vite.config.ts
new file mode 100644
index 00000000..543c6e57
--- /dev/null
+++ b/packages/editor/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import reactRefresh from '@vitejs/plugin-react-refresh';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [reactRefresh(), tsconfigPaths()],
+  define: {
+    // https://github.com/satya164/react-simple-code-editor/issues/86
+    global: 'globalThis',
+  },
+  esbuild: {
+    // https://dev.to/ajitsinghkamal/using-emotionjs-with-vite-2ndj
+    jsxFactory: 'jsx',
+    jsxInject: 'import { jsx } from "@emotion/react"',
+  },
+});