Design editor for your code
Edit your real app UI with Design Mode’s Figma-like controls. Explore bigger changes with your AI agents, then review with your team before developer handoff.
Codebase to Hexby Canvas to Codebase.

Hexby doesn’t replace the codebase. It makes it visual.
The workspace
Find the screen or component you want to improve
Explore your existing app on a visual canvas. Find a page, see the components it uses, and understand where your changes will appear.
The whole component library, rendered.
Every component you have on one free canvas, with project-wide search, filtering by kind and sorting. Zoom in and the cards become the real components, live and clickable, so you can hover them and try their states without leaving the canvas.

The whole component library, rendered.
Every component you have on one free canvas, with project-wide search, filtering by kind and sorting. Zoom in and the cards become the real components, live and clickable, so you can hover them and try their states without leaving the canvas.

One page and all the dependencies
Pick a page and the canvas draws it together with its whole dependency closure. A shared component appears under every parent that uses it but resolves to one record, so before you change anything you can see everywhere it would land.

Every screen and component, on one canvas.
Hexby reads your project and lays out every page, layout and component as a map, connected by what actually renders what. The layout is deterministic, so the same project always draws the same map and you can learn where things live.
Zoom out to take in the shape of the whole project. Zoom in and every node shows the screen it renders, named, with the kind it is. Files you have changed pick up a git status border, so the map doubles as a picture of your work in progress.

One component, with its code underneath.
Isolates a single component in the middle of the canvas with Desktop, Tablet and Mobile breakpoints, and a resizable code dock below it showing that component's source. When the component has a companion stylesheet, the dock splits so you can see the markup and the styles together.

Your real app, running inside Hexby.
Hexby starts your project's own dev server and frames the running app, with an address bar that drives its real history, route autocomplete from the analysis, and Desktop, Tablet and Mobile viewports.
The Inspect dock is where someone who does not write code gets to work: a live layers tree, controls for colour, typography, spacing and layout, and a Content tab for editing the words on the screen.

Visual editing
Explore ideas and edit your UI visually
Hexby’s visual editor gives you several ways to shape your UI. Chat with your agent, use design mode for precise control over small tweaks, annotate a detail, or explore a new direction—and see the results on your canvas.
Design Mode
Get precise control over your real UI
Select an element in the preview or Layers, then use Figma-like controls in Properties to adjust typography, colors, spacing, dimensions, and layout. Edit text directly in the preview and reorder existing elements.Use your AI agent for broader redesigns, new elements, or changes to how your app behaves. See what you can edit in Design Mode.
Select an element in the preview to start designing.
Mississauga, Ontario, Canada
Chat
Your agent, in the right panel.
Select something on the canvas and it comes along as context, so the agent knows exactly which file you mean. Paste an image, run a slash command, or dictate.Use your agent to add sections, build interactions, or apply changes across screens. Check the updated preview and code as you iterate. See how to work with your agent.

Annotate
Put your feedback right where it belongs.
Pin a note to any part of your live UI to show your agent exactly what you want to change. Add context right where it matters, whether you’re refining a detail or calling out something that feels off.Leave several notes across the preview, then send them together so your agent can work through your feedback with the right visual context.
Explore with Hexby
Explore ideas before you build them.
Try new layouts, build new flows, match a design reference, or explore UI states using your existing components.Compare different directions before your agent builds it. See how to explore design directions.
One card. Three new directions.
★ SuperhostMississauga, Ontario, Canada
The original photo and listing details.
★ SuperhostMississauga, Ontario, Canada
More room to scan the stay details.
★ SuperhostName and nightly price take the lead.
★ SuperhostMississauga, Ontario, Canada
Amenities and a clear next action together.
Swipe to compare previews
Review before merge
Review your UI changes before they ship
Move fast without letting non-developer changes go straight to production.

