Overview
The Editor is an infinite canvas where you can arrange, resize, and edit components with AI assistance. Components are organized by their Library taxonomy layer (Foundations, Components, Patterns, Templates, Product Modules) with visual labels.
Components auto-size to their real rendered dimensions and render with proper Google Fonts (Inter). The canvas supports pan, zoom, drag-and-drop, and AI-powered editing of individual components.
Layer Organization
When you click Auto Layout, components are arranged by their taxonomy layer with color-coded labels:
Canvas Features
Drag & Drop
Click and drag any component to reposition it on the canvas. Components snap to a grid for alignment.
Resize
Drag the edges or corners of any component to resize it. The component preview updates in real-time.
AI Editing
Select a component and use the chat input to make changes with natural language:
Example prompts:
- • "Make it red"
- • "Add icon to the left"
- • "Add button"
- • "Make bigger"
- • "Add line chart"
- • "Add shadow"
Editing Workflow
- 1Select - Click a component on the canvas to select it
- 2Edit - Type your changes in the AI chat input
- 3Preview - See the AI's changes in real-time
- 4Accept or Discard - Confirm changes or revert to original
- 5Publish - Save the updated component to your library
Action Buttons
Confirm AI changes and update the component code.
Revert changes and restore the original component.
Save the updated component to your Library.
Editor Toolbar
The toolbar at the top provides canvas tools:
- • Grid - Toggle background grid
- • Background - Dark/light/transparent canvas
- • Ruler - Show component dimensions
- • Outline - Highlight boundaries
- • Vision Simulator - Accessibility testing
Bottom-left controls:
- • Zoom - Zoom in/out with percentage display
- • Reset - Reset zoom to 100%
- • Auto Layout - Automatically arrange components
Tips
- • Scroll to zoom - Use mouse wheel to zoom in/out
- • Double-click canvas - Create a new empty component
- • Double-click component - Open in Library for detailed editing
- • Press Esc - Deselect current component
- • Press Enter - Send AI edit command