Visual Designer
FreePremium (export)
An interactive HTML/CSS canvas with responsive design support. The Free plan includes 3 breakpoints (mobile, tablet, desktop); Premium adds 7 sizes and advanced animations.
Interactive canvas
The designer uses a canvas based on real HTML/CSS. What you design is what you get when exporting: clean, semantic code.
- •Drag & drop elements: container, text, image, button, input, icon…
- •Resize and reposition with touch gestures
- •Real-time CSS properties panel
- •Instant preview of the result
- •Layers: rearrange elements and manage z-index
Responsive design
The Free plan includes the 3 essential breakpoints. The Premium plan unlocks all 7 standard sizes:
Free: mobile, tablet, desktop — Premium: all sizes
| Breakpoint | Min width | Typical device | Plan |
|---|---|---|---|
| sm | 480px | Mobile | Free |
| md | 768px | Tablet | Free |
| lg | 1024px | Desktop | Free |
| xs | < 480px | Small mobile | Premium |
| xl | 1280px | Large desktop | Premium |
| 2xl | 1536px | Large screen | Premium |
| Custom | — | User-defined | Premium |
CSS animations
Add entrance, exit and hover effect animations to any canvas element.
Free
3 presets
Predefined fade, slide and scale ready to use.
Premium
10 presets + custom
10 additional presets and a custom keyframes editor.
Design tokens
Define a reusable color palette, type scale and spacing tokens across the entire project:
- •Colors: primary, secondary, neutrals and semantic (error, success…)
- •Typography: families, weights and size scales
- •Spacing: 4px grid with predefined values
- •Radii, shadows and blur effects
- •Tokens are exported together with the code
Export design
| Format | Free | Premium |
|---|---|---|
| HTML / CSS | ✅ | ✅ |
| SVG | ✅ | ✅ |
| React (JSX + CSS modules) | — | ✅ |
| Vue (SFC) | — | ✅ |
| Svelte | — | ✅ |
| React Native (StyleSheet) | — | ✅ |
Next
Marketplace