diff --git a/packages/editor/package.json b/packages/editor/package.json
index 403f482d..6fdd5ed9 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -27,7 +27,6 @@
     "@emotion/styled": "^11",
     "@meta-ui/core": "^0.1.0",
     "@meta-ui/runtime": "^0.0.0",
-    "@sinclair/typebox": "^0.20.5",
     "codemirror": "^5.63.3",
     "framer-motion": "^4",
     "immer": "^9.0.6",
diff --git a/packages/editor/src/components/ComponentForm/ComponentForm.tsx b/packages/editor/src/components/ComponentForm/ComponentForm.tsx
index 52825639..a0e1760a 100644
--- a/packages/editor/src/components/ComponentForm/ComponentForm.tsx
+++ b/packages/editor/src/components/ComponentForm/ComponentForm.tsx
@@ -1,14 +1,17 @@
 import { FormControl, FormLabel, Input, Box } from '@chakra-ui/react';
 import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { Application } from '@meta-ui/core';
+import { parseType, parseTypeBox } from '@meta-ui/runtime';
 import _ from 'lodash';
 import React from 'react';
 import { eventBus } from '../../eventBus';
+import { registry } from '../../metaUI';
 import {
   ModifyComponentIdOperation,
   ModifyComponentPropertyOperation,
   ModifyTraitPropertyOperation,
 } from '../../operations/Operations';
+import { TSchema } from '@sinclair/typebox';
 
 type Props = { selectedId: string; app: Application };
 
@@ -59,22 +62,22 @@ const renderField = (properties: {
 };
 
 const changeCompId = (selectedId: string, value: string) => {
-  eventBus.send(
-    'operation',
-    new ModifyComponentIdOperation(selectedId, value)
-  );
+  eventBus.send('operation', new ModifyComponentIdOperation(selectedId, value));
 };
 
 export const ComponentForm: React.FC<Props> = props => {
   const { selectedId, app } = props;
 
   const selectedComponent = app.spec.components.find(c => c.id === selectedId);
-
   if (!selectedComponent) {
     return <div>cannot find component with id: {selectedId}</div>;
   }
-
-  const properties = selectedComponent.properties;
+  const { version, name } = parseType(selectedComponent.type);
+  const cImpl = registry.getComponent(version, name);
+  const properties =  Object.assign(
+    parseTypeBox(cImpl.spec.properties as TSchema),
+    selectedComponent.properties,
+  );
   const fields = Object.keys(properties || []).map(key => {
     const value = properties![key];
     return renderField({ key, value, fullKey: key, selectedId });
diff --git a/packages/editor/src/operations/AppModelManager.ts b/packages/editor/src/operations/AppModelManager.ts
index 3c502b75..d07e557b 100644
--- a/packages/editor/src/operations/AppModelManager.ts
+++ b/packages/editor/src/operations/AppModelManager.ts
@@ -24,16 +24,6 @@ function genSlotTrait(parentId: string, slot: string): ComponentTrait {
     },
   };
 }
-// TODO JSONSchema7Type
-const genInitProps = (init: Record<string, never>, properties: any, fullKey?: string) => {
-  for (const key of Object.keys(properties)) {
-    if (properties[key]?.type === 'object') {
-      genInitProps(init, properties[key].properties, fullKey ? `${fullKey}.${key}` : key);
-    } else {
-      _.set(init, fullKey ? `${fullKey}.${key}` : key, undefined);
-    }
-  }
-};
 
 function genComponent(
   type: string,
@@ -44,11 +34,7 @@ function genComponent(
   const { version, name } = parseType(type);
   const cImpl = registry.getComponent(version, name);
   const traits = parentId && slot ? [genSlotTrait(parentId, slot)] : [];
-
-  const initProps = {};
-  genInitProps(initProps, cImpl.spec.properties.properties);
-  const initProperties = Object.assign(initProps, cImpl.metadata.exampleProperties);
-
+  const initProperties = cImpl.metadata.exampleProperties;
   return {
     id,
     type: type,
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
index 4e0673cf..baa36152 100644
--- a/packages/runtime/package.json
+++ b/packages/runtime/package.json
@@ -20,7 +20,7 @@
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@meta-ui/core": "^0.1.0",
-    "@sinclair/typebox": "^0.19.2",
+    "@sinclair/typebox": "^0.20.5",
     "@vue-reactivity/watch": "^0.1.6",
     "@vue/reactivity": "^3.1.5",
     "copy-to-clipboard": "^3.3.1",
diff --git a/yarn.lock b/yarn.lock
index d96b48a9..24e878bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2804,15 +2804,10 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@sinclair/typebox@^0.19.2":
-  version "0.19.2"
-  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.19.2.tgz#3a526594d6f652ada78e6c00be84463ae48047e4"
-  integrity sha512-0U/RVPZQw1QxhrbKV0o281ZWI1Ve3osJnyEYnwOp3slydIQHyXumbJANJeNv9BqABDiHWlmzsxSVopPHMvt3Aw==
-
 "@sinclair/typebox@^0.20.5":
   version "0.20.5"
-  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.20.5.tgz#d5828bbb8237876d7937dd229e3dac71d1220771"
-  integrity sha512-WNiVFcS1rdz5KyEutpl3Wmp/AwSQHBUFTyJz7KqMLkpLhOXCj1dnvMytBM6uMS5OTwhwwq877T7EC4vDGrX5Eg==
+  resolved "https://registry.nlark.com/@sinclair/typebox/download/@sinclair/typebox-0.20.5.tgz#d5828bbb8237876d7937dd229e3dac71d1220771"
+  integrity sha1-1YKLu4I3h215N90inj2scdEiB3E=
 
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"