Deploy Studio to official website at /studio/

.github/workflows/deploy-docs.yml

@@ -6,6 +6,8 @@ on:
  - main
  paths:
  - 'docs/**'
+ - 'apps/playground/**'
+ - 'packages/**'
  - '.github/workflows/deploy-docs.yml'
  workflow_dispatch:
 
@@ -56,6 +58,16 @@ jobs:
  - name: Build documentation
  run: pnpm docs:build
 
+ - name: Build Studio (Playground)
+ run: pnpm --filter @apps/playground build
+ env:
+ NODE_ENV: production
+
+ - name: Copy Studio to docs dist
+ run: |
+ mkdir -p docs/.vitepress/dist/studio
+ cp -r apps/playground/dist/* docs/.vitepress/dist/studio/
+
  - name: Setup Pages
  uses: actions/configure-pages@v4
 

README.md

@@ -8,6 +8,13 @@
  [![TypeScript](https://img.shields.io/badge/written%20in-TypeScript-3178C6.svg)](https://www.typescriptlang.org/)
  [![NPM](https://img.shields.io/npm/v/@object-ui/react.svg)](https://www.npmjs.com/package/@object-ui/react)
 
+---
+
+## 🎨 Try It Online
+
+**[Launch Object UI Studio →](https://www.objectui.org/studio/)**
+
+Experience our interactive visual editor with drag-and-drop design, live preview, and instant JSON export. Perfect for prototyping and learning!
 
 ---
 

apps/playground/vite.config.ts

@@ -5,6 +5,7 @@ import path from 'path';
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [react()],
+ base: process.env.NODE_ENV === 'production' ? '/studio/' : '/',
  resolve: {
  alias: {
  '@object-ui/components': path.resolve(__dirname, '../../packages/components/src'),
@@ -15,5 +16,9 @@ export default defineConfig({
  },
  server: {
  port: 5174
+ },
+ build: {
+ outDir: 'dist',
+ emptyOutDir: true,
  }
 });

docs/.vitepress/config.mts

@@ -13,6 +13,7 @@ export default defineConfig({
 
  nav: [
  { text: 'Home', link: '/' },
+ { text: 'Studio', link: '/studio/', target: '_self' },
  { text: 'Guide', link: '/guide/introduction' },
  { text: 'Roadmap', link: '/ROADMAP' },
  { text: 'Protocol', link: '/protocol/overview' },
@@ -26,7 +27,8 @@ export default defineConfig({
  items: [
  { text: 'Introduction', link: '/guide/introduction' },
  { text: 'Quick Start', link: '/guide/quick-start' },
- { text: 'Installation', link: '/guide/installation' }
+ { text: 'Installation', link: '/guide/installation' },
+ { text: 'Visual Studio', link: '/guide/studio' }
  ]
  },
  {

docs/guide/studio.md

@@ -0,0 +1,192 @@
+# Object UI Studio
+
+The **Object UI Studio** is a powerful, interactive visual editor that allows you to design and prototype user interfaces without writing code. It combines a drag-and-drop designer, live preview, and instant JSON export capabilities.
+
+## 🚀 Quick Access
+
+<div class="tip custom-block">
+ <p><strong>Try it now!</strong></p>
+ <p>Access the Studio at: <a href="/studio/" target="_blank">/studio/</a></p>
+</div>
+
+## Features
+
+### 🎨 Visual Designer
+- **Drag-and-Drop**: Drag components from the palette directly onto the canvas
+- **Smart Positioning**: Intelligent drop zone detection for precise component placement
+- **Live Preview**: See your changes in real-time as you design
+- **Component Search**: Quickly find the components you need
+
+### 📝 Code Editor
+- **JSON Editor**: Edit schemas directly with syntax highlighting
+- **Split View**: Code on the left, preview on the right
+- **Syntax Validation**: Real-time JSON validation with error messages
+- **Auto-format**: Beautiful, readable JSON output
+
+### 📱 Responsive Preview
+- **Multiple Viewports**: Test your design in Desktop, Tablet, and Mobile views
+- **Device Frames**: Realistic device mockups for mobile and tablet
+- **Instant Switching**: Toggle between viewports with one click
+
+### ⚡ Productivity Features
+- **Undo/Redo**: Full history management (`Ctrl+Z` / `Ctrl+Y`)
+- **Copy/Paste**: Duplicate components easily (`Ctrl+C` / `Ctrl+V`)
+- **Export JSON**: Download your schema as a `.json` file
+- **Copy to Clipboard**: One-click copy for easy integration
+
+## Getting Started
+
+### 1. Choose a Template
+
+When you open the Studio, you'll see a gallery of pre-built examples organized by category:
+
+- **Primitives**: Basic building blocks (inputs, buttons, text)
+- **Layouts**: Page structures and responsive grids
+- **Data Display**: Tables, lists, and cards
+- **Forms**: Complete form examples with validation
+- **Complex**: Advanced examples like dashboards and admin panels
+
+Click any example to load it in the Studio.
+
+### 2. Design Mode
+
+In **Design Mode**, you can:
+- Select components by clicking them
+- Edit properties in the right panel
+- Drag new components from the palette
+- Reorder components by dragging
+- Delete components with the `Delete` key
+
+**Tips:**
+- Use the property panel to customize colors, spacing, and behavior
+- Try adding `className` properties with Tailwind CSS classes
+- Nested components can be expanded to edit their children
+
+### 3. Preview Mode
+
+Switch to **Preview Mode** to see how your interface looks without the designer chrome:
+- Test responsiveness with viewport toggles
+- Interact with components to verify behavior
+- Check the visual design at different screen sizes
+
+### 4. Code Mode
+
+In **Code Mode**, you have:
+- Full JSON schema on the left
+- Live preview on the right
+- Real-time validation
+- Direct editing for advanced users
+
+**Pro Tip:** Copy the JSON and paste it directly into your React application:
+
+```tsx
+import { SchemaRenderer } from '@object-ui/react';
+
+const schema = {
+ // Paste your copied JSON here
+};
+
+function MyComponent() {
+ return <SchemaRenderer schema={schema} />;
+}
+```
+
+## Keyboard Shortcuts
+
+| Shortcut | Action | Description |
+|----------|--------|-------------|
+| `Ctrl+Z` / `Cmd+Z` | Undo | Undo the last change |
+| `Ctrl+Y` / `Cmd+Y` | Redo | Redo the last undone change |
+| `Ctrl+C` / `Cmd+C` | Copy | Copy the selected component |
+| `Ctrl+V` / `Cmd+V` | Paste | Paste the copied component |
+| `Delete` / `Backspace` | Delete | Delete the selected component |
+
+## Use Cases
+
+### 1. **Rapid Prototyping**
+Quickly design and test UI concepts without writing code. Export the JSON when ready for development.
+
+### 2. **Learning Tool**
+Understand how Object UI schemas work by experimenting with the visual designer and seeing the JSON output.
+
+### 3. **Client Demos**
+Create interactive mockups to show clients and gather feedback before implementation.
+
+### 4. **Component Library Exploration**
+Browse and test all available components to understand their properties and behavior.
+
+### 5. **Schema Generation**
+Generate complex schemas visually, then fine-tune the JSON for production use.
+
+## Examples Gallery
+
+The Studio includes curated examples in multiple categories:
+
+### Layouts
+- **Dashboard**: KPI cards, charts, and responsive grid
+- **Grid Layout**: Multi-column responsive layouts
+- **Tabs**: Tabbed interface with multiple panels
+
+### Forms
+- **User Registration**: Complete signup form with validation
+- **Contact Form**: Simple form with text inputs and textarea
+- **Multi-step Form**: Wizard-style form with progress indicator
+
+### Complex
+- **Admin Panel**: Full-featured dashboard with navigation
+- **E-commerce**: Product listing with filters
+- **Analytics**: Data visualization and reporting
+
+## Best Practices
+
+### 1. Start with a Template
+Don't start from scratch - use an existing example as a starting point and customize it.
+
+### 2. Use Semantic Components
+Choose the right component for the job:
+- Use `<Form>` for data collection
+- Use `<Card>` for content grouping
+- Use `<Grid>` for responsive layouts
+
+### 3. Leverage Tailwind Classes
+Add custom styling with `className` properties:
+```json
+{
+ "type": "button",
+ "label": "Submit",
+ "className": "bg-indigo-600 hover:bg-indigo-700"
+}
+```
+
+### 4. Test Responsiveness
+Always preview your design in multiple viewport sizes to ensure it works on all devices.
+
+### 5. Export and Iterate
+Export your schema, integrate it into your app, and come back to the Studio to make adjustments.
+
+## Limitations
+
+The Studio is designed for:
+- ✅ Prototyping and design
+- ✅ Learning and experimentation
+- ✅ Schema generation
+
+It is **not** designed for:
+- ❌ Production data management (no backend connection)
+- ❌ Complex state management (use your app for that)
+- ❌ Custom component development (extend Object UI separately)
+
+## What's Next?
+
+- [Read the full guide](/guide/introduction)
+- [Explore the API reference](/api/react)
+- [Check out component specifications](/protocol/overview)
+- [View the project roadmap](/ROADMAP)
+
+## Feedback
+
+We'd love to hear your thoughts on the Studio!
+
+- 🐛 [Report bugs](https://github.com/objectql/objectui/issues)
+- 💡 [Request features](https://github.com/objectql/objectui/issues)
+- ⭐ [Star on GitHub](https://github.com/objectql/objectui)

docs/index.md

@@ -10,6 +10,9 @@ hero:
  alt: Object UI
  actions:
  - theme: brand
+ text: Try Studio Now
+ link: /studio/
+ - theme: alt
  text: Get Started
  link: /guide/introduction
  - theme: alt
@@ -76,6 +79,19 @@ features:
 
 That's it! This JSON automatically creates a beautiful, accessible, and functional contact form.
 
+## 🎨 Try the Visual Studio
+
+<div class="tip custom-block" style="border-color: #6366f1;">
+ <p class="custom-block-title" style="color: #6366f1;">✨ Experience Object UI Studio</p>
+ <p>Explore our interactive visual editor with drag-and-drop design, live preview, and instant JSON export. Perfect for prototyping and learning!</p>
+ <p style="margin-top: 12px;">
+ <a href="/studio/" style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; text-decoration: none; font-weight: 600; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); transition: all 0.3s;">
+ 🚀 Launch Studio
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+ </a>
+ </p>
+</div>
+
 ## Why Object UI?
 
 <div class="tip custom-block">