diff --git a/package.json b/package.json
index f6e6fce..163fa83 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "start": "node ./scripts/dev-vite.js",
     "dev": "node ./scripts/dev-rollup.js",
-    "build": "npm run build:bundle && npm run build:min",
+    "build": "npm run build:mod && npm run build:bundle && npm run build:min",
     "build:bundle": "NODE_ENV=production BUILD_MODE=reset node ./scripts/build-bundle.js",
     "build:mod": "node ./scripts/build-module.js",
     "build:min": "node ./scripts/minify.js",
diff --git a/packages/board/examples/features/main.js b/packages/board/examples/features/main.js
index 9f1f04d..6e62b53 100644
--- a/packages/board/examples/features/main.js
+++ b/packages/board/examples/features/main.js
@@ -5,7 +5,7 @@ import { doScroll } from "./lib/scroll.js";
 import { initEvent } from "./lib/event.js";
 import { doCursor } from "./lib/action.js";
 
-const Board = window.iDrawBoard;
+const { Board } = window.iDrawBoard;
 
 const mount = document.querySelector("#mount");
 const board = new Board(mount, opts);
diff --git a/packages/board/examples/test/event.html b/packages/board/examples/test/event.html
index 7f4be2e..229a339 100644
--- a/packages/board/examples/test/event.html
+++ b/packages/board/examples/test/event.html
@@ -110,7 +110,7 @@
     <script type="module">
       import event from './../../../../scripts/browser/event.js';
       (async function() {
-        const Board = window.iDrawBoard; 
+        const { Board } = window.iDrawBoard; 
         const mount1 = document.querySelector('#mount-1');
         const mount2 = document.querySelector('#mount-2');
         const board = new Board(mount1, opts);
diff --git a/packages/board/examples/test/main.html b/packages/board/examples/test/main.html
index f569f76..d545893 100644
--- a/packages/board/examples/test/main.html
+++ b/packages/board/examples/test/main.html
@@ -78,7 +78,7 @@
 
     <script>
     (function () {
-      const Board = window.iDrawBoard; 
+      const { Board } = window.iDrawBoard; 
       const mount = document.querySelector('#mount-1');
       const board = new Board(mount, {
         width: 300,
@@ -96,7 +96,7 @@
 
     <script>
       (function() {
-        const Board = window.iDrawBoard; 
+        const { Board } = window.iDrawBoard; 
         const mount = document.querySelector('#mount-2');
         const opts = {
           width: 300,
diff --git a/packages/board/examples/test/scale.html b/packages/board/examples/test/scale.html
index a8c9f1c..2c55663 100644
--- a/packages/board/examples/test/scale.html
+++ b/packages/board/examples/test/scale.html
@@ -87,7 +87,7 @@
 
     <script>
     (function () {
-      const Board = window.iDrawBoard; 
+      const { Board } = window.iDrawBoard; 
       const mount = document.querySelector('#mount-1');
       const board = new Board(mount, {
         width: 300,
@@ -105,7 +105,7 @@
     </script>
     <script>
     (function() {
-      const Board = window.iDrawBoard; 
+      const { Board } = window.iDrawBoard; 
       const mount = document.querySelector('#mount-2');
       const board = new Board(mount, {
         width: 300,
@@ -126,7 +126,7 @@
 
     <script>
     (function() {
-      const Board = window.iDrawBoard; 
+      const { Board } = window.iDrawBoard; 
       const mount = document.querySelector('#mount-3');
       const board = new Board(mount, {
         width: 300,
@@ -148,7 +148,7 @@
 
     <script>
     (function() {
-      const Board = window.iDrawBoard; 
+      const { Board } = window.iDrawBoard; 
       const mount = document.querySelector('#mount-4');
       const board = new Board(mount, {
         width: 300,
@@ -167,7 +167,7 @@
 
     <script>
     (function() {
-      const Board = window.iDrawBoard; 
+      const { Board } = window.iDrawBoard; 
       const mount = document.querySelector('#mount-5');
       const opts = {
         width: 300,
diff --git a/packages/board/examples/test/scroll.html b/packages/board/examples/test/scroll.html
index 6518997..14e9cec 100644
--- a/packages/board/examples/test/scroll.html
+++ b/packages/board/examples/test/scroll.html
@@ -98,7 +98,7 @@
     </script>
     <script>
       (function() {
-        const Board = window.iDrawBoard; 
+        const { Board } = window.iDrawBoard; 
         const mount = document.querySelector('#mount-1');
         const board = new Board(mount, opts);
         // board.on('wheelX', (deltaX) => {
@@ -128,7 +128,7 @@
     <script type="module">
       import event from './../../../../scripts/browser/event.js';
       (function() {
-        const Board = window.iDrawBoard; 
+        const { Board } = window.iDrawBoard; 
         const mount = document.querySelector('#mount-2');
         const board = new Board(mount, opts);
         drawBoard(board)
diff --git a/packages/board/package.json b/packages/board/package.json
index 82ca63b..9f61cbc 100644
--- a/packages/board/package.json
+++ b/packages/board/package.json
@@ -11,7 +11,9 @@
   },
   "files": [
     "dist/*.ts",
-    "dist/*.js"
+    "dist/*.js",
+    "esm/*.ts",
+    "esm/*.js"
   ],
   "repository": {
     "type": "git",
diff --git a/packages/board/src/default.ts b/packages/board/src/default.ts
index ca8151d..990ec1f 100644
--- a/packages/board/src/default.ts
+++ b/packages/board/src/default.ts
@@ -1,3 +1 @@
-import { Board } from './index';
-
-export default Board;
\ No newline at end of file
+export * as default from './index';
\ No newline at end of file
diff --git a/packages/board/src/esm.ts b/packages/board/src/esm.ts
index 880acc2..3f6b745 100644
--- a/packages/board/src/esm.ts
+++ b/packages/board/src/esm.ts
@@ -1,5 +1,3 @@
-import { Board } from './index';
-
 export * from './index';
 
-export default Board;
\ No newline at end of file
+export * as default from './index';
\ No newline at end of file
diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts
index bb4fb5c..4a3c30d 100644
--- a/packages/board/src/index.ts
+++ b/packages/board/src/index.ts
@@ -2,13 +2,16 @@ import {
   TypeScreenPosition, TypeScreenSize, TypeScreenContext, TypePoint, TypePointCursor,
   TypeBoardOptions, TypeBoardSizeOptions, TypeContext, 
 } from '@idraw/types';
-import { throttle, Context } from '@idraw/util';
+import util from '@idraw/util';
 import { ScreenWatcher } from './lib/screen-watcher';
 import { setStyle } from './lib/style';
 import { TypeBoardEventArgMap } from './lib/event';
 import { Scroller } from './lib/scroller';
 import { Screen } from './lib/screen';
 // import { TempData } from './lib/temp';
+
+const { throttle, Context } = util;
+
 import {
   _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx,
   _watcher, _render, _parsePrivateOptions, _scroller, _helperCanvas, _helperCtx,
diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js
index 41422a3..121c477 100644
--- a/packages/core/examples/features/lib/main.js
+++ b/packages/core/examples/features/lib/main.js
@@ -3,7 +3,7 @@ import { doScale } from './scale.js';
 import { doScroll } from './scroll.js';
 import { doElemens } from './element.js';
 
-const Core = window.iDrawCore;
+const { Core } = window.iDrawCore;
 const data = getData();
 const mount = document.querySelector('#mount');
 
diff --git a/packages/core/examples/test/api.html b/packages/core/examples/test/api.html
index a347454..21c5a0b 100644
--- a/packages/core/examples/test/api.html
+++ b/packages/core/examples/test/api.html
@@ -107,7 +107,7 @@
       window.getData = getData;
     </script>
     <script>
-      var Core = window.iDrawCore;
+      const { Core } = window.iDrawCore;
       var opts = {
         width: 300,
         height: 200,
diff --git a/packages/core/examples/test/elements.html b/packages/core/examples/test/elements.html
index de83d65..b515161 100644
--- a/packages/core/examples/test/elements.html
+++ b/packages/core/examples/test/elements.html
@@ -80,7 +80,7 @@
       window.getData = getData;
     </script>
     <script>
-      var Core = window.iDrawCore;
+      const { Core } = window.iDrawCore;
       var opts = {
         width: 300,
         height: 200,
diff --git a/packages/core/examples/test/event.html b/packages/core/examples/test/event.html
index 72a1385..5f7a802 100644
--- a/packages/core/examples/test/event.html
+++ b/packages/core/examples/test/event.html
@@ -50,7 +50,7 @@
 
     <script src="./../../dist/index.global.js"></script>
     <script>
-      var Core = window.iDrawCore;
+      const { Core } = window.iDrawCore;
       var opts = {
         width: 300,
         height: 200,
diff --git a/packages/core/examples/test/resource.html b/packages/core/examples/test/resource.html
index 7da28d8..aab715c 100644
--- a/packages/core/examples/test/resource.html
+++ b/packages/core/examples/test/resource.html
@@ -67,7 +67,7 @@
 
     <script src="./../../dist/index.global.js"></script>
     <script>
-      var Core = window.iDrawCore;
+      const { Core } = window.iDrawCore;
       var opts = {
         width: 300,
         height: 200,
diff --git a/packages/core/package.json b/packages/core/package.json
index df3cc4d..a3282b6 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -3,7 +3,7 @@
   "version": "0.2.0-alpha.26",
   "description": "",
   "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
+  "module": "dist/index.esm.js",
   "unpkg": "dist/index.global.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -11,7 +11,9 @@
   },
   "files": [
     "dist/*.ts",
-    "dist/*.js"
+    "dist/*.js",
+    "esm/*.ts",
+    "esm/*.js"
   ],
   "repository": {
     "type": "git",
diff --git a/packages/core/src/default.ts b/packages/core/src/default.ts
new file mode 100644
index 0000000..5258cc5
--- /dev/null
+++ b/packages/core/src/default.ts
@@ -0,0 +1,2 @@
+
+export * as default from './index';
\ No newline at end of file
diff --git a/packages/core/src/esm.ts b/packages/core/src/esm.ts
new file mode 100644
index 0000000..3f6b745
--- /dev/null
+++ b/packages/core/src/esm.ts
@@ -0,0 +1,3 @@
+export * from './index';
+
+export * as default from './index';
\ No newline at end of file
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 6337ced..bc1d454 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -3,9 +3,9 @@ import {
   TypeConfig, TypeConfigStrict, TypeElementBase,
   TypeElement, TypeElemDesc, TypeContext, TypeCoreOptions,  TypeScreenContext, TypeScreenData,
 }  from '@idraw/types';
-import Board from '@idraw/board';
-import util from '@idraw/util';
-import Renderer from '@idraw/renderer';
+import { Board } from '@idraw/board';
+import { deepClone } from '@idraw/util';
+import { Renderer } from '@idraw/renderer';
 import is, { TypeIs } from './lib/is';
 import check, { TypeCheck } from './lib/check';
 import {
@@ -23,9 +23,8 @@ import { getSelectedElements, updateElement, selectElementByIndex, getElement, g
 // import { initEvent } from './mixins/event';
 import { Engine } from './lib/engine';
 import { drawElementWrapper, drawAreaWrapper, drawElementListWrappers } from './lib/draw/wrapper'
-const { deepClone } = util.data;
 
-class Core {
+export class Core {
 
   private [_board]: Board;
   private [_data]: TypeData;
@@ -264,5 +263,3 @@ class Core {
     }
   }
 }
-
-export default Core;
\ No newline at end of file
diff --git a/packages/core/src/lib/config.ts b/packages/core/src/lib/config.ts
index 26fd21e..476427a 100644
--- a/packages/core/src/lib/config.ts
+++ b/packages/core/src/lib/config.ts
@@ -1,5 +1,5 @@
 import { TypeConfig, TypeConfigStrict } from '@idraw/types';
-import util from '@idraw/util';
+import { deepClone } from '@idraw/util';
 
 const defaultConfig: TypeConfigStrict = {
   elementWrapper: {
@@ -12,7 +12,7 @@ const defaultConfig: TypeConfigStrict = {
 };
 
 function mergeConfig(config?: TypeConfig): TypeConfigStrict {
-  const result = util.data.deepClone(defaultConfig);
+  const result = deepClone(defaultConfig);
   if (config) {
     if (config.elementWrapper) {
       result.elementWrapper = {...result.elementWrapper, ...config.elementWrapper};
diff --git a/packages/core/src/lib/draw/base.ts b/packages/core/src/lib/draw/base.ts
index a537777..e9864b9 100644
--- a/packages/core/src/lib/draw/base.ts
+++ b/packages/core/src/lib/draw/base.ts
@@ -3,12 +3,10 @@ import {
   // TypeElemDesc,
   TypeElement,
 } from '@idraw/types';
-import util from '@idraw/util';
+import { istype, isColorStr } from '@idraw/util';
 import { rotateElement } from './../transform';
 import is from './../is';
 
-const { istype, color } = util;
-
 export function clearContext(ctx: TypeContext) {
   // ctx.setFillStyle('rgb(0 0 0 / 100%)');
   // ctx.setStrokeStyle('rgb(0 0 0 / 100%)');
@@ -71,7 +69,7 @@ export function drawBoxBorder(
     }
     const bw = elem.desc.borderWidth;
     let borderColor = '#000000';
-    if (color.isColorStr(elem.desc.borderColor) === true) {
+    if (isColorStr(elem.desc.borderColor) === true) {
       borderColor = elem.desc.borderColor as string;
     }
     const x = elem.x - bw / 2;
@@ -85,7 +83,7 @@ export function drawBoxBorder(
       r = r + bw / 2;
     }
     const { desc } = elem;
-    if (desc.shadowColor !== undefined && util.color.isColorStr(desc.shadowColor)) {
+    if (desc.shadowColor !== undefined && isColorStr(desc.shadowColor)) {
       ctx.setShadowColor(desc.shadowColor);
     }
     if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts
index 2c2c4e8..fe2ff86 100644
--- a/packages/core/src/lib/element.ts
+++ b/packages/core/src/lib/element.ts
@@ -6,13 +6,12 @@ import {
   TypeElement,
   TypeElemDesc,
 } from '@idraw/types';
-import util from '@idraw/util';
+import { createUUID } from '@idraw/util';
 import { rotateElement } from './transform';
 import { calcRadian, calcElementCenter, parseRadianToAngle } from './calculate';
 import { limitAngle, limitNum } from './value';
 import { LIMIT_QBLIQUE_ANGLE } from './../constant/element';
 
-const { createUUID } = util.uuid;
 const limitQbliqueAngle = LIMIT_QBLIQUE_ANGLE;
 
 export class Element {
diff --git a/packages/core/src/lib/engine.ts b/packages/core/src/lib/engine.ts
index c35952d..1a72c07 100644
--- a/packages/core/src/lib/engine.ts
+++ b/packages/core/src/lib/engine.ts
@@ -2,16 +2,14 @@ import {
   TypePoint, TypeHelperWrapperControllerDirection,InterfaceHelperPlugin,
   TypeConfigStrict, TypeData, TypeHelperConfig,
 } from '@idraw/types';
-import util from '@idraw/util';
-import Board from '@idraw/board';
+import { deepClone, throttle } from '@idraw/util';
+import { Board } from '@idraw/board';
 import { Mode, CursorStatus } from './../constant/static';
 import { TempData } from './engine-temp';
 import { Helper } from './helper';
 import { Mapper } from './mapper';
 import { Element } from './element';
 import { CoreEvent } from './core-event';
-const { time } = util;
-const { deepClone } = util.data;
 
 type Options = {
   coreEvent: CoreEvent,
@@ -80,13 +78,13 @@ export class Engine {
     }
     const { board } = this._opts;
     
-    board.on('hover', time.throttle(this._handleHover.bind(this), 32));
-    board.on('leave', time.throttle(this._handleLeave.bind(this), 32));
-    board.on('point', time.throttle(this._handleClick.bind(this), 16));
+    board.on('hover', throttle(this._handleHover.bind(this), 32));
+    board.on('leave', throttle(this._handleLeave.bind(this), 32));
+    board.on('point', throttle(this._handleClick.bind(this), 16));
     board.on('doubleClick', this._handleDoubleClick.bind(this));
     board.on('point', this._handlePoint.bind(this));
     board.on('moveStart', this._handleMoveStart.bind(this));
-    board.on('move', time.throttle(this._handleMove.bind(this), 16));
+    board.on('move', throttle(this._handleMove.bind(this), 16));
     board.on('moveEnd', this._handleMoveEnd.bind(this));
   }
 
diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts
index 06769b0..376fdb7 100644
--- a/packages/core/src/lib/helper.ts
+++ b/packages/core/src/lib/helper.ts
@@ -4,15 +4,14 @@ import {
   TypeElemDesc, TypeContext, TypePoint, TypeConfigStrict,
   TypeHeplerSelectedElementWrapper
 } from '@idraw/types';
-import Board from '@idraw/board';
-import util from '@idraw/util';
+import { Board } from '@idraw/board';
+import { deepClone } from '@idraw/util';
 import { parseAngleToRadian, calcElementCenter } from './calculate';
 import { rotateContext, rotateElement } from './transform';
 import { LIMIT_QBLIQUE_ANGLE } from './../constant/element';
 
 const limitQbliqueAngle = LIMIT_QBLIQUE_ANGLE;
 
-const { deepClone } = util.data;
 
 export class Helper implements TypeHelper {
 
@@ -89,7 +88,7 @@ export class Helper implements TypeHelper {
       'bottom',
       'bottom-right',
     ];
-    let hoverDirectionNames = util.data.deepClone(directionNames);
+    let hoverDirectionNames = deepClone(directionNames);
 
     let angleMoveNum = 0;
     if (data && uuid) {
diff --git a/packages/core/src/lib/is.ts b/packages/core/src/lib/is.ts
index 17d3ea0..1774dd0 100644
--- a/packages/core/src/lib/is.ts
+++ b/packages/core/src/lib/is.ts
@@ -1,8 +1,5 @@
-import util from "@idraw/util";
-
-const { isColorStr } = util.color;
-
-
+import { isColorStr } from "@idraw/util";
+ 
 
 function number(value: any) {
   return (typeof value === 'number' && (value > 0 || value <= 0));
diff --git a/packages/core/src/lib/mapper.ts b/packages/core/src/lib/mapper.ts
index 34e56c2..e725108 100644
--- a/packages/core/src/lib/mapper.ts
+++ b/packages/core/src/lib/mapper.ts
@@ -1,5 +1,5 @@
 import { TypeData, TypePoint, TypePointCursor } from '@idraw/types';
-import Board from '@idraw/board';
+import { Board } from '@idraw/board';
 import { Helper } from './helper';
 import { Element } from './element';
 
diff --git a/packages/core/src/mixins/element.ts b/packages/core/src/mixins/element.ts
index f6b16d4..33e995d 100644
--- a/packages/core/src/mixins/element.ts
+++ b/packages/core/src/mixins/element.ts
@@ -1,18 +1,16 @@
 import {
   TypeElement, TypeElemDesc, TypeElementBase,
 }  from '@idraw/types';
-import util from '@idraw/util';
+import { deepClone, createUUID } from '@idraw/util';
 import {
   _board, _data, _opts, _config, _renderer, _element, _engine,
   _tempData, _draw, _coreEvent, _emitChangeScreen, _emitChangeData,
 } from './../names';
 import { diffElementResourceChange } from './../lib/diff';
-import Core from './../index';
+import { Core } from './../index';
 import { Mode } from './../constant/static';
 
-// const { time } = util;
-const { deepClone } = util.data;
-const { createUUID } = util.uuid;
+ 
 
 export function getSelectedElements(core: Core): TypeElement<keyof TypeElemDesc>[] {
   const elems: TypeElement<keyof TypeElemDesc>[] = [];
diff --git a/packages/core/src/plugins/helper.ts b/packages/core/src/plugins/helper.ts
index db31120..28487b9 100644
--- a/packages/core/src/plugins/helper.ts
+++ b/packages/core/src/plugins/helper.ts
@@ -2,7 +2,7 @@ import {
   InterfaceHelperPlugin, TypeHelperPluginEventDetail,
   TypeHelperPluginEventResult,
 } from '@idraw/types';
-import util from '@idraw/util';
+import { createUUID } from '@idraw/util';
 
 
 export class HelperPlugin implements Required<InterfaceHelperPlugin> {
@@ -13,7 +13,7 @@ export class HelperPlugin implements Required<InterfaceHelperPlugin> {
 
   constructor() {
     // TODO
-    this.uuid = util.uuid.createUUID();
+    this.uuid = createUUID();
   }
 
   onHover(detail: TypeHelperPluginEventDetail): void | TypeHelperPluginEventResult {
diff --git a/packages/idraw/examples/features/index.html b/packages/idraw/examples/features/main.html
similarity index 100%
rename from packages/idraw/examples/features/index.html
rename to packages/idraw/examples/features/main.html
diff --git a/packages/idraw/package.json b/packages/idraw/package.json
index 2c40fd6..7c0ca3e 100644
--- a/packages/idraw/package.json
+++ b/packages/idraw/package.json
@@ -11,7 +11,9 @@
   },
   "files": [
     "dist/*.ts",
-    "dist/*.js"
+    "dist/*.js",
+    "esm/*.ts",
+    "esm/*.js"
   ],
   "repository": {
     "type": "git",
diff --git a/packages/idraw/src/default.ts b/packages/idraw/src/default.ts
new file mode 100644
index 0000000..b35a50c
--- /dev/null
+++ b/packages/idraw/src/default.ts
@@ -0,0 +1,3 @@
+import iDraw from './index';
+
+export  default iDraw;
\ No newline at end of file
diff --git a/packages/idraw/src/esm.ts b/packages/idraw/src/esm.ts
new file mode 100644
index 0000000..b35a50c
--- /dev/null
+++ b/packages/idraw/src/esm.ts
@@ -0,0 +1,3 @@
+import iDraw from './index';
+
+export  default iDraw;
\ No newline at end of file
diff --git a/packages/idraw/src/index.ts b/packages/idraw/src/index.ts
index 80004b5..c6150ba 100644
--- a/packages/idraw/src/index.ts
+++ b/packages/idraw/src/index.ts
@@ -1,4 +1,4 @@
-import Core from '@idraw/core';
+import { Core } from '@idraw/core';
 import { TypeData, TypeConfig, } from '@idraw/types';
 import { Options, PrivateOptions } from './types';
 import { defaultOptions } from './config';
@@ -15,7 +15,7 @@ import { copyElements, pasteElements, cutElements, deleteElements,
 } from './mixins/keyboard';
 // import { version } from './../package.json';
 
-class iDraw extends Core {
+export default class iDraw extends Core {
 
   private [_opts]: PrivateOptions;
   private [_hasInited] = false; 
@@ -95,6 +95,4 @@ class iDraw extends Core {
     return { ...{}, ...defaultOptions, ...opts };
   }
 
-}
-
-export default iDraw;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/packages/idraw/src/mixins/keyboard.ts b/packages/idraw/src/mixins/keyboard.ts
index 725082b..552a844 100644
--- a/packages/idraw/src/mixins/keyboard.ts
+++ b/packages/idraw/src/mixins/keyboard.ts
@@ -1,4 +1,4 @@
-import util from '@idraw/util';
+import { deepClone } from '@idraw/util';
 import { TypeElement, TypeElemDesc } from '@idraw/types';
 import iDraw from './../index';
 import { _tempData } from './../names';
@@ -7,7 +7,7 @@ export function copyElements(idraw: iDraw) {
   if (idraw[_tempData].get('isFocus') !== true) {
     return;
   }
-  const elems = util.data.deepClone(idraw.getSelectedElements());
+  const elems = deepClone(idraw.getSelectedElements());
   idraw[_tempData].set('clipboardElements', elems);
 }
 
@@ -29,7 +29,7 @@ export function cutElements(idraw: iDraw) {
   if (idraw[_tempData].get('isFocus') !== true) {
     return;
   }
-  const elems = util.data.deepClone(idraw.getSelectedElements());
+  const elems = deepClone(idraw.getSelectedElements());
   elems.forEach((elem: TypeElement<keyof TypeElemDesc>) => {
     idraw.deleteElement(elem.uuid);
   })
@@ -40,7 +40,7 @@ export function deleteElements(idraw: iDraw) {
   if (idraw[_tempData].get('isFocus') !== true) {
     return;
   }
-  const elems = util.data.deepClone(idraw.getSelectedElements());
+  const elems = deepClone(idraw.getSelectedElements());
   elems.forEach((elem: TypeElement<keyof TypeElemDesc>) => {
     idraw.deleteElement(elem.uuid);
   });
@@ -50,7 +50,7 @@ export function deleteElements(idraw: iDraw) {
 const keyArrowMoveDistance = 4;
 
 export function keyArrowUp(idraw: iDraw) {
-  const elems = util.data.deepClone(idraw.getSelectedElements());
+  const elems = deepClone(idraw.getSelectedElements());
   if (elems.length > 0) {
     elems.forEach((elem: TypeElement<keyof TypeElemDesc>) => {
       elem.y -= keyArrowMoveDistance;
@@ -63,7 +63,7 @@ export function keyArrowUp(idraw: iDraw) {
 }
 
 export function keyArrowDown(idraw: iDraw) {
-  const elems = util.data.deepClone(idraw.getSelectedElements());
+  const elems = deepClone(idraw.getSelectedElements());
   if (elems.length > 0) {
     elems.forEach((elem: TypeElement<keyof TypeElemDesc>) => {
       elem.y += keyArrowMoveDistance;
@@ -76,7 +76,7 @@ export function keyArrowDown(idraw: iDraw) {
 }
 
 export function keyArrowLeft(idraw: iDraw) {
-  const elems = util.data.deepClone(idraw.getSelectedElements());
+  const elems = deepClone(idraw.getSelectedElements());
   if (elems.length > 0) {
     elems.forEach((elem: TypeElement<keyof TypeElemDesc>) => {
       elem.x -= keyArrowMoveDistance;
@@ -89,7 +89,7 @@ export function keyArrowLeft(idraw: iDraw) {
 }
 
 export function keyArrowRight(idraw: iDraw) {
-  const elems = util.data.deepClone(idraw.getSelectedElements());
+  const elems = deepClone(idraw.getSelectedElements());
   if (elems.length > 0) {
     elems.forEach((elem: TypeElement<keyof TypeElemDesc>) => {
       elem.x += keyArrowMoveDistance;
diff --git a/packages/renderer/examples/lib/main.js b/packages/renderer/examples/lib/main.js
index c8c3583..f025297 100644
--- a/packages/renderer/examples/lib/main.js
+++ b/packages/renderer/examples/lib/main.js
@@ -4,7 +4,7 @@ import { getData } from './data/index.js';
  
 // const Context = util.Context;
 const Context = iDrawUtil.Context;
-const Renderer = window.iDrawRenderer;
+const { Renderer } = window.iDrawRenderer;
 const data = getData();
 const canvas = document.querySelector('#canvas');
 const opts = {
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index c430451..ed22372 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -11,7 +11,9 @@
   },
   "files": [
     "dist/*.ts",
-    "dist/*.js"
+    "dist/*.js",
+    "esm/*.ts",
+    "esm/*.js"
   ],
   "repository": {
     "type": "git",
diff --git a/packages/renderer/src/default.ts b/packages/renderer/src/default.ts
index e6711bc..2ff6dd6 100644
--- a/packages/renderer/src/default.ts
+++ b/packages/renderer/src/default.ts
@@ -1,3 +1 @@
-import { Renderer } from './index';
-
-export default Renderer;
\ No newline at end of file
+export * as default from './index';
diff --git a/packages/renderer/src/esm.ts b/packages/renderer/src/esm.ts
index 8d33e56..a12826c 100644
--- a/packages/renderer/src/esm.ts
+++ b/packages/renderer/src/esm.ts
@@ -1,5 +1,3 @@
-import { Renderer } from './index';
-
 export * from './index';
 
-export default Renderer;
\ No newline at end of file
+export * as default from './index';
diff --git a/scripts/build-module.js b/scripts/build-module.js
index 0cef32d..4f3a4f5 100644
--- a/scripts/build-module.js
+++ b/scripts/build-module.js
@@ -1,4 +1,6 @@
 const ts = require('typescript');
+const path = require('path');
+const fs = require('fs-extra');
 // const babel = require('@babel/core');
 const glob = require("glob");
 const { packages } = require('./config');
@@ -8,6 +10,9 @@ build();
 
 async function build() {
   packages.forEach(async (pkg) => {
+    const target = pkg.dirName;
+    const pkgDir = path.resolve(`packages/${target}`);
+    await fs.remove(`${pkgDir}/esm`);
     buildPackage(pkg.dirName);
   });
 }