Visual editor
Click elements in the preview to edit styles visually — no code required.
The visual editor (Design mode) lets you select UI elements in the live preview and adjust their appearance. Changes are written back to source code automatically.
Enabling design mode
- Open a project in the workbench
- Switch to Design mode from the chat toolbar or workbench
- Click an element in the preview iframe to select it
What you can edit
| Property | Examples |
|---|---|
| Typography | Font size, weight, color |
| Spacing | Padding, margin |
| Layout | Width, alignment |
| Colors | Background, text, borders |
| Effects | Opacity, border radius |
Image tools
The visual editor includes:
- Pixabay library — search and insert stock images
- AI image generation — create images from prompts
- Upload — import and persist images into your project
Images are saved to your project files and referenced in components.
How changes apply
Visual edits generate patches that update the underlying React Native source. The preview refreshes to reflect changes. You can still edit the same properties in code afterward.
Design mode vs. chat
| Approach | Best for |
|---|---|
| Visual editor | Pixel-level tweaks, colors, spacing on existing UI |
| Chat | New screens, logic, navigation, backend |