Your app, on the canvas
Bring a running local app into a Web Frame with the CLI. Explore changes, then work with your agent to apply them to your repository.
Design on
real code.
Bring your running app onto the canvas. Shape the interface visually, explore alternative directions, and give your coding agent the context to turn your next idea into a change in your codebase.
The interface is real.
So is the code behind it.
These are running React frames, not flattened mockups. Buttons respond. Components are shared. Open a Design Frame’s source and work on the code that renders it.
How Design Frames workWork on it.
Then play with it.
Select and edit elements right on the canvas. Switch to interaction mode to try the buttons, motion, and behavior of the same working interface.
A canvas for your codebase.
Explore what comes next.
Open your running app in a Web Frame and work on the actual interface. Use your coding agent to apply changes to your codebase, or explore alternative prototypes beside it before deciding what to keep.
Bring your project into the canvasSwitch modes.
Keep your place.
Select an element to edit it. Pan across the canvas. Pick context for your agent, or switch to interaction mode to use the interface. The same canvas, ready for your next move.
Connect your agent
Or use another MCP-compatible client.
Your coding agent.
Now on your canvas.
Keep the agent you already work with. Connect it to Visual Wizard and give it a concrete starting point: the interface in front of you.
- The selected elementPoint to exactly what needs to change.
- The surrounding frameKeep the rest of the interface in context.
- The source behind itWork on the code that renders the design.
Room to explore.
Control to finish.
Go from the big picture to the exact detail without leaving your workspace.
Real React underneath
Every Design Frame has editable React source. Work visually, open the code, and test the interface it actually renders.
Build once. Use it again.
Create reusable component frames and import them into other frames. Keep the source shared while exploring different compositions.
Decisions that stay connected
Connect color, typography, and spacing to design tokens. Adjust the system without repeating the same edit on every element.
Find the right layer
Select directly on the canvas, move through nested elements, and reach the detail you want without keeping the layers panel open.
Give your agent context
Connect an MCP-compatible coding agent. Share the frame, selected element, and prototype source instead of describing everything from scratch.
A few things
worth knowing.
Why Visual Wizard?
Visual Wizard is a canvas for your codebase, not a traditional design tool. Work with real code and running interfaces: edit visually, try interactions, and explore alternatives beside your app. Give your coding agent the selected element and frame as context when you’re ready to apply a change to your project.
How do I get started?
Create a project from the dashboard and add a Design Frame, or connect an existing local app with the CLI. Start with one frame, select an element, and make your first edit on the canvas.
When should I use a Design Frame or a Web Frame?
Use a Design Frame to create and edit a React interface inside Visual Wizard. Use a Web Frame to work with a running application, including a local project connected through the CLI.
How do I connect my coding agent?
Open Connect Agent in your project, choose Codex, Claude Code, Cursor, or another MCP-compatible client, and follow the project’s setup instructions. Your agent can then work with the canvas, frame source, and selected elements.
Do I need an agent to use the editor?
No. You can select and edit elements, adjust styles, organize frames, and test interactions yourself. Use an agent when you want help generating an interface or changing its code.
How do changes get back into my local project?
Explore the change in a Web Frame, then ask your connected coding agent to apply it to the repository. Review the source diff and test your app. Canvas experiments and repository edits are separate steps.
Have questions?
Join us on Discord. Ask a question, share what you’re building, or tell us what could be better.