What's new and improved:
Direct text editing — You can now simply click on any text element and start typing to change it directly! It works just like editing in a design tool — no coding required and no need for an agent. Before, you needed additional steps to make changes, but now it's as simple as point, click, and type.
Enhanced color editing — You can now edit colors even more intuitively! Instead of navigating through menus or remembering color codes, you can make color changes with fewer clicks and see the results instantly. Type in the color name, hex or even use the eyedropper to pick a color.
New style controls — We've added even more powerful styling options:
- Font size adjustments
- Font weight modifications
- Text alignment controls
- Background color editing
- Margin customization
- Padding adjustments
How this makes your life easier:
- Even more intuitive — The updated system feels more like everyday apps you already use
- Faster editing — Make changes in seconds rather than minutes
- Real-time updates — See your changes immediately as you type or select colors
- Smoother experience — The system now works more seamlessly with fewer interruptions
How the Element Editor Works
Activate the Element Editor right from your chat interface.
Click any element in your app’s preview to start editing.
Directly edit text if it's a string in your source code, right from the app preview!
Adjust additional properties like padding, text color, and background color using intuitive controls in the chat interface — including an easy-to-use color picker.
Instantly preview changes live within your app.
Hit save to ship instantly.
If the edits are direct, your edits will directly update the source code without consuming credits. If there's a larger scope, Element Editor seamlessly sends targeted metadata to Agent to make the changes.
What could the Element Selector already do previously?
We've upgraded the Element Selector to do even more, while you can access the Element Editor through the same icon:
- [Previously announced] Element Selector = you can easily click on what you want edited, and ask the Agent to edit it for you.
- [New additional features] Element Editor = you can directly edit text, colors, padding, etc. of every element in the page similar to how design tools work.
The existing Element Selector already allows you to easily ask Agent to do these things:
- Text changes: Update headings, paragraphs, button labels, and other text elements
- Style modifications: Adjust colors, spacing, sizing, and other visual properties
- Layout adjustments: Reposition elements or modify their arrangement
- Component updates: Change the behavior or appearance of interactive components
Now the new Element Editor allows you to easily make changes to your app in a whole new way.
The bottom line
The already powerful Element Selector is now even more powerful with the new Element Editor. These improvements mean less time wrestling with technical details and more time bringing your vision to life. Whether you're a beginner or experienced user, these enhancements make app creation feel as natural as using your favorite design tool. To learn more see the latest updates in our docs.
