diff --git a/src/docs/App.tsx b/src/docs/App.tsx
index 2276083..89f65e0 100644
--- a/src/docs/App.tsx
+++ b/src/docs/App.tsx
@@ -31,6 +31,7 @@ import { AccordionPage } from "./pages/components/AccordionPage";
 import { CodeEditorPage } from "./pages/components/CodeEditorPage";
 import { FeaturesPage } from "./pages/FeaturesPage";
 import { Toaster } from 'react-hot-toast';
+import { SchemaEditorPage } from "./pages/features/SchemaEditorPage";
 
 export const App = () => {
   const [currentPage, setCurrentPage] = React.useState(() => {
@@ -115,6 +116,8 @@ export const App = () => {
         return <AccordionPage />;
       case "code-editor":
         return <CodeEditorPage />;
+      case "schema-editor":
+        return <SchemaEditorPage />;
       default:
         return <GettingStartedPage />;
     }
diff --git a/src/docs/components/Navigation.tsx b/src/docs/components/Navigation.tsx
index 9167825..c27d28b 100644
--- a/src/docs/components/Navigation.tsx
+++ b/src/docs/components/Navigation.tsx
@@ -20,6 +20,12 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
         { id: "features", label: "Features" },
       ],
     },
+    {
+      title: "Features",
+      items: [
+        { id: "schema-editor", label: "Schema Editor" },
+      ],
+    },
     {
       title: "Layout",
       items: [
@@ -45,7 +51,7 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
         { id: "table", label: "Table" },
         { id: "tooltip", label: "Tooltip" },
         { id: "accordion", label: "Accordion" },
-        { id: "code-editor", label: "Code Editor" },
+        { id: "code-editor", label: "Code Editor" }
       ],
     },
     {
@@ -76,11 +82,14 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
 
   const [searchQuery, setSearchQuery] = React.useState("");
   
-  const filterItems = (items: Array<{ id: string; label: string }>) => {
+  const filterItems = (items: Array<{ id: string; label: string } | { title: string; href: string }>) => {
     if (!searchQuery) return items;
-    return items.filter(item => 
-      item.label.toLowerCase().includes(searchQuery.toLowerCase())
-    );
+    return items.filter(item => {
+      if ('label' in item) {
+        return item.label.toLowerCase().includes(searchQuery.toLowerCase());
+      }
+      return item.title.toLowerCase().includes(searchQuery.toLowerCase());
+    });
   };
 
   const renderSection = (section: typeof sections[0]) => {
@@ -89,21 +98,26 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
 
     return (
       <ul className="space-y-1 py-1">
-        {filteredItems.map((item) => (
-          <li key={item.id}>
-            <button
-              onClick={() => onNavigate(item.id)}
-              className={cn(
-                "text-sm w-full text-left px-3 py-1.5 rounded-md transition-all duration-200",
-                currentPage === item.id
-                  ? "bg-blue-500/10 text-blue-400 font-medium"
-                  : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
-              )}
-            >
-              {item.label}
-            </button>
-          </li>
-        ))}
+        {filteredItems.map((item) => {
+          const id = 'id' in item ? item.id : item.href;
+          const label = 'label' in item ? item.label : item.title;
+          
+          return (
+            <li key={id}>
+              <button
+                onClick={() => onNavigate(id)}
+                className={cn(
+                  "text-sm w-full text-left px-3 py-1.5 rounded-md transition-all duration-200",
+                  currentPage === id
+                    ? "bg-blue-500/10 text-blue-400 font-medium"
+                    : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
+                )}
+              >
+                {label}
+              </button>
+            </li>
+          );
+        })}
       </ul>
     );
   };
diff --git a/src/docs/pages/features/SchemaEditorPage.tsx b/src/docs/pages/features/SchemaEditorPage.tsx
index cbabde1..7b65dd7 100644
--- a/src/docs/pages/features/SchemaEditorPage.tsx
+++ b/src/docs/pages/features/SchemaEditorPage.tsx
@@ -1,123 +1,68 @@
 import * as React from "react";
 import { ComponentDemo } from "../../components/ComponentDemo";
 import { Title } from "../../../components/typography/Title";
-import { Card } from "../../../components/card/Card";
-import { Code } from "../../../components/typography/Code";
+import { PropsTable } from "../../components/PropsTable";
+import { SchemaEditor } from "../../../components/editor/SchemaEditor";
 
 export const SchemaEditorPage = () => {
+  const schemaEditorProps = [
+    {
+      name: "initialData",
+      type: "FormData",
+      description: "Initial schema data to populate the editor",
+    },
+    {
+      name: "onSubmit",
+      type: "(schema: JsonSchema) => void",
+      description: "Callback when schema is submitted",
+    },
+    {
+      name: "onValidationChange",
+      type: "(isValid: boolean) => void",
+      description: "Callback when validation status changes",
+    },
+  ];
+
   return (
     <div className="space-y-12">
       <div>
         <Title level={1}>Schema Editor</Title>
         <p className="mt-2 text-gray-400">
-          A powerful visual editor for creating and managing Verifiable Credential schemas.
+          A visual editor for creating and managing JSON schemas.
         </p>
       </div>
 
-      <Card>
-        <Card.Header>
-          <Title level={2}>Overview</Title>
-        </Card.Header>
-        <Card.Content>
-          <p className="text-gray-400">
-            The Schema Editor provides both a form-based and JSON editor interface for creating 
-            JSON-LD compatible credential templates. It includes real-time preview and validation 
-            to ensure your schemas are compatible with Verifiable Credentials standards.
-          </p>
-        </Card.Content>
-      </Card>
-
-      <Card>
-        <Card.Header>
-          <Title level={2}>Installation</Title>
-        </Card.Header>
-        <Card.Content>
-          <div className="space-y-2">
-            <p className="text-gray-400 mb-2">
-              The Schema Editor is included in the main package:
-            </p>
-            <Code>
-              npm install av1-c
-            </Code>
-          </div>
-        </Card.Content>
-      </Card>
-
-      <Card>
-        <Card.Header>
-          <Title level={2}>Basic Usage</Title>
-        </Card.Header>
-        <Card.Content>
+      <section>
+        <Title level={3}>Usage</Title>
+        <div className="mt-4">
           <ComponentDemo
             code={`import { SchemaEditor } from 'av1-c';
 
 function MySchemaBuilder() {
   return (
-    <div className="container mx-auto">
-      <SchemaEditor />
-    </div>
+    <SchemaEditor
+      onSubmit={(schema) => {
+        console.log('Schema created:', schema);
+      }}
+    />
   );
 }`}
-          />
-        </Card.Content>
-      </Card>
-
-      <Card>
-        <Card.Header>
-          <Title level={2}>Features</Title>
-        </Card.Header>
-        <Card.Content>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            <div className="space-y-4">
-              <h3 className="text-lg font-semibold text-gray-200">Field Types</h3>
-              <ul className="list-disc list-inside text-gray-400 space-y-2">
-                <li>String</li>
-                <li>Number</li>
-                <li>Boolean</li>
-                <li>Object</li>
-                <li>Array</li>
-              </ul>
-            </div>
-            <div className="space-y-4">
-              <h3 className="text-lg font-semibold text-gray-200">Capabilities</h3>
-              <ul className="list-disc list-inside text-gray-400 space-y-2">
-                <li>Visual form builder</li>
-                <li>JSON-LD context management</li>
-                <li>Live preview with normalization</li>
-                <li>Dark mode support</li>
-                <li>TypeScript integration</li>
-              </ul>
+          >
+            <div className="w-full">
+              <SchemaEditor 
+                onSubmit={(schema) => console.log('Schema created:', schema)}
+              />
             </div>
-          </div>
-        </Card.Content>
-      </Card>
+          </ComponentDemo>
+        </div>
+      </section>
 
-      <Card>
-        <Card.Header>
-          <Title level={2}>Advanced Features</Title>
-        </Card.Header>
-        <Card.Content>
-          <div className="space-y-4">
-            <h3 className="text-lg font-semibold text-gray-200">Field Properties</h3>
-            <ul className="list-disc list-inside text-gray-400 space-y-2">
-              <li>Nested objects and arrays</li>
-              <li>Field descriptions and comments</li>
-              <li>Required field validation</li>
-              <li>Example values</li>
-              <li>JSON-LD context mapping</li>
-            </ul>
-
-            <div className="mt-6 p-4 bg-blue-500/10 border border-blue-500/30 rounded">
-              <h4 className="text-blue-300 font-medium mb-2">Pro Tip</h4>
-              <p className="text-gray-400">
-                Use the JSON-LD normalization preview to ensure your credential template is compatible with 
-                Verifiable Credentials standards. The preview will show a green indicator when your schema 
-                is valid and can be properly normalized.
-              </p>
-            </div>
-          </div>
-        </Card.Content>
-      </Card>
+      <section>
+        <Title level={3}>Properties</Title>
+        <div className="mt-4">
+          <PropsTable props={schemaEditorProps} />
+        </div>
+      </section>
     </div>
   );
 }; 
\ No newline at end of file