Frequently Asked Questions
Frequently asked questions about Hexby
Explore how Hexby fits into your existing product and development workflow.
Is Hexby an alternative to Figma for AI-generated apps?
Hexby is a visual design workspace for teams whose product UIs live in code. It turns an existing frontend codebase into a visual canvas where you can explore screens and components, try design alternatives, and refine interfaces using your existing AI coding agents. Unlike a traditional design-first workflow, Hexby lets you work with the UI that already exists in your codebase, without having to recreate it in a separate design file. You can watch a demo of the Hexby workspace here.

How can I visualise my codebase when my UI designs only exist in code?
Hexby turns your existing frontend codebase into a visual workspace for exploring your application's pages and components. Instead of navigating source files to understand the UI, you can inspect rendered interfaces, explore component relationships and identify areas to improve. This helps designers, product managers and developers understand and work on coded UIs visually. You can explore the Hexby workspace in the product tour here.

How do I design and iterate on UIs when AI coding agents generate code before design files exist?
Hexby brings a visual design workflow to products built directly in code by AI coding agents. Connect your project, explore the UI on a visual canvas, experiment with layouts and components, and use your existing coding agent to implement changes. You can move between visual exploration and code implementation without first recreating your application in a separate design tool. You can explore different design directions here.
How can I improve the UI of an app built with Lovable, Bolt, Replit or other AI app builders?
Hexby helps you refine AI-generated applications after the initial build. Bring your project into a visual workspace, explore alternative layouts, improve components and polish the interface using your existing AI coding agent. Instead of rebuilding the application from scratch, you can iterate on the UI of the product you have already created. You can learn how to open your existing project here.
Can I redesign my app visually using Claude Code, Codex or Cursor?
Yes. Hexby brings visual UI exploration and iteration into your existing AI coding workflow. Work with your application's screens and components, identify the changes you want to make, and use your connected coding agent to implement them in code. You can continue using your existing agent and its subscription rather than switching to a separate AI coding agent provided by Hexby. You can find the AI assistant integration guide here.

How can I explore and compare different UI designs before implementing them in code?
Hexby lets you explore alternative UI directions using your existing application as the starting point. Experiment with layouts, screens and components, review visual changes against the current interface, and refine your preferred direction with your AI coding agent. This helps teams evaluate design options before deciding which changes to implement in their codebase. You can learn how to explore and compare design ideas here.

Can designers and product managers improve an application's UI without editing code themselves?
Hexby gives designers and product managers a visual workspace for understanding and refining an existing application's UI. They can explore screens and components, communicate desired changes and work with an AI coding agent to implement improvements. Teams can review visual changes together and hand approved work back to developers through their existing development workflow. You can learn about visual review and developer handoff here.



Can I turn an existing production codebase into a visual design canvas without recreating the UI from scratch?
Yes. Hexby creates a visual workspace from your existing frontend project so you can explore the UI that has already been implemented. You can inspect pages and components, understand how the interface is structured, and iterate on the existing product using your AI coding agent. Your codebase remains the source of truth, rather than requiring you to manually recreate each screen in a separate design file. You can find project requirements and setup instructions here.

How can I maintain consistent UI design across pages and reusable components?
Hexby helps you explore the pages and components that make up your application, making it easier to understand how shared UI elements fit into the product. You can identify areas for refinement, explore changes to reusable components and work with your AI coding agent to implement improvements across the interface. This supports more consistent UI iteration within your existing codebase. You can learn how to give your AI agent design guidelines for consistent UI changes here.

How can I review AI-generated UI changes before merging them into my codebase?
Hexby gives teams a visual workspace for reviewing UI changes before they become part of the main product. You can compare the updated interface with the existing version, inspect proposed changes and collaborate with teammates on the result. When changes are ready, they can be handed back through your supported repository workflow for developer review and merging. You can learn how to review UI changes and hand them off for merging here.

Get started
Explore ideas. Edit your app visually.
Fine-tune details in Design Mode. Explore bigger changes with your existing AI agents. Review the result together before handoff.