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; publish 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 |
| Publish Design / Component to Marketplace | 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