Visual Designer

2D Canvas

Tap to select then drag to move, resize, snap to grid and to other components, 0.1× – 4× zoom, smart guides with distance labels.

35+ components

Text, headings, buttons, forms, media, tables, lists, accordions, carousels, dialogs and semantic containers — each with its own typed options panel.

Properties · Layers · Theme

Three side panels to style, order and manage color tokens.

Multi-page

Tabs in preview; add / rename / duplicate / delete with no limit.

5 built-in templates

Landing, Login, Dashboard, Portfolio, E-Commerce + Marketplace — plus ready-made blocks (hero, features, pricing, contact, footer).

Bidirectional Marketplace

Import templates and downloaded components, and export your designs.

Basics

Text · Heading · Button · Link · Icon · Divider · Avatar · Icon Button · Code · Quote

Forms

Text Field · Text Area · Checkbox · Radio · Switch · Select · Slider · Form

Containers

Row · Column · Card · Box · Grid · Section · Header · Footer · Main · Scroll View

Navigation

Navbar · Bottom Nav · Tab Bar · Breadcrumb · Link List

Media

Image · Video · Carousel · Code Embed

Feedback

Dialog · Snackbar · Progress Bar · Spinner · Badge · Chip · Tooltip · Rating

Data

List · Table · Accordion

Blocks

Ready-made sections: hero, features, pricing, contact form, footer

Fixed / Hug / Fill

Set each axis independently: a fixed size, hug the content, or fill the space left over. With optional min and max.

Auto-layout

Containers arrange their children in a row or column with gap, padding, wrap and alignment. Add or remove a child and everything reflows on its own.

Real grid

Define columns and rows as chips (1fr, 200px, auto) and place children across cells with spans. The canvas shows the track lines.

Page in flow

New designs stack their sections like a real web page, so the exported HTML adapts on its own instead of pinning everything to coordinates. Free canvas is still available for pixel-perfect work.

Free-floating children

Take a child out of the flow to pin it wherever you want inside its container — a badge on a card corner, a floating button over a hero.

Tokens

Colors, spacing, type sizes, shadows, radii and opacity as named values you reuse everywhere. Rename one and every component follows; the panel tells you how many use it.

Light and dark theme

Give each token a dark value and switch the canvas over to check it. The export ships both and follows the reader's system setting.

Text and effect styles

Save a whole typography or shadow set under a name and apply it in one tap, like paragraph styles in a design tool.

Reusable components

Turn any selection into a component. Every copy stays linked: edit the original and they all update, while each copy can still override its own text or image.

Health panel

Flags colors outside your palette, spacing off the scale, text with no style and contrast that fails accessibility — before you export.

States

Style hover, active, focus and disabled per component, and preview each one on the canvas without leaving the editor.

Interactions

Wire a tap to navigate to another page, open or close a dialog, or switch a component's state. Arrows on the canvas show the flow.

Runnable prototype

Preview mode actually runs it: navigation, dialogs and form validation work, so you can hand someone a link and let them click through.

Animations

Keyframe animations with a Play button, plus entrance and scroll effects and page transitions. They export as real CSS.

Readable history

A list of what you actually did (“Move Button 2”, “Change radius of 3 elements”); tap any entry to jump back to that point.

Named versions

Save a checkpoint before a risky change and restore it later. You can also compare two versions side by side and see what moved.

Recovery

Every save keeps a backup copy. If a file ever comes back damaged, the Designer offers the backup or your last checkpoint instead of losing the work.

Share and import

Send a design as a single file, import one back, or bring a design in from Figma. Review comments can be pinned to a component and resolved.

Landing Page

Modern landing with hero and features grid

Login Form

Email/password authentication form

Dashboard

Admin panel with stats cards and settings

Portfolio

Personal portfolio with about, projects, contact

E-Commerce

Product catalog with detail view

Floating action bar

Select something and the handful of actions you actually use for that component appear right above it.

Keyboard and mouse

With a keyboard attached: arrows nudge, Delete removes, and the usual undo, copy, paste, duplicate, group and zoom shortcuts work.

One-handed use

Panels remember the height you left them at, the canvas scrolls so the selection stays visible above the keyboard, and there is a left-handed mode.

Accessible

The canvas works with a screen reader, including moving and resizing by steps, and touch targets meet the recommended minimum size.