objectstack-ai · huangyiirene · Jan 13, 2026 · Jan 13, 2026 · Jan 13, 2026 · Jan 13, 2026
diff --git a/README.md b/README.md
@@ -207,5 +207,3 @@ Licensed under the [MIT License](https://www.google.com/search?q=LICENSE).
 <div align="center">
 <sub>Built with ❤️ by the Object Ecosystem Team.</sub>
 </div>
-
-```
diff --git a/apps/playground/.gitignore b/apps/playground/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/playground/README.md b/apps/playground/README.md
@@ -0,0 +1,69 @@
+# Object UI Playground
+
+A live, interactive playground to showcase Object UI's schema-driven rendering capabilities.
+
+## Features
+
+- **Split View Editor**: JSON editor with syntax validation on the left, live preview on the right
+- **Real-time Rendering**: See your changes instantly as you edit JSON schemas
+- **Example Gallery**: Curated examples organized by category (Primitives, Layouts, Forms)
+- **Responsive Preview**: Toggle between desktop, tablet, and mobile viewports
+- **Copy Schema**: One-click copy to clipboard for easy integration
+- **Error Highlighting**: Clear JSON syntax error messages
+
+## Examples Included
+
+### Primitives
+- Simple page layouts
+- Input component states (required, disabled, email)
+- Button variants (destructive, outline, ghost, etc.)
+
+### Layouts
+- Responsive grid layouts
+- Analytics dashboard with KPI cards
+- Tabs component demonstration
+
+### Forms
+- User registration form with various input types
+- Grid-based form layouts
+
+## Running the Playground
+
+From the monorepo root:
+
+```bash
+pnpm install
+pnpm --filter @apps/playground dev
+```
+
+Or from this directory:
+
+```bash
+pnpm install
+pnpm dev
+```
+
+The playground will be available at `http://localhost:5174`
+
+## Building for Production
+
+```bash
+pnpm build
+```
+
+## Purpose
+
+This playground serves as:
+
+1. **Product Demo**: Show what Object UI can do without any backend
+2. **Learning Tool**: Help developers understand schema structure
+3. **Testing Ground**: Experiment with different configurations
+4. **Documentation**: Live, interactive examples are better than static code samples
+
+## Key Selling Points Demonstrated
+
+- ✅ **Tailwind Native**: Edit `className` properties and see instant results
+- ✅ **Schema-Driven**: Everything is pure JSON - no JSX needed
+- ✅ **Responsive**: Built-in responsive grid layouts
+- ✅ **Complete**: From simple buttons to complex dashboards
+- ✅ **Standalone**: No backend required - works with any data source
diff --git a/apps/playground/index.html b/apps/playground/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Object UI - Live Playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@apps/playground",
+  "private": true,
+  "license": "MIT",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@object-ui/components": "workspace:*",
+    "@object-ui/core": "workspace:*",
+    "@object-ui/react": "workspace:*",
+    "lucide-react": "^0.469.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4"
+  }
+}
diff --git a/apps/playground/postcss.config.js b/apps/playground/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/apps/playground/src/App.tsx b/apps/playground/src/App.tsx
@@ -0,0 +1,192 @@
+import { useState, useEffect } from 'react';
+import { SchemaRenderer } from '@object-ui/react';
+import '@object-ui/components';
+import { examples, exampleCategories, ExampleKey } from './data/examples';
+import { Monitor, Tablet, Smartphone, Copy, Check, Code2 } from 'lucide-react';
+
+type ViewportSize = 'desktop' | 'tablet' | 'mobile';
+
+export default function Playground() {
+  const [selectedExample, setSelectedExample] = useState<ExampleKey>('dashboard');
+  const [code, setCode] = useState(examples['dashboard']);
+  const [schema, setSchema] = useState<any>(null);
+  const [jsonError, setJsonError] = useState<string | null>(null);
+  const [viewportSize, setViewportSize] = useState<ViewportSize>('desktop');
+  const [copied, setCopied] = useState(false);
+
+  // Real-time JSON parsing
+  useEffect(() => {
+    try {
+      const parsed = JSON.parse(code);
+      setSchema(parsed);
+      setJsonError(null);
+    } catch (e) {
+      setJsonError((e as Error).message);
+      // Keep previous schema on error
+    }
+  }, [code]);
+
+  const handleExampleChange = (key: ExampleKey) => {
+    setSelectedExample(key);
+    setCode(examples[key]);
+  };
+
+  const handleCopySchema = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  const viewportStyles: Record<ViewportSize, string> = {
+    desktop: 'w-full',
+    tablet: 'max-w-3xl mx-auto',
+    mobile: 'max-w-md mx-auto'
+  };
+
+  return (
+    <div className="flex h-screen w-screen bg-background">
+      {/* 1. Sidebar: Example Selector */}
+      <aside className="w-64 bg-muted/30 border-r overflow-auto">
+        <div className="p-6 border-b">
+          <h1 className="text-xl font-bold">Object UI</h1>
+          <p className="text-sm text-muted-foreground mt-1">Live Playground</p>
+        </div>
+
+        <div className="p-4 space-y-6">
+          {Object.entries(exampleCategories).map(([category, keys]) => (
+            <div key={category}>
+              <h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+                {category}
+              </h2>
+              <div className="space-y-1">
+                {keys.map((key) => (
+                  <button
+                    key={key}
+                    onClick={() => handleExampleChange(key as ExampleKey)}
+                    className={`
+                      block w-full text-left px-3 py-2 rounded-md text-sm transition-colors
+                      ${key === selectedExample 
+                        ? 'bg-primary text-primary-foreground font-medium' 
+                        : 'hover:bg-muted text-foreground'
+                      }
+                    `}
+                  >
+                    {key.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </aside>
+
+      {/* 2. Middle: Code Editor */}
+      <div className="w-1/2 h-full border-r flex flex-col">
+        <div className="border-b px-4 py-3 bg-muted/20 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Code2 className="h-4 w-4 text-muted-foreground" />
+            <h2 className="text-sm font-semibold">JSON Schema</h2>
+          </div>
+          <button
+            onClick={handleCopySchema}
+            className="flex items-center gap-2 px-3 py-1.5 text-xs rounded-md bg-background hover:bg-muted transition-colors border"
+          >
+            {copied ? (
+              <>
+                <Check className="h-3 w-3" />
+                Copied!
+              </>
+            ) : (
+              <>
+                <Copy className="h-3 w-3" />
+                Copy Schema
+              </>
+            )}
+          </button>
+        </div>
+
+        {jsonError && (
+          <div className="px-4 py-2 bg-red-50 border-b border-red-200 text-red-700 text-sm">
+            <strong>JSON Error:</strong> {jsonError}
+          </div>
+        )}
+
+        <div className="flex-1 overflow-hidden">
+          <textarea
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            className="w-full h-full p-4 font-mono text-sm resize-none focus:outline-none border-0 bg-background"
+            spellCheck={false}
+            style={{ 
+              tabSize: 2,
+              lineHeight: '1.6'
+            }}
+          />
+        </div>
+      </div>
+
+      {/* 3. Right: Live Preview */}
+      <div className="w-1/2 h-full flex flex-col bg-muted/10">
+        <div className="border-b px-4 py-3 bg-muted/20 flex items-center justify-between">
+          <h2 className="text-sm font-semibold">Preview</h2>
+
+          {/* Viewport Size Toggles */}
+          <div className="flex items-center gap-1 bg-background rounded-md p-1 border">
+            <button
+              onClick={() => setViewportSize('desktop')}
+              className={`p-1.5 rounded transition-colors ${
+                viewportSize === 'desktop' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+              }`}
+              title="Desktop View"
+            >
+              <Monitor className="h-4 w-4" />
+            </button>
+            <button
+              onClick={() => setViewportSize('tablet')}
+              className={`p-1.5 rounded transition-colors ${
+                viewportSize === 'tablet' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+              }`}
+              title="Tablet View"
+            >
+              <Tablet className="h-4 w-4" />
+            </button>
+            <button
+              onClick={() => setViewportSize('mobile')}
+              className={`p-1.5 rounded transition-colors ${
+                viewportSize === 'mobile' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+              }`}
+              title="Mobile View"
+            >
+              <Smartphone className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-auto p-8">
+          <div className={`${viewportStyles[viewportSize]} transition-all duration-300`}>
+            <div className="rounded-lg border shadow-sm bg-background p-6">
+              {schema && !jsonError ? (
+                <SchemaRenderer schema={schema} />
+              ) : (
+                <div className="text-center py-12 text-muted-foreground">
+                  {jsonError ? (
+                    <div className="space-y-2">
+                      <p className="text-red-500 font-semibold">Invalid JSON</p>
+                      <p className="text-sm">Fix the syntax error to see the preview</p>
+                    </div>
+                  ) : (
+                    <p>Select an example to get started</p>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up @@
     <div align="center">
     <sub>Built with ❤️ by the Object Ecosystem Team.</sub>
     </div>
-    ```