|
| 1 | +# Object UI Studio |
| 2 | + |
| 3 | +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. |
| 4 | + |
| 5 | +## 🚀 Quick Access |
| 6 | + |
| 7 | +<div class="tip custom-block"> |
| 8 | + <p><strong>Try it now!</strong></p> |
| 9 | + <p>Access the Studio at: <a href="/studio/" target="_blank">/studio/</a></p> |
| 10 | +</div> |
| 11 | + |
| 12 | +## Features |
| 13 | + |
| 14 | +### 🎨 Visual Designer |
| 15 | +- **Drag-and-Drop**: Drag components from the palette directly onto the canvas |
| 16 | +- **Smart Positioning**: Intelligent drop zone detection for precise component placement |
| 17 | +- **Live Preview**: See your changes in real-time as you design |
| 18 | +- **Component Search**: Quickly find the components you need |
| 19 | + |
| 20 | +### 📝 Code Editor |
| 21 | +- **JSON Editor**: Edit schemas directly with syntax highlighting |
| 22 | +- **Split View**: Code on the left, preview on the right |
| 23 | +- **Syntax Validation**: Real-time JSON validation with error messages |
| 24 | +- **Auto-format**: Beautiful, readable JSON output |
| 25 | + |
| 26 | +### 📱 Responsive Preview |
| 27 | +- **Multiple Viewports**: Test your design in Desktop, Tablet, and Mobile views |
| 28 | +- **Device Frames**: Realistic device mockups for mobile and tablet |
| 29 | +- **Instant Switching**: Toggle between viewports with one click |
| 30 | + |
| 31 | +### ⚡ Productivity Features |
| 32 | +- **Undo/Redo**: Full history management (`Ctrl+Z` / `Ctrl+Y`) |
| 33 | +- **Copy/Paste**: Duplicate components easily (`Ctrl+C` / `Ctrl+V`) |
| 34 | +- **Export JSON**: Download your schema as a `.json` file |
| 35 | +- **Copy to Clipboard**: One-click copy for easy integration |
| 36 | + |
| 37 | +## Getting Started |
| 38 | + |
| 39 | +### 1. Choose a Template |
| 40 | + |
| 41 | +When you open the Studio, you'll see a gallery of pre-built examples organized by category: |
| 42 | + |
| 43 | +- **Primitives**: Basic building blocks (inputs, buttons, text) |
| 44 | +- **Layouts**: Page structures and responsive grids |
| 45 | +- **Data Display**: Tables, lists, and cards |
| 46 | +- **Forms**: Complete form examples with validation |
| 47 | +- **Complex**: Advanced examples like dashboards and admin panels |
| 48 | + |
| 49 | +Click any example to load it in the Studio. |
| 50 | + |
| 51 | +### 2. Design Mode |
| 52 | + |
| 53 | +In **Design Mode**, you can: |
| 54 | +- Select components by clicking them |
| 55 | +- Edit properties in the right panel |
| 56 | +- Drag new components from the palette |
| 57 | +- Reorder components by dragging |
| 58 | +- Delete components with the `Delete` key |
| 59 | + |
| 60 | +**Tips:** |
| 61 | +- Use the property panel to customize colors, spacing, and behavior |
| 62 | +- Try adding `className` properties with Tailwind CSS classes |
| 63 | +- Nested components can be expanded to edit their children |
| 64 | + |
| 65 | +### 3. Preview Mode |
| 66 | + |
| 67 | +Switch to **Preview Mode** to see how your interface looks without the designer chrome: |
| 68 | +- Test responsiveness with viewport toggles |
| 69 | +- Interact with components to verify behavior |
| 70 | +- Check the visual design at different screen sizes |
| 71 | + |
| 72 | +### 4. Code Mode |
| 73 | + |
| 74 | +In **Code Mode**, you have: |
| 75 | +- Full JSON schema on the left |
| 76 | +- Live preview on the right |
| 77 | +- Real-time validation |
| 78 | +- Direct editing for advanced users |
| 79 | + |
| 80 | +**Pro Tip:** Copy the JSON and paste it directly into your React application: |
| 81 | + |
| 82 | +```tsx |
| 83 | +import { SchemaRenderer } from '@object-ui/react'; |
| 84 | + |
| 85 | +const schema = { |
| 86 | + // Paste your copied JSON here |
| 87 | +}; |
| 88 | + |
| 89 | +function MyComponent() { |
| 90 | + return <SchemaRenderer schema={schema} />; |
| 91 | +} |
| 92 | +``` |
| 93 | + |
| 94 | +## Keyboard Shortcuts |
| 95 | + |
| 96 | +| Shortcut | Action | Description | |
| 97 | +|----------|--------|-------------| |
| 98 | +| `Ctrl+Z` / `Cmd+Z` | Undo | Undo the last change | |
| 99 | +| `Ctrl+Y` / `Cmd+Y` | Redo | Redo the last undone change | |
| 100 | +| `Ctrl+C` / `Cmd+C` | Copy | Copy the selected component | |
| 101 | +| `Ctrl+V` / `Cmd+V` | Paste | Paste the copied component | |
| 102 | +| `Delete` / `Backspace` | Delete | Delete the selected component | |
| 103 | + |
| 104 | +## Use Cases |
| 105 | + |
| 106 | +### 1. **Rapid Prototyping** |
| 107 | +Quickly design and test UI concepts without writing code. Export the JSON when ready for development. |
| 108 | + |
| 109 | +### 2. **Learning Tool** |
| 110 | +Understand how Object UI schemas work by experimenting with the visual designer and seeing the JSON output. |
| 111 | + |
| 112 | +### 3. **Client Demos** |
| 113 | +Create interactive mockups to show clients and gather feedback before implementation. |
| 114 | + |
| 115 | +### 4. **Component Library Exploration** |
| 116 | +Browse and test all available components to understand their properties and behavior. |
| 117 | + |
| 118 | +### 5. **Schema Generation** |
| 119 | +Generate complex schemas visually, then fine-tune the JSON for production use. |
| 120 | + |
| 121 | +## Examples Gallery |
| 122 | + |
| 123 | +The Studio includes curated examples in multiple categories: |
| 124 | + |
| 125 | +### Layouts |
| 126 | +- **Dashboard**: KPI cards, charts, and responsive grid |
| 127 | +- **Grid Layout**: Multi-column responsive layouts |
| 128 | +- **Tabs**: Tabbed interface with multiple panels |
| 129 | + |
| 130 | +### Forms |
| 131 | +- **User Registration**: Complete signup form with validation |
| 132 | +- **Contact Form**: Simple form with text inputs and textarea |
| 133 | +- **Multi-step Form**: Wizard-style form with progress indicator |
| 134 | + |
| 135 | +### Complex |
| 136 | +- **Admin Panel**: Full-featured dashboard with navigation |
| 137 | +- **E-commerce**: Product listing with filters |
| 138 | +- **Analytics**: Data visualization and reporting |
| 139 | + |
| 140 | +## Best Practices |
| 141 | + |
| 142 | +### 1. Start with a Template |
| 143 | +Don't start from scratch - use an existing example as a starting point and customize it. |
| 144 | + |
| 145 | +### 2. Use Semantic Components |
| 146 | +Choose the right component for the job: |
| 147 | +- Use `<Form>` for data collection |
| 148 | +- Use `<Card>` for content grouping |
| 149 | +- Use `<Grid>` for responsive layouts |
| 150 | + |
| 151 | +### 3. Leverage Tailwind Classes |
| 152 | +Add custom styling with `className` properties: |
| 153 | +```json |
| 154 | +{ |
| 155 | + "type": "button", |
| 156 | + "label": "Submit", |
| 157 | + "className": "bg-indigo-600 hover:bg-indigo-700" |
| 158 | +} |
| 159 | +``` |
| 160 | + |
| 161 | +### 4. Test Responsiveness |
| 162 | +Always preview your design in multiple viewport sizes to ensure it works on all devices. |
| 163 | + |
| 164 | +### 5. Export and Iterate |
| 165 | +Export your schema, integrate it into your app, and come back to the Studio to make adjustments. |
| 166 | + |
| 167 | +## Limitations |
| 168 | + |
| 169 | +The Studio is designed for: |
| 170 | +- ✅ Prototyping and design |
| 171 | +- ✅ Learning and experimentation |
| 172 | +- ✅ Schema generation |
| 173 | + |
| 174 | +It is **not** designed for: |
| 175 | +- ❌ Production data management (no backend connection) |
| 176 | +- ❌ Complex state management (use your app for that) |
| 177 | +- ❌ Custom component development (extend Object UI separately) |
| 178 | + |
| 179 | +## What's Next? |
| 180 | + |
| 181 | +- [Read the full guide](/guide/introduction) |
| 182 | +- [Explore the API reference](/api/react) |
| 183 | +- [Check out component specifications](/protocol/overview) |
| 184 | +- [View the project roadmap](/ROADMAP) |
| 185 | + |
| 186 | +## Feedback |
| 187 | + |
| 188 | +We'd love to hear your thoughts on the Studio! |
| 189 | + |
| 190 | +- 🐛 [Report bugs](https://github.com/objectql/objectui/issues) |
| 191 | +- 💡 [Request features](https://github.com/objectql/objectui/issues) |
| 192 | +- ⭐ [Star on GitHub](https://github.com/objectql/objectui) |
0 commit comments