Vectors, components, Flex and Grid, multiplayer: the tools you already know. Then the part static design tools leave out: interactions that run as real HTML. Bring your work with you. Import .fig, .sketch, or .xd files up to 500 MB, or paste straight from Figma.
Try nowThe basics
Everything you reach for in a design tool is here, so you can start designing, not relearning.
Canvas & vectors
Fills & effects
Type
Layout
Components
Collaboration
Getting around
Import & export
What your design tool can’t do
Hit preview and your artboard renders as HTML and CSS. Flex becomes CSS flex, Grid becomes CSS grid, and text stays real text. Drag the viewport anywhere from 100 to 5000 pixels wide and watch the layout respond.
Give a component a predefined behavior and it works in preview. Type into an input or textarea, drag a slider, flip a toggle, tick a checkbox, pick a color. Eight built-in behaviors, nothing to wire up.
Make a layer draggable, sortable, resizable, scrollable, or pannable. Reorder a list by dragging it, resize a panel, pan around a map. It acts like the real thing in preview. No code, no mojo required.
Point a Repeater at an array and it shows one component per item. Filter and sort the list with an expression, add and remove items with an action, and drag items from one list to another in preview. Every change lands in the data.
Keep values in variables, compute new ones with JavaScript expressions, and bind controls both ways so a slider and a price stay in sync. Then branch with a Conditional: if the email field is empty, the button stays disabled.
Variables belong to the whole document, so every page and every component reads the same ones. Expression variables recalculate like spreadsheet formulas, all the way down the chain: change a quantity in one card, and the subtotal, the delivery fee, the cart badge, and the button label all follow.
Components carry interactive states like hover, focus, and checked, animate smoothly between them with state transitions, and emit their own events for the rest of the design to react to.
Flex and Grid handle the layout. Size range events handle the rest: when the viewport crosses a breakpoint, change what the design does, not just where things sit.
The preview comes with a debug console and a validation console, so when an interaction doesn’t do what you expected, you can see why instead of guessing.
Connect Claude Code, Cursor, Codex, or GitHub Copilot in VS Code over MCP, and your agent can read and edit the documents you have open. Design it by hand, then let the agent take it from there. Or the other way round.
Threaded comments work in the preview as well as on the canvas, so feedback lands on the working prototype, not on a screenshot of it.
Side by side
A form that validates
In a static prototype
Draw an enabled and a disabled button, link them with a click, and explain the rule in a comment.
In Moio
Type into the email field. A Conditional enables Submit once it’s filled in.
A list you can reorder
In a static prototype
Mock up three frames of the list mid-drag and hope the developer gets the idea.
In Moio
Make the list sortable, then drag the items into a new order in preview.
A pricing slider
In a static prototype
Make a frame for each price point and jump between them.
In Moio
Bind a slider to a variable and compute the price with an expression. Every position works.
Not there yet
We’d rather you hear it from us. A few things you might be used to that Moio doesn’t do yet.
Shared libraries
Components live in one document. Pasting them into another makes an independent copy.
Code export
Designs already run as HTML in preview, and downloadable code is on the way.
The thing in your head. On screen. Before any code exists. Ready when you are.
