Features

Everything you need to design, iterate, and ship beautiful interfaces.

Export Component
x
Preview
Code
<div class="flex items-center gap-4 p-6">
<img class="w-12 h-12 rounded-full" />
<div class="flex-1">
<h3 class="font-bold text-gray-900">
Jane Doe
</h3>
<p class="text-sm text-gray-500">
Product Designer
</p>
</div>
</div>
Copy HTML
Download

Export Clean Tailwind

Your designs export as production-ready Tailwind CSS. Hand it to engineering — or ship it yourself.

Drop images on canvas

Drop in Images

Add screenshots, assets, or reference images. Arrange them alongside your AI-generated components.

Generated image
An illustration of a rocket launching from a laptop...
New Image
512 x 512 px
Generate

AI Image Generation

Generate images right on the canvas with a prompt. No need to leave for visual assets.

Share "Landing Page"
Invite teammates to collaborate
Email address
Share
JC
Jamie Carmody
Owner
AK
Editor
Pending invite
Viewer

Share & Collaborate

Invite your team to a shared canvas. See each other's changes as they happen.

50%

Infinite Canvas

Drag, drop, and arrange elements freely on a zoomable, infinite canvas with precise controls.

divbutton.primary
Design
Code
Layout
Flex
Gap16
AlignCenter
Sizing
W320
Hauto
Typography
Inter
16px
600
1.5
Appearance
#18181B
Radius8
Shadowmd

Design Inspector

Fine-tune every detail with a visual inspector for layout, spacing, typography, and colors.

ProfileCard
Component
Copy
Group
Convert to Reusable
Delete

Extract Components

Select part of a design and convert it to a reusable component you can use across all your canvases.

Variation 2 of 3
Prev
Next
Apply
Cancel
Make the layout more compact with a single CTA button...
3
Apply

AI Variations

Generate multiple variations of any component or element, then swipe between them to pick the best one.

See it in action

Start building for free — no credit card required.

Get Started