diff --git a/lerna.json b/lerna.json
index 9ec535c..0d60e43 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,6 +3,7 @@
     "packages/types",
     "packages/util",
     "packages/board",
+    "packages/renderer",
     "packages/core",
     "packages/idraw"
   ],
diff --git a/package.json b/package.json
index fda893a..4915fe7 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,9 @@
     "dev": "node ./scripts/dev.js",
     "dev:board": "node ./scripts/dev.js board",
     "dev:core": "node ./scripts/dev.js core",
-    "build": "NODE_ENV=production node ./scripts/build.js",
+    "build": "npm run build:src && npm run build:min",
+    "build:src": "NODE_ENV=production BUILD_MODE=reset node ./scripts/build.js",
+    "build:min": "NODE_ENV=production BUILD_MODE=mini node ./scripts/build.js",
     "snapshot": "node ./scripts/build.js && node ./scripts/snapshot.js",
     "e2e": "mocha --exit ./__tests__/e2e.test.js",
     "init": "lerna bootstrap",
diff --git a/packages/renderer/README.md b/packages/renderer/README.md
new file mode 100644
index 0000000..6582554
--- /dev/null
+++ b/packages/renderer/README.md
@@ -0,0 +1,3 @@
+# @idraw/renderer
+
+[![Node.js CI](https://github.com/idrawjs/idraw/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/idrawjs/idraw/actions/workflows/node.js.yml)
\ No newline at end of file
diff --git a/packages/renderer/api-extractor.json b/packages/renderer/api-extractor.json
new file mode 100644
index 0000000..7ae8eca
--- /dev/null
+++ b/packages/renderer/api-extractor.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../api-extractor.json",
+  "mainEntryPointFilePath": "./dist/packages/<unscopedPackageName>/src/index.d.ts",
+  "dtsRollup": {
+    "publicTrimmedFilePath": "./dist/index.d.ts"
+  }
+}
\ No newline at end of file
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
new file mode 100644
index 0000000..2d159fe
--- /dev/null
+++ b/packages/renderer/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@idraw/renderer",
+  "version": "0.2.0-alpha.16",
+  "description": "",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "unpkg": "dist/index.global.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/idrawjs/idraw.git"
+  },
+  "bugs": {
+    "url": "https://github.com/idrawjs/idraw/issues"
+  },
+  "homepage": "https://github.com/idrawjs/idraw#readme",
+  "author": "chenshenhai",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/renderer/src/index.ts b/packages/renderer/src/index.ts
new file mode 100644
index 0000000..dfad7b8
--- /dev/null
+++ b/packages/renderer/src/index.ts
@@ -0,0 +1,5 @@
+class Renderer {
+  // TODO
+}
+
+export default Renderer;
\ No newline at end of file
diff --git a/scripts/build.js b/scripts/build.js
index 1a0a26d..2567320 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -10,12 +10,14 @@ const pkgNames = packages.map((pkg) => {
 
 async function main() {
 
-  pkgNames.forEach(async (name) => {
-    const target = name;
-    const pkgDir = path.resolve(`packages/${target}`);
-    // const pkg = require(`${pkgDir}/package.json`)
-    await fs.remove(`${pkgDir}/dist`);
-  });
+  if (process.env.BUILD_MODE === 'reset') {
+    pkgNames.forEach(async (name) => {
+      const target = name;
+      const pkgDir = path.resolve(`packages/${target}`);
+      // const pkg = require(`${pkgDir}/package.json`)
+      await fs.remove(`${pkgDir}/dist`);
+    });
+  }
 
   await 
   execa('rollup', [ '-c', './scripts/rollup.config.js', ], { stdio: 'inherit' });
diff --git a/scripts/config.js b/scripts/config.js
index f7fa13c..88f56b4 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -7,6 +7,10 @@ const packages = [
     dirName: 'board',
     globalName: 'iDrawBoard',
   },
+  {
+    dirName: 'renderer',
+    globalName: 'iDrawRenderer',
+  },
   // {
   //   dirName: 'kernal',
   //   globalName: 'iDrawKernal',
diff --git a/scripts/rollup.config.js b/scripts/rollup.config.js
index 5311ab7..fc6eabc 100644
--- a/scripts/rollup.config.js
+++ b/scripts/rollup.config.js
@@ -21,14 +21,7 @@ const external = [ '@idraw/types', '@idraw/util', '@idraw/board', '@idraw/core'
 
 for(let i = 0; i < packages.length; i++) {
   const pkg = packages[i];
-  modules.push({
-    input: resolveFile([pkg.dirName, 'src', 'index.ts']),
-    output: resolveFile([pkg.dirName, 'dist', 'index.global.js']),
-    name: pkg.globalName,
-    format: 'iife',
-    plugins: []
-  });
-  if (process.env.NODE_ENV === 'production') {
+  if (process.env.BUILD_MODE === 'mini') {
     modules.push({
       input: resolveFile([pkg.dirName, 'src', 'index.ts']),
       output: resolveFile([pkg.dirName, 'dist', 'index.global.min.js']),
@@ -36,26 +29,34 @@ for(let i = 0; i < packages.length; i++) {
       format: 'iife',
       plugins: []
     });
+  } else {
+    modules.push({
+      input: resolveFile([pkg.dirName, 'src', 'index.ts']),
+      output: resolveFile([pkg.dirName, 'dist', 'index.global.js']),
+      name: pkg.globalName,
+      format: 'iife',
+      plugins: []
+    });
+    modules.push({
+      input: resolveFile([pkg.dirName, 'src', 'index.ts']),
+      output: resolveFile([pkg.dirName, 'dist', 'index.cjs.js']),
+      name: pkg.globalName,
+      format: 'cjs',
+      exports: 'default',
+      // plugins: [dtsPlugin(pkg.dirName),],
+      plugins: [],
+      external,
+    });
+    modules.push({
+      input: resolveFile([pkg.dirName, 'src', 'index.ts']),
+      output: resolveFile([pkg.dirName, 'dist', 'index.es.js']),
+      name: pkg.globalName,
+      esModule: true,
+      format: 'es',
+      external,
+      plugins: [dtsPlugin(pkg.dirName),]
+    });
   }
-  modules.push({
-    input: resolveFile([pkg.dirName, 'src', 'index.ts']),
-    output: resolveFile([pkg.dirName, 'dist', 'index.cjs.js']),
-    name: pkg.globalName,
-    format: 'cjs',
-    exports: 'default',
-    // plugins: [dtsPlugin(pkg.dirName),],
-    plugins: [],
-    external,
-  });
-  modules.push({
-    input: resolveFile([pkg.dirName, 'src', 'index.ts']),
-    output: resolveFile([pkg.dirName, 'dist', 'index.es.js']),
-    name: pkg.globalName,
-    esModule: true,
-    format: 'es',
-    external,
-    plugins: [dtsPlugin(pkg.dirName),]
-  });
 }