diff --git a/packages/designer/vite.config.ts b/packages/designer/vite.config.ts
index 546af4fc2..dd9a94cf0 100644
--- a/packages/designer/vite.config.ts
+++ b/packages/designer/vite.config.ts
@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, type LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeDesigner',
-      formats: ['es', 'cjs'],
+      formats,
       // the proper extensions will be added
       fileName: 'designer',
     },
diff --git a/packages/editor-core/vite.config.ts b/packages/editor-core/vite.config.ts
index aa861552f..0d5130788 100644
--- a/packages/editor-core/vite.config.ts
+++ b/packages/editor-core/vite.config.ts
@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, type LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeEditorCore',
-      formats: ['es'],
+      formats,
       // the proper extensions will be added
       fileName: 'editorCore',
     },
diff --git a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx
index 093198eb6..783df1034 100644
--- a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx
+++ b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx
@@ -138,8 +138,7 @@ export class SettingsPrimaryPane extends Component<
     return (
       <div className="lc-settings-navigator">
         {createIcon(this.main.componentMeta?.icon, {
-          className: 'lc-settings-navigator-icon',
-          class: 'lc-settings-navigator-icon',
+          className: 'lc-settings-navigator-icon'
         })}
         <Breadcrumb className="lc-settings-node-breadcrumb">{items}</Breadcrumb>
       </div>
diff --git a/packages/editor-skeleton/src/widget/panel-dock.ts b/packages/editor-skeleton/src/widget/panel-dock.ts
index 896849706..673d7dbd3 100644
--- a/packages/editor-skeleton/src/widget/panel-dock.ts
+++ b/packages/editor-skeleton/src/widget/panel-dock.ts
@@ -161,13 +161,6 @@ export class PanelDock implements IWidget {
   showPanel() {
     this.panel?.setActive(true);
   }
-
-  /**
-   * @deprecated
-   */
-  onActiveChange(func: () => any) {
-    return this.panel?.onActiveChange(func);
-  }
 }
 
 export function isPanelDock(obj: any): obj is PanelDock {
diff --git a/packages/editor-skeleton/src/widget/panel.ts b/packages/editor-skeleton/src/widget/panel.ts
index 560df6869..1c8d23b20 100644
--- a/packages/editor-skeleton/src/widget/panel.ts
+++ b/packages/editor-skeleton/src/widget/panel.ts
@@ -234,37 +234,6 @@ export class Panel implements IWidget {
       return isPanelDock(item) && item.panelName === this.name;
     }) as any;
   }
-
-  /**
-   * @deprecated
-   */
-  getSupportedPositions() {
-    return ['default'];
-  }
-
-  /**
-   * @deprecated
-   */
-  getCurrentPosition() {
-    return 'default';
-  }
-
-  /**
-   * @deprecated
-   */
-  setPosition(/* position: string */) {
-    // noop
-  }
-
-  /**
-   * @deprecated
-   */
-  onActiveChange(fn: (flag: boolean) => void): () => void {
-    this.emitter.on('activechange', fn);
-    return () => {
-      this.emitter.removeListener('activechange', fn);
-    };
-  }
 }
 
 export function isPanel(obj: any): obj is Panel {
diff --git a/packages/editor-skeleton/vite.config.ts b/packages/editor-skeleton/vite.config.ts
index 14268dce2..2f5ccf1c0 100644
--- a/packages/editor-skeleton/vite.config.ts
+++ b/packages/editor-skeleton/vite.config.ts
@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, type LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process'
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeEditorSkeleton',
-      formats: ['es', 'cjs'],
+      formats,
       // the proper extensions will be added
       fileName: 'editorSkeleton',
     },
diff --git a/packages/engine/package.json b/packages/engine/package.json
index 16650d9b8..fe7d7af90 100644
--- a/packages/engine/package.json
+++ b/packages/engine/package.json
@@ -29,7 +29,6 @@
     "@alilc/lowcode-designer": "workspace:*",
     "@alilc/lowcode-editor-core": "workspace:*",
     "@alilc/lowcode-editor-skeleton": "workspace:*",
-    "@alilc/lowcode-engine-ext": "^1.0.0",
     "@alilc/lowcode-plugin-command": "workspace:*",
     "@alilc/lowcode-plugin-designer": "workspace:*",
     "@alilc/lowcode-plugin-outline-pane": "workspace:*",
diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts
index f80d5ed18..f5093c0ee 100644
--- a/packages/engine/src/engine-core.ts
+++ b/packages/engine/src/engine-core.ts
@@ -1,7 +1,5 @@
-/* eslint-disable max-len */
-/* eslint-disable no-param-reassign */
 import { createElement } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, type Root } from 'react-dom/client';
 import {
   globalContext,
   Editor,
@@ -210,13 +208,14 @@ engineConfig.set('isOpenSource', isOpenSource);
 
 // container which will host LowCodeEngine DOM
 let engineContainer: HTMLElement;
-// @ts-ignore webpack Define variable
 
 export { version }
 engineConfig.set('ENGINE_VERSION', version);
 
 const pluginPromise = registryInnerPlugin(designer, editor, plugins);
 
+let root: Root | undefined;
+
 export async function init(
   container?: HTMLElement,
   options?: IPublicTypeEngineOptions,
@@ -244,15 +243,19 @@ export async function init(
   if (options && options.enableWorkspaceMode) {
     const disposeFun = await pluginPromise;
     disposeFun && disposeFun();
-    render(
-      createElement(WorkSpaceWorkbench, {
+
+    if (!root) {
+      root = createRoot(
+        engineContainer,
+      );
+      root.render(createElement(WorkSpaceWorkbench, {
         workspace: innerWorkspace,
         // skeleton: workspace.skeleton,
         className: 'engine-main',
         topAreaItemClassName: 'engine-actionitem',
-      }),
-      engineContainer,
-    );
+      }))
+    }
+
     innerWorkspace.enableAutoOpenFirstWindow = engineConfig.get('enableAutoOpenFirstWindow', true);
     innerWorkspace.setActive(true);
     innerWorkspace.initWindow();
@@ -263,14 +266,14 @@ export async function init(
 
   await plugins.init(pluginPreference as any);
 
-  render(
-    createElement(Workbench, {
+  if (!root) {
+    root = createRoot(engineContainer)
+    root.render(createElement(Workbench, {
       skeleton: innerSkeleton,
       className: 'engine-main',
       topAreaItemClassName: 'engine-actionitem',
-    }),
-    engineContainer,
-  );
+    }))
+  }
 }
 
 export async function destroy() {
@@ -284,5 +287,5 @@ export async function destroy() {
 
   // unmount DOM container, this will trigger React componentWillUnmount lifeCycle,
   // so necessary cleanups will be done.
-  engineContainer && unmountComponentAtNode(engineContainer);
+  root && root.unmount();
 }
diff --git a/packages/engine/src/inner-plugins/setter-registry.ts b/packages/engine/src/inner-plugins/setter-registry.ts
index 9d7fe4fcc..a9515b39f 100644
--- a/packages/engine/src/inner-plugins/setter-registry.ts
+++ b/packages/engine/src/inner-plugins/setter-registry.ts
@@ -6,10 +6,11 @@ export const setterRegistry = (ctx: IPublicModelPluginContext) => {
     init() {
       const { config } = ctx;
       if (config.get('disableDefaultSetters')) return;
-      const builtinSetters = require('@alilc/lowcode-engine-ext')?.setters;
-      if (builtinSetters) {
-        ctx.setters.registerSetter(builtinSetters);
-      }
+      // todo: 互相依赖
+      // const builtinSetters = require('@alilc/lowcode-engine-ext')?.setters;
+      // if (builtinSetters) {
+      //   ctx.setters.registerSetter(builtinSetters);
+      // }
     },
   };
 };
diff --git a/packages/engine/vite.config.ts b/packages/engine/vite.config.ts
index 928dbe8e1..15ada384b 100644
--- a/packages/engine/vite.config.ts
+++ b/packages/engine/vite.config.ts
@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'AliLowCodeEngine',
-      formats: ['es', 'cjs', 'iife'],
+      formats,
       // the proper extensions will be added
       fileName: 'engine',
     },
@@ -22,6 +24,7 @@ export default defineConfig({
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
+          '@alifd/next': 'Next'
         },
       },
     },
diff --git a/packages/plugin-command/vite.config.ts b/packages/plugin-command/vite.config.ts
index b3e95ea98..075a3277b 100644
--- a/packages/plugin-command/vite.config.ts
+++ b/packages/plugin-command/vite.config.ts
@@ -1,5 +1,8 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process';
+
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -7,7 +10,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodePluginCommand',
-      formats: ['es', 'cjs'],
+      formats,
       // the proper extensions will be added
       fileName: 'plugin-command',
     },
diff --git a/packages/plugin-designer/vite.config.ts b/packages/plugin-designer/vite.config.ts
index 164710982..98a14be1e 100644
--- a/packages/plugin-designer/vite.config.ts
+++ b/packages/plugin-designer/vite.config.ts
@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.tsx'),
       name: 'LowCodePluginDesigner',
-      formats: ['es', 'cjs'],
+      formats,
       // the proper extensions will be added
       fileName: 'plugin-designer',
     },
diff --git a/packages/plugin-outline-pane/vite.config.ts b/packages/plugin-outline-pane/vite.config.ts
index db04cdc45..5f6673d21 100644
--- a/packages/plugin-outline-pane/vite.config.ts
+++ b/packages/plugin-outline-pane/vite.config.ts
@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.tsx'),
       name: 'LowCodePluginOutlinePane',
-      formats: ['es', 'cjs'],
+      formats,
       // the proper extensions will be added
       fileName: 'plugin-outline-pane',
     },
diff --git a/packages/react-renderer/vite.config.ts b/packages/react-renderer/vite.config.ts
index 54a512669..7c00911b9 100644
--- a/packages/react-renderer/vite.config.ts
+++ b/packages/react-renderer/vite.config.ts
@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs', 'iife']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeReactRenderer',
-      formats: ['es', 'cjs', 'iife'],
+      formats,
       // the proper extensions will be added
       fileName: 'reactRenderer',
     },
diff --git a/packages/react-simulator-renderer/vite.config.ts b/packages/react-simulator-renderer/vite.config.ts
index 94a43d655..3c1fe3984 100644
--- a/packages/react-simulator-renderer/vite.config.ts
+++ b/packages/react-simulator-renderer/vite.config.ts
@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(devDependencies), ...Object.keys(peerDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs', 'iife']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeSimulatorReactRenderer',
-      formats: ['es', 'cjs', 'iife'],
+      formats,
       // the proper extensions will be added
       fileName: 'SimulatorReactRenderer',
     },
diff --git a/packages/renderer-core/vite.config.ts b/packages/renderer-core/vite.config.ts
index 50094da3a..77502af8e 100644
--- a/packages/renderer-core/vite.config.ts
+++ b/packages/renderer-core/vite.config.ts
@@ -1,13 +1,16 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 
+const formats = (env['FORMATS']?.split(',') ?? ['es']) as LibraryFormats[];
+
 export default defineConfig({
   build: {
     lib: {
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeRendererCore',
-      formats: ['es'],
+      formats,
       // the proper extensions will be added
       fileName: 'rendererCore',
     },
diff --git a/packages/renderer-router/vite.config.ts b/packages/renderer-router/vite.config.ts
index c8c6fc441..373e2e653 100644
--- a/packages/renderer-router/vite.config.ts
+++ b/packages/renderer-router/vite.config.ts
@@ -1,8 +1,10 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -10,7 +12,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeRuntimeRouter',
-      formats: ['es'],
+      formats,
       // the proper extensions will be added
       fileName: 'runtimeRouter',
     },
diff --git a/packages/types/vite.config.ts b/packages/types/vite.config.ts
index 4f3d97a95..037f31fe3 100644
--- a/packages/types/vite.config.ts
+++ b/packages/types/vite.config.ts
@@ -1,5 +1,8 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process';
+
+const formats = (env['FORMATS']?.split(',') ?? ['es']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -7,7 +10,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowcodeTypes',
-      formats: ['es'],
+      formats,
       // the proper extensions will be added
       fileName: 'lowcodeTypes',
     },
diff --git a/packages/utils/src/create-icon.tsx b/packages/utils/src/create-icon.tsx
index a5c94a915..1f36c656d 100644
--- a/packages/utils/src/create-icon.tsx
+++ b/packages/utils/src/create-icon.tsx
@@ -20,7 +20,7 @@ export function createIcon(
     if (URL_RE.test(icon)) {
       return createElement('img', {
         src: icon,
-        class: props?.className,
+        className: props?.className,
         ...props,
       });
     }
@@ -31,7 +31,7 @@ export function createIcon(
   }
   if (isReactComponent(icon)) {
     return createElement(icon, {
-      class: props?.className,
+      className: props?.className,
       ...props,
     });
   }
diff --git a/packages/utils/vite.config.ts b/packages/utils/vite.config.ts
index 883602f85..2be1f6a7e 100644
--- a/packages/utils/vite.config.ts
+++ b/packages/utils/vite.config.ts
@@ -1,17 +1,18 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
-import dts from 'vite-plugin-dts';
+import { env } from 'node:process';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
     lib: {
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeUtils',
-      formats: ['es'],
+      formats,
       fileName: 'lowCodeUtils',
     },
     rollupOptions: {
@@ -20,13 +21,5 @@ export default defineConfig({
   },
   plugins: [
     react(),
-    dts({
-      rollupTypes: true,
-      tsconfigPath: resolve(import.meta.dirname, 'tsconfig.declaration.json'),
-      compilerOptions: {
-        stripInternal: true,
-        paths: {},
-      },
-    }),
   ],
 });
diff --git a/playground/index.html b/playground/engine/index.html
similarity index 100%
rename from playground/index.html
rename to playground/engine/index.html
diff --git a/playground/engine/src/index.css b/playground/engine/src/index.css
new file mode 100644
index 000000000..7c1abc1e3
--- /dev/null
+++ b/playground/engine/src/index.css
@@ -0,0 +1,30 @@
+body {
+  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei;
+  font-size: 12px;
+}
+body * {
+  box-sizing: border-box;
+}
+
+body, #lce-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  text-rendering: optimizeLegibility;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-text-size-adjust: none;
+  -webkit-touch-callout: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+#engine {
+  width: 100%;
+  height: 100%;
+}
diff --git a/playground/engine/src/index.ts b/playground/engine/src/index.ts
new file mode 100644
index 000000000..728abfd0b
--- /dev/null
+++ b/playground/engine/src/index.ts
@@ -0,0 +1,12 @@
+import { init } from '@alilc/lowcode-engine';
+
+import './index.css';
+
+init(document.getElementById('app')!, {
+  locale: 'zh-CN',
+  enableCondition: true,
+  enableCanvasLock: true,
+  // 默认绑定变量
+  supportVariableGlobally: true,
+  requestHandlersMap: {},
+});
diff --git a/playground/package.json b/playground/package.json
index 1f0a6a28f..98bbc6b3b 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -2,7 +2,11 @@
   "name": "playground",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite"
+  },
+  "dependencies": {
+    "@alilc/lowcode-engine": "workspace:*"
   }
 }
diff --git a/playground/renderer/index.html b/playground/renderer/index.html
new file mode 100644
index 000000000..c27791f84
--- /dev/null
+++ b/playground/renderer/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./src/index.ts"></script>
+</body>
+</html>
diff --git a/playground/src/index.ts b/playground/renderer/src/index.ts
similarity index 100%
rename from playground/src/index.ts
rename to playground/renderer/src/index.ts
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
index a6294ffbd..60eb4078a 100644
--- a/playground/tsconfig.json
+++ b/playground/tsconfig.json
@@ -1,8 +1,6 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "paths": {
-      "@alilc/renderer-react": ["runtime/renderer-react"]
-    }
+    "outDir": "dist",
   }
 }
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
new file mode 100644
index 000000000..e47b0ea02
--- /dev/null
+++ b/playground/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'node:path'
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        engine: resolve(import.meta.dirname, 'engine/index.html'),
+        renderer: resolve(import.meta.dirname, 'renderer/index.html')
+      }
+    }
+  }
+})