diff --git a/playground/src/configs/formDsl.ts b/playground/src/configs/formDsl.ts
new file mode 100644
index 00000000..c87cbcab
--- /dev/null
+++ b/playground/src/configs/formDsl.ts
@@ -0,0 +1,266 @@
+export default [
+  {
+    text: '文本',
+    name: 'text',
+    tooltip: (vm: any, { model }: any) => model.text,
+    extra: (vm: any, { model }: any) => `${model.text}extra`,
+    rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
+  },
+  {
+    type: 'checkbox',
+    text: 'checkbox',
+    name: 'option',
+    activeValue: 1,
+    inactiveValue: 0,
+    defaultValue: 1,
+  },
+  {
+    type: 'link',
+    displayText: '链接',
+    text: 'link',
+    name: 'link',
+    href: '',
+    tooltip: 'element-ui',
+  },
+  {
+    type: 'display',
+    text: '展示',
+    name: 'display',
+    initValue: 'display',
+    tooltip: 'hello',
+  },
+  {
+    type: 'number',
+    text: '计数器',
+    name: 'number',
+  },
+  {
+    type: 'textarea',
+    text: '输入框',
+    name: 'textarea1',
+  },
+  {
+    type: 'datetime',
+    text: '日期',
+    name: 'datetime',
+  },
+  {
+    type: 'switch',
+    text: '开关',
+    name: 'switch',
+    filter: 'number',
+    defaultValue: 1,
+  },
+  {
+    type: 'daterange',
+    text: '日期范围',
+    name: 'daterange',
+    // names: ['one', 'two'],
+  },
+  {
+    type: 'time',
+    text: '日期选择',
+    name: 'time',
+  },
+  {
+    type: 'colorPicker',
+    text: '取色器',
+    name: 'colorPicker',
+  },
+  {
+    type: 'checkbox-group',
+    text: '选项组',
+    name: 'checkGroup',
+    options: [
+      {
+        value: 1,
+        text: 'one',
+      },
+      {
+        value: 2,
+        text: 'two',
+      },
+    ],
+  },
+  {
+    type: 'radio-group',
+    text: '单选框',
+    name: 'radioGroup',
+    options: [
+      {
+        value: 1,
+        text: 'one',
+      },
+      {
+        value: 2,
+        text: 'two',
+      },
+    ],
+  },
+  {
+    type: 'cascader',
+    text: '级联选择',
+    placeholder: 'test',
+    name: 'cascader',
+    options: [
+      {
+        value: 1,
+        label: 'one',
+        children: [
+          {
+            value: 3,
+            label: 'three',
+            children: [
+              {
+                value: 8,
+                label: 'eight',
+              },
+            ],
+          },
+          {
+            value: 4,
+            label: 'four',
+          },
+          {
+            value: 6,
+            label: 'six',
+          },
+        ],
+      },
+      {
+        value: 2,
+        label: 'two',
+        children: [
+          {
+            value: 5,
+            label: 'five',
+          },
+          {
+            value: 7,
+            label: 'seven',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'dynamic-field',
+    name: 'dynamic-field',
+    dynamicKey: 'textarea',
+    text: '动态表单',
+    returnFields: () => [{ name: 'one', label: 'number', defaultValue: 'yes' }],
+  },
+  {
+    type: 'row',
+    items: [
+      {
+        type: 'date',
+        text: '日期',
+        name: 'date',
+      },
+      {
+        type: 'checkbox',
+        text: '多选框',
+        name: 'checkbox',
+        tooltip: '分组xxxxxxxxxxxx',
+        extra: 'extra',
+      },
+    ],
+  },
+  {
+    type: 'fieldset',
+    name: 'fieldset',
+    legend: '分组',
+    extra: 'extra',
+    checkbox: true,
+    expand: 'checkbox',
+    // schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
+    items: [
+      {
+        type: 'select',
+        text: '下拉选项',
+        name: 'select',
+        options: [
+          { text: '选项1', value: 1 },
+          { text: '选项2', value: 2 },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'table',
+    name: 'table',
+    defautSort: { prop: 'name', order: 'descending' },
+    extra: 'extra',
+    itemExtra: (vm: any, { model }: any): any => `${model.text}itemExtra`,
+    items: [
+      {
+        label: 'id',
+        name: 'id',
+        sortable: true,
+        tooltip: '分组xxxxxxxxxxxx',
+        rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
+      },
+      {
+        label: '名称',
+        name: 'name',
+      },
+    ],
+  },
+  {
+    type: 'groupList',
+    name: 'groupList',
+    extra: '分组xxxxxxxxxxxx',
+    itemExtra: (vm: any, { model }: any) => `${model.name}extra`,
+    items: [
+      {
+        text: 'id',
+        name: 'id',
+        rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
+      },
+      {
+        text: '名称',
+        name: 'name',
+      },
+    ],
+  },
+
+  {
+    type: 'panel',
+    title: 'panel',
+    extra: 'panel',
+    schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
+    items: [
+      {
+        text: '名称',
+        name: 'name',
+      },
+    ],
+  },
+
+  {
+    type: 'step',
+    items: [
+      {
+        name: 'step1',
+        title: 'step1',
+        items: [
+          {
+            text: '名称',
+            name: 'name',
+          },
+        ],
+      },
+      {
+        name: 'step2',
+        title: 'step2',
+        items: [
+          {
+            text: '名称2',
+            name: 'name',
+          },
+        ],
+      },
+    ],
+  },
+];
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 7a9719ff..3a9dc466 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -105,6 +105,11 @@ const menu: MenuBarData = {
       text: 'Form Playground',
       handler: () => router.push('form'),
     },
+    {
+      type: 'button',
+      text: 'Form Editor Playground',
+      handler: () => router.push('form-editor'),
+    },
     {
       type: 'button',
       text: 'Table Playground',
diff --git a/playground/src/pages/Form.vue b/playground/src/pages/Form.vue
index 4eb7c0e9..01311227 100644
--- a/playground/src/pages/Form.vue
+++ b/playground/src/pages/Form.vue
@@ -35,6 +35,7 @@ import { MenuButton } from '@tmagic/editor';
 import { MForm } from '@tmagic/form';
 
 import NavMenu from '../components/NavMenu.vue';
+import formDsl from '../configs/formDsl';
 
 const router = useRouter();
 
@@ -94,272 +95,7 @@ const lastVersion = ref({
   colorPicker: '#000000',
 });
 
-const config = ref([
-  {
-    text: '文本',
-    name: 'text',
-    tooltip: (vm: any, { model }: any) => model.text,
-    extra: (vm: any, { model }: any) => `${model.text}extra`,
-    rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
-  },
-  {
-    type: 'checkbox',
-    text: 'checkbox',
-    name: 'option',
-    activeValue: 1,
-    inactiveValue: 0,
-    defaultValue: 1,
-  },
-  {
-    type: 'link',
-    displayText: '链接',
-    text: 'link',
-    name: 'link',
-    href: '',
-    tooltip: 'element-ui',
-  },
-  {
-    type: 'display',
-    text: '展示',
-    name: 'display',
-    initValue: 'display',
-    tooltip: 'hello',
-  },
-  {
-    type: 'number',
-    text: '计数器',
-    name: 'number',
-  },
-  {
-    type: 'textarea',
-    text: '输入框',
-    name: 'textarea1',
-  },
-  {
-    type: 'datetime',
-    text: '日期',
-    name: 'datetime',
-  },
-  {
-    type: 'switch',
-    text: '开关',
-    name: 'switch',
-    filter: 'number',
-    defaultValue: 1,
-  },
-  {
-    type: 'daterange',
-    text: '日期范围',
-    name: 'daterange',
-    // names: ['one', 'two'],
-  },
-  {
-    type: 'time',
-    text: '日期选择',
-    name: 'time',
-  },
-  {
-    type: 'colorPicker',
-    text: '取色器',
-    name: 'colorPicker',
-  },
-  {
-    type: 'checkbox-group',
-    text: '选项组',
-    name: 'checkGroup',
-    options: [
-      {
-        value: 1,
-        text: 'one',
-      },
-      {
-        value: 2,
-        text: 'two',
-      },
-    ],
-  },
-  {
-    type: 'radio-group',
-    text: '单选框',
-    name: 'radioGroup',
-    options: [
-      {
-        value: 1,
-        text: 'one',
-      },
-      {
-        value: 2,
-        text: 'two',
-      },
-    ],
-  },
-  {
-    type: 'cascader',
-    text: '级联选择',
-    placeholder: 'test',
-    name: 'cascader',
-    options: [
-      {
-        value: 1,
-        label: 'one',
-        children: [
-          {
-            value: 3,
-            label: 'three',
-            children: [
-              {
-                value: 8,
-                label: 'eight',
-              },
-            ],
-          },
-          {
-            value: 4,
-            label: 'four',
-          },
-          {
-            value: 6,
-            label: 'six',
-          },
-        ],
-      },
-      {
-        value: 2,
-        label: 'two',
-        children: [
-          {
-            value: 5,
-            label: 'five',
-          },
-          {
-            value: 7,
-            label: 'seven',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    type: 'dynamic-field',
-    name: 'dynamic-field',
-    dynamicKey: 'textarea',
-    text: '动态表单',
-    returnFields: () => [{ name: 'one', label: 'number', defaultValue: 'yes' }],
-  },
-  {
-    type: 'row',
-    items: [
-      {
-        type: 'date',
-        text: '日期',
-        name: 'date',
-      },
-      {
-        type: 'checkbox',
-        text: '多选框',
-        name: 'checkbox',
-        tooltip: '分组xxxxxxxxxxxx',
-        extra: 'extra',
-      },
-    ],
-  },
-  {
-    type: 'fieldset',
-    name: 'fieldset',
-    legend: '分组',
-    extra: 'extra',
-    checkbox: true,
-    expand: 'checkbox',
-    // schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
-    items: [
-      {
-        type: 'select',
-        text: '下拉选项',
-        name: 'select',
-        options: [
-          { text: '选项1', value: 1 },
-          { text: '选项2', value: 2 },
-        ],
-      },
-    ],
-  },
-  {
-    type: 'table',
-    name: 'table',
-    defautSort: { prop: 'name', order: 'descending' },
-    extra: 'extra',
-    itemExtra: (vm: any, { model }: any): any => `${model.text}itemExtra`,
-    items: [
-      {
-        label: 'id',
-        name: 'id',
-        sortable: true,
-        tooltip: '分组xxxxxxxxxxxx',
-        rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
-      },
-      {
-        label: '名称',
-        name: 'name',
-      },
-    ],
-  },
-  {
-    type: 'groupList',
-    name: 'groupList',
-    extra: '分组xxxxxxxxxxxx',
-    itemExtra: (vm: any, { model }: any) => `${model.name}extra`,
-    items: [
-      {
-        text: 'id',
-        name: 'id',
-        rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
-      },
-      {
-        text: '名称',
-        name: 'name',
-      },
-    ],
-  },
-
-  {
-    type: 'panel',
-    title: 'panel',
-    extra: 'panel',
-    schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
-    items: [
-      {
-        text: '名称',
-        name: 'name',
-      },
-    ],
-  },
-
-  {
-    type: 'step',
-    items: [
-      {
-        name: 'step1',
-        title: 'step1',
-        items: [
-          {
-            text: '名称',
-            name: 'name',
-          },
-        ],
-      },
-      {
-        name: 'step2',
-        title: 'step2',
-        items: [
-          {
-            text: '名称2',
-            name: 'name',
-          },
-        ],
-      },
-    ],
-  },
-]);
+const config = ref(formDsl);
 
 const initValue = ref({
   text: '文本',
@@ -379,6 +115,11 @@ const menu: MenuButton[] = [
     text: 'Editor Playground',
     handler: () => router.push('/'),
   },
+  {
+    type: 'button',
+    text: 'Form Editor Playground',
+    handler: () => router.push('form-editor'),
+  },
   {
     type: 'button',
     text: 'Table Playground',
diff --git a/playground/src/pages/FormEditor.vue b/playground/src/pages/FormEditor.vue
new file mode 100644
index 00000000..bff8cf51
--- /dev/null
+++ b/playground/src/pages/FormEditor.vue
@@ -0,0 +1,166 @@
+<template>
+  <TMagicEditor
+    v-model="config"
+    :menu="menu"
+    :sidebar="sidebar"
+    :component-group-list="componentGroupList"
+    :render-type="RenderType.NATIVE"
+    :render="render"
+    :can-select="canSelect"
+    :update-drag-el="updateDragEl"
+    :stage-rect="{ width: 'calc(100% - 70px)', height: '100%' }"
+  >
+    <template #layer-node-label="{ data }">
+      {{ data.text || data.name || 'container' }}
+    </template>
+  </TMagicEditor>
+</template>
+
+<script setup lang="tsx">
+import { createApp, nextTick, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { Document } from '@element-plus/icons-vue';
+
+import { ComponentGroup, MenuBarData, SideBarData, TMagicEditor, traverseNode, uiService } from '@tmagic/editor';
+import MagicForm, { MForm } from '@tmagic/form';
+import { MApp, MNode, NodeType } from '@tmagic/schema';
+import { getOffset, RenderType, RuntimeWindow, TargetElement } from '@tmagic/stage';
+import { guid } from '@tmagic/utils';
+
+import formDsl from '../configs/formDsl';
+
+formDsl.forEach((item) => {
+  traverseNode<any>(item, (item) => {
+    item.id = `${item.type}_${guid()}`;
+    item.style = {
+      left: 0,
+      top: 0,
+      position: 'relative',
+    };
+  });
+});
+
+const config = ref<MApp>({
+  type: NodeType.ROOT,
+  id: 'app_form',
+  items: [
+    {
+      type: NodeType.PAGE,
+      id: 'page_form',
+      layout: 'relative',
+      items: formDsl as unknown as MNode[],
+    },
+  ],
+});
+
+const render = () => {
+  const el = globalThis.document.createElement('div');
+  el.style.position = 'relative';
+  createApp(MForm, {
+    config: formDsl,
+    initValues: {},
+  })
+    .use(MagicForm)
+    .mount(el);
+
+  nextTick(() => {
+    (globalThis as unknown as RuntimeWindow).magic.onPageElUpdate(el);
+    uiService.set('showRule', false);
+  });
+
+  return el;
+};
+
+const updateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => {
+  const { left, top } = getOffset(container);
+  el.style.left = `${globalThis.parseFloat(el.style.left) - left}px`;
+  el.style.top = `${globalThis.parseFloat(el.style.top) - top}px`;
+};
+
+const componentGroupList: ComponentGroup[] = [
+  {
+    title: '容器',
+    items: [
+      {
+        text: '普通容器',
+        type: 'container',
+        data: {
+          items: [],
+        },
+      },
+      {
+        text: '表格',
+        type: 'table',
+        data: {
+          items: [],
+        },
+      },
+      {
+        text: '组列表',
+        type: 'group-list',
+        data: {
+          items: [],
+        },
+      },
+      {
+        text: '面板',
+        type: 'panel',
+        data: {
+          items: [],
+        },
+      },
+      {
+        text: '行',
+        type: 'row',
+        data: {
+          items: [],
+        },
+      },
+    ],
+  },
+];
+
+const router = useRouter();
+
+const menu: MenuBarData = {
+  left: [
+    {
+      type: 'text',
+      text: '魔方',
+    },
+  ],
+  center: ['delete', 'undo', 'redo', 'zoom'],
+  right: [
+    {
+      type: 'button',
+      text: 'Editor Playground',
+      handler: () => router.push('/'),
+    },
+    {
+      type: 'button',
+      text: 'Form Playground',
+      handler: () => router.push('form'),
+    },
+    {
+      type: 'button',
+      text: 'Table Playground',
+      handler: () => router.push('table'),
+    },
+    '/',
+    {
+      type: 'button',
+      icon: Document,
+      tooltip: '源码',
+      handler: (service) => service?.uiService.set('showSrc', !service?.uiService.get('showSrc')),
+    },
+  ],
+};
+
+const sidebar: SideBarData = {
+  type: 'tabs',
+  status: '组件',
+  items: ['component-list', 'layer'],
+};
+
+const canSelect = (el: HTMLElement) => el.classList.contains('m-form-container');
+</script>
diff --git a/playground/src/pages/Table.vue b/playground/src/pages/Table.vue
index 0d0c3feb..65bec30b 100644
--- a/playground/src/pages/Table.vue
+++ b/playground/src/pages/Table.vue
@@ -60,6 +60,11 @@ const menu: MenuButton[] = [
     text: 'Editor Playground',
     handler: () => router.push('/'),
   },
+  {
+    type: 'button',
+    text: 'Form Editor Playground',
+    handler: () => router.push('form-editor'),
+  },
   {
     type: 'button',
     text: 'Form Playground',
diff --git a/playground/src/route.ts b/playground/src/route.ts
index 32e00354..40861d02 100644
--- a/playground/src/route.ts
+++ b/playground/src/route.ts
@@ -20,11 +20,13 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 
 import Editor from './pages/Editor.vue';
 import Form from './pages/Form.vue';
+import FormEditor from './pages/FormEditor.vue';
 import Table from './pages/Table.vue';
 
 const routes = [
   { path: '/', component: Editor },
   { path: '/form', component: Form },
+  { path: '/form-editor', component: FormEditor },
   { path: '/table', component: Table },
 ];