diff --git a/audit-report.json b/audit-report.json
index 01d8ecb..2fe9fba 100644
--- a/audit-report.json
+++ b/audit-report.json
@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-21T04:20:39.255Z",
+  "timestamp": "2026-01-21T04:22:09.135Z",
   "issues": [],
   "stats": {
     "totalJsonFiles": 337,
diff --git a/json-components-registry.json b/json-components-registry.json
index f89f61e..5f38a5b 100644
--- a/json-components-registry.json
+++ b/json-components-registry.json
@@ -4761,11 +4761,41 @@
       "status": "supported",
       "source": "components",
       "jsonCompatible": true
+    },
+    {
+      "type": "ComponentTreeDemoPage",
+      "name": "Component Tree Demo Page",
+      "category": "page",
+      "canHaveChildren": true,
+      "description": "Demo page for component tree visualization",
+      "status": "supported",
+      "source": "components",
+      "jsonCompatible": true
+    },
+    {
+      "type": "JsonFlaskDesigner",
+      "name": "JSON Flask Designer",
+      "category": "page",
+      "canHaveChildren": true,
+      "description": "Designer for Flask application configuration using JSON",
+      "status": "supported",
+      "source": "components",
+      "jsonCompatible": true
+    },
+    {
+      "type": "JsonStyleDesigner",
+      "name": "JSON Style Designer",
+      "category": "page",
+      "canHaveChildren": true,
+      "description": "Designer for styling configuration using JSON",
+      "status": "supported",
+      "source": "components",
+      "jsonCompatible": true
     }
   ],
   "statistics": {
-    "total": 373,
-    "jsonCompatible": 223,
+    "total": 376,
+    "jsonCompatible": 226,
     "coverage": "60%"
   }
 }
diff --git a/src/components/json-definitions/component-tree-demo-page.json b/src/components/json-definitions/component-tree-demo-page.json
new file mode 100644
index 0000000..8bd15ca
--- /dev/null
+++ b/src/components/json-definitions/component-tree-demo-page.json
@@ -0,0 +1,16 @@
+{
+  "id": "component-tree-demo-page",
+  "type": "div",
+  "bindings": {
+    "className": {
+      "source": null,
+      "transform": "'h-full'"
+    }
+  },
+  "children": [
+    {
+      "id": "component-tree-viewer",
+      "type": "ComponentTreeViewer"
+    }
+  ]
+}
diff --git a/src/components/json-definitions/json-style-designer.json b/src/components/json-definitions/json-style-designer.json
new file mode 100644
index 0000000..371fe6a
--- /dev/null
+++ b/src/components/json-definitions/json-style-designer.json
@@ -0,0 +1,7 @@
+{
+  "id": "json-style-designer",
+  "type": "JSONPageRenderer",
+  "props": {
+    "schema": "styleDesignerConfig"
+  }
+}
diff --git a/src/lib/json-ui/interfaces/component-tree-demo-page.ts b/src/lib/json-ui/interfaces/component-tree-demo-page.ts
new file mode 100644
index 0000000..37b1b48
--- /dev/null
+++ b/src/lib/json-ui/interfaces/component-tree-demo-page.ts
@@ -0,0 +1 @@
+export interface ComponentTreeDemoPageProps {}
diff --git a/src/lib/json-ui/interfaces/index.ts b/src/lib/json-ui/interfaces/index.ts
index 6b7352f..734e880 100644
--- a/src/lib/json-ui/interfaces/index.ts
+++ b/src/lib/json-ui/interfaces/index.ts
@@ -206,6 +206,9 @@ export * from './error-panel'
 export * from './preview-dialog'
 export * from './not-found-page'
 export * from './global-search'
+export * from './json-flask-designer'
+export * from './json-style-designer'
+export * from './component-tree-demo-page'
 export * from './atomic-component-showcase'
 export * from './json-ui-showcase-page'
 export * from './json-demo-page'
diff --git a/src/lib/json-ui/interfaces/json-flask-designer.ts b/src/lib/json-ui/interfaces/json-flask-designer.ts
new file mode 100644
index 0000000..334a53b
--- /dev/null
+++ b/src/lib/json-ui/interfaces/json-flask-designer.ts
@@ -0,0 +1,3 @@
+export interface JSONFlaskDesignerProps {
+  schema?: any
+}
diff --git a/src/lib/json-ui/interfaces/json-style-designer.ts b/src/lib/json-ui/interfaces/json-style-designer.ts
new file mode 100644
index 0000000..2389e4e
--- /dev/null
+++ b/src/lib/json-ui/interfaces/json-style-designer.ts
@@ -0,0 +1,3 @@
+export interface JSONStyleDesignerProps {
+  schema?: any
+}
diff --git a/src/lib/json-ui/json-components.ts b/src/lib/json-ui/json-components.ts
index 8a57ba0..9d05f7d 100644
--- a/src/lib/json-ui/json-components.ts
+++ b/src/lib/json-ui/json-components.ts
@@ -224,6 +224,9 @@ import type {
   NotFoundPageProps,
   GlobalSearchProps,
   FileExplorerProps,
+  JSONFlaskDesignerProps,
+  JSONStyleDesignerProps,
+  ComponentTreeDemoPageProps,
   AtomicComponentShowcaseProps,
   JSONUIShowcasePageProps,
   JSONDemoPageProps,
@@ -453,6 +456,9 @@ import previewDialogDef from '@/components/json-definitions/preview-dialog.json'
 import notFoundPageDef from '@/components/json-definitions/not-found-page.json'
 import globalSearchDef from '@/components/json-definitions/global-search.json'
 import fileExplorerDef from '@/components/json-definitions/file-explorer.json'
+import jsonFlaskDesignerDef from '@/components/json-definitions/json-flask-designer.json'
+import jsonStyleDesignerDef from '@/components/json-definitions/json-style-designer.json'
+import componentTreeDemoPageDef from '@/components/json-definitions/component-tree-demo-page.json'
 import atomicComponentShowcaseDef from '@/components/json-definitions/atomic-component-showcase.json'
 import jsonUiShowcasePageDef from '@/components/json-definitions/json-ui-showcase-page.json'
 import jsonDemoPageDef from '@/components/json-definitions/json-demo-page.json'
@@ -827,6 +833,9 @@ export const PreviewDialog = createJsonComponent<PreviewDialogProps>(previewDial
 export const NotFoundPage = createJsonComponent<NotFoundPageProps>(notFoundPageDef)
 export const GlobalSearch = createJsonComponent<GlobalSearchProps>(globalSearchDef)
 export const FileExplorer = createJsonComponent<FileExplorerProps>(fileExplorerDef)
+export const JSONFlaskDesigner = createJsonComponent<JSONFlaskDesignerProps>(jsonFlaskDesignerDef)
+export const JSONStyleDesigner = createJsonComponent<JSONStyleDesignerProps>(jsonStyleDesignerDef)
+export const ComponentTreeDemoPage = createJsonComponent<ComponentTreeDemoPageProps>(componentTreeDemoPageDef)
 export const AtomicComponentShowcase = createJsonComponent<AtomicComponentShowcaseProps>(atomicComponentShowcaseDef)
 export const JSONUIShowcasePage = createJsonComponent<JSONUIShowcasePageProps>(jsonUiShowcasePageDef)
 export const JSONDemoPage = createJsonComponent<JSONDemoPageProps>(jsonDemoPageDef)