22
33The ` @object-ui/designer ` package provides a visual drag-and-drop editor for creating Object UI schemas.
44
5- ::: warning Coming Soon
6- The Designer is planned for release in Q3 2026. This documentation is a preview.
7- :::
5+ ## Installation
86
9- ## Planned Features
7+ ``` bash
8+ npm install @object-ui/designer @object-ui/react @object-ui/components
9+ ```
10+
11+ ## Features
1012
11- ### Visual Editor
13+ ### ✅ Visual Editor
1214
1315``` tsx
1416import { Designer } from ' @object-ui/designer'
@@ -18,48 +20,130 @@ function App() {
1820
1921 return (
2022 <Designer
21- schema = { schema }
22- onChange = { setSchema }
23+ initialSchema = { schema }
24+ onSchemaChange = { setSchema }
2325 />
2426 )
2527}
2628```
2729
28- ### Component Palette
30+ ### ✅ Component Palette
31+
32+ Drag components from the categorized palette to the canvas. Includes:
33+ - Basic components (text, button, link, image)
34+ - Form inputs (input, textarea, select, checkbox, radio, date picker)
35+ - Layout components (container, grid, flex, tabs, card)
36+ - Data display (table, list, badge)
37+ - Feedback components (alert, toast, dialog)
38+
39+ ### ✅ Property Editor
40+
41+ Edit component properties visually with a dynamic form in the sidebar panel.
42+
43+ ### ✅ Real-time Preview
2944
30- Drag components from the palette to the canvas.
45+ See your changes instantly with live preview in the canvas.
3146
32- ### Property Editor
47+ ### ✅ Drag and Drop
3348
34- Edit component properties visually with a sidebar panel.
49+ - Drag components from palette to canvas
50+ - Reorder components within the canvas
51+ - Visual feedback during drag operations
3552
36- ### Real-time Preview
53+ ### ✅ JSON Import/Export
3754
38- See your changes instantly with live preview.
55+ - Export schema as JSON
56+ - Import schema from JSON
57+ - Copy schema to clipboard
3958
40- ### AI Assistant
59+ ## Components
4160
42- Generate schemas using natural language:
61+ ### Designer
62+
63+ The main designer component that includes all functionality.
4364
4465``` tsx
4566<Designer
46- enableAI = { true }
47- aiPrompt = " Create a user registration form "
67+ initialSchema = { schema }
68+ onSchemaChange = { handleChange }
4869/>
4970```
5071
51- ### Collaboration
72+ ** Props:**
73+ - ` initialSchema?: SchemaNode ` - Initial schema to load
74+ - ` onSchemaChange?: (schema: SchemaNode) => void ` - Callback when schema changes
75+
76+ ### Custom Layout
77+
78+ Use individual components for custom layouts:
79+
80+ ``` tsx
81+ import {
82+ DesignerProvider ,
83+ Canvas ,
84+ ComponentPalette ,
85+ PropertyPanel ,
86+ Toolbar
87+ } from ' @object-ui/designer'
88+
89+ function CustomDesigner() {
90+ return (
91+ <DesignerProvider
92+ <div className = " flex flex-col h-screen"
93+ <Toolbar
94+ <div className = " flex flex-1"
95+ <ComponentPalette className = " w-64"
96+ <Canvas className = " flex-1"
97+ <PropertyPanel className = " w-80"
98+ </div >
99+ </div >
100+ </DesignerProvider
101+ )
102+ }
103+ ```
104+
105+ ## API Reference
52106
53- Real-time multi-user editing like Google Docs.
107+ ### useDesigner Hook
54108
55- ## Stay Updated
109+ Access designer state and methods:
56110
57- Want to be notified when Designer launches?
111+ ``` tsx
112+ import { useDesigner } from ' @object-ui/designer'
113+
114+ function CustomComponent() {
115+ const
116+ schema,
117+ setSchema,
118+ selectedNodeId,
119+ setSelectedNodeId,
120+ updateNode,
121+ addNode,
122+ deleteNode,
123+ moveNode
124+ } = useDesigner ()
125+
126+ // Use designer state
127+ }
128+ ```
58129
59- - ⭐ [ Star on GitHub] ( https://github.com/objectql/objectui )
60- - 📧 [ Email us] ( mailto:hello@objectui.org )
61- - 📋 [ View Roadmap] ( /roadmap )
130+ ### Context API
131+
132+ ``` typescript
133+ interface DesignerContextValue {
134+ schema: SchemaNode
135+ setSchema: (schema : SchemaNode ) => void
136+ selectedNodeId: string | null
137+ setSelectedNodeId: (id : string | null ) => void
138+ hoveredNodeId: string | null
139+ setHoveredNodeId: (id : string | null ) => void
140+ updateNode: (id : string , updates : Partial <SchemaNode >) => void
141+ addNode: (parentId : string | null , node : SchemaNode , index ? : number ) => void
142+ deleteNode: (id : string ) => void
143+ moveNode: (nodeId : string , targetParentId : string | null , targetIndex : number ) => void
144+ }
145+ ```
62146
63- ## Roadmap
147+ ## Examples
64148
65- See the [ full roadmap ] ( /roadmap#q3-2026-visual- designer-available-september-2026 ) for Designer features and timeline .
149+ See [ examples/designer-demo ] ( https://github.com/objectql/objectui/tree/main/examples/ designer-demo ) for a complete working example .
0 commit comments