Visual Designer
FreePro: AI Designer + React/Vue/SvelteFigma-style HTML/CSS visual builder with 2D canvas, smart snap, alignment & distribution, properties / layers / theme panels, multi-page support and an export pipeline producing plain HTML/CSS and framework code (React, Vue, Svelte). Includes a Pro AI Designer flow that turns a natural-language brief into an editable project reviewable before applying.
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.
14 built-in components
Text, Heading, Button, Link, Badge, Chip, Icon, HR Divider, Text Field, Text Area, Checkbox, Toggle, Option, Select.
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.
Bidirectional Marketplace
Import templates and downloaded components, and export your designs.
Visual canvas
Pure native canvas (no WebView) with dynamic artboard, configurable background, visual grid, smart guides and direct manipulation with two cursor modes: Select and Pan.
| Interaction | Mechanic |
|---|---|
| Tap | Selects the innermost component under the finger; tap on empty space deselects |
| Drag selected | Moves it; smart snap suggests neighbor edges/centers |
| Drag unselected | Pans / scrolls the canvas (does not move the component) |
| Pinch (2 fingers) | Zoom 0.1× – 4×, relative to the cursor |
| Resize | Handles on 4 corners + 4 sides with ghost preview |
| Snap to grid | Configurable grid size (default 16 px); on/off toggle |
| Multi-select | Dragging a selected member moves the whole group |
| Alignment | Left/Center-H/Right · Top/Center-V/Bottom |
| Distribution | Horizontal and vertical |
| Parent-child | Container components accept nested children with flex auto-layout (row/column/grid, gap, padding, wrap) |
| Lock | Locks drag and resize |
| Visibility | Show/hide toggle |
| Z-index | Visual order in layers panel |
Responsive Preview
Preview the canvas at predefined widths without touching the underlying document.
Original
—
Mobile S
320 px
Mobile
375 px
Mobile L
428 px
Tablet
768 px
Desktop
1280 px
Desktop L+
1440 px+
Pro
Auto-stack reflow
A single pure function shared by the canvas preview and the HTML generator. On narrow widths it clusters roots into rows and either flow-wraps small items (navbars, chips) or stacks blocks full-width — display-only, the document is never mutated.
Per-breakpoint overrides
Each element can store position / size / visibility overrides per breakpoint (mobile ≤ 480 px, tablet ≤ 900 px). Edited from the Responsive tab of the style panel, they win over the auto-stack and export as real @media queries.
Beyond the canvas widths, the full-screen WebView preview renders the generated HTML inside real device frames — Mobile 375 · Tablet 768 · Desktop 1280 · Full — at the device's true CSS width, so the exported @media queries actually fire.
Components palette
Basic
Text · Heading · Button · Link · Badge · Chip · Icon · HR Divider
Input
Text Field · Text Area · Checkbox · Toggle · Option · Select
Layout
Box · Card · Column · Row · Navbar
Container
Components that can nest children
Navigation
Navbar · Link
Feedback
Badge · Chip
Downloaded tab shows components downloaded from the Marketplace, insertable to the canvas with one tap.
Properties panel
Sticky tabs over the selected component: Design, Style, Spacing, Layout, FX and Responsive.
Built-in templates
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
Free limit: 3 designs from templates
From the 4th template-based design onwards the unlimited-templates gate triggers.
Export formats
| Format | Plan | MIME on share |
|---|---|---|
| HTML | Free | text/html |
| CSS | Free | text/css |
| SVG | Free | image/svg+xml |
| React (JSX + CSS) | Pro | text/plain |
| Vue (SFC) | Pro | text/plain |
| Svelte | Pro | text/plain |
Exported CSS emits real @media queries per component, combining the auto-stack (clean mobile/tablet column) with the user's overrides (which win). All 3 framework formats (React, Vue, Svelte) are gated by Premium and inherit the same @media; Copy HTML, Copy CSS and View Code are always Free.
AI Designer
100 % ProPro-exclusive capability. Turns a natural-language brief into an editable design project, traversing a 5-phase pipeline with mandatory review-first before applying changes to the canvas.
Pipeline
Phase 1
Brief & Discovery
Page type, style, palette, discovery form
Phase 2
Generation
Plan stream + LLM call
Phase 3
Review
Critique scores + actions list
Phase 4
Apply
Actions via undo/redo manager
Phase 5
Live Preview
WebView, Save/Export/Regenerate
20 page types
Landing · Dashboard · Blog · E-commerce · Portfolio · Admin · SaaS · Marketing · Form · Auth · Onboarding · Settings · Pricing · Data Viz · Docs · Social · Gallery · Email · Wireframe · Presentation
10 visual styles
Minimal · Bold · Dark · Editorial · Playful · Corporate · Technical · Glassmorphism · Brutalist · Soft & Warm
8 palettes
Blues · Purples · Greens · Reds · Warm · Mono · Teals · Pinks · + custom 3 colors
Discovery form (optional)
Self-critique scores (0-10)
Hierarchy
Clear visual hierarchy?
Execution
Clean layout?
Specificity
Brief-specific details?
Restraint
Avoids unnecessary complexity?
Color-coded average: green ≥ 7, yellow ≥ 4, red < 4.
Flow guarantees
- •Only safe design actions are accepted (catalog validation)
- •Mandatory visual diff in the AI changes review screen before applying
- •Undo/Redo stays intact — every action goes through the canvas history
- •Exports reuse the manual flow's HTML/CSS generator
AI auxiliary tools (Pro)
- AI Align — takes selected components and reflows them automatically.
- AI Component — generates a section or component from a short brief and inserts it in the canvas.
Free vs Pro plan
| Feature | Plan |
|---|---|
| Canvas editor (all built-in components) | Free |
| Snap, grid, rulers, alignment, distribution | Free |
| Multi-page | Free |
| Color tokens, themes, custom CSS | Free |
| Undo/Redo, auto-save | Free |
| Built-in templates (up to 3 designs) | Free |
| Templates from 4th design onwards | Pro |
| Responsive preview (up to Desktop 1280) | Free |
| Responsive Desktop L + custom breakpoints | Pro |
| Export HTML / CSS / SVG | Free |
| Export React / Vue / Svelte | Pro |
| Copy HTML, Copy CSS, View Code | Free |
| Export design / component (HTML/CSS/React/Vue/Svelte) | Free |
| Full AI Designer (Brief → Review → Apply → Live Preview) | Pro |
| AI Align, AI Component | Pro |
Module statistics
14
Built-in components
5
Built-in templates
6
Export formats
6
Style panel tabs
7
Responsive modes
2
Override breakpoints
20
AI page types
10+
AI visual styles
8
AI palettes
Next
Marketplace