Save to Browser
Save to File
Load from Browser
Open from File
Preferences
UI Mockup Designer
Clear All
Export HTML
Export Image
Export SVG
Preview
Help
Align:
Distribute:
Components
Basic
🔘
Button
📝
Input
📄
Text
📌
Heading
☑️
Checkbox
🔘
Radio Button
🎯
Toggle
📋
List
📊
Table
Layout
📦
Container
🗂️
Card
➖
Divider
Media
🖼️
Image
Start Building Your UI
Drag components from the left panel to start designing
Properties
Select a component to edit its properties
Preview
×
Export HTML
×
Copy to Clipboard
Preferences
×
Primary Color
Used for primary UI elements and accents
Button Color
Default color for new button components
Accent Color
Used for checkboxes, radio buttons, and toggles
Save Preferences
Reset to Defaults
Keyboard Shortcuts & Help
×
Component Actions
Ctrl/Cmd + C
- Copy selected component
Ctrl/Cmd + V
- Paste component
Delete/Backspace
- Delete selected component
Arrow Keys
- Move component by 1px
Shift + Arrow Keys
- Move component by 10px
Z-Order (Layering)
Ctrl/Cmd + ]
- Bring Forward
Ctrl/Cmd + [
- Send Backward
Ctrl/Cmd + Shift + ]
- Bring to Front
Ctrl/Cmd + Shift + [
- Send to Back
Mouse Actions
Drag from Palette
- Add component to canvas
Click Component
- Select component
Ctrl/Cmd + Click
- Multi-select components
Drag Component
- Move component
Drag Resize Handles
- Resize component
Click Canvas
- Deselect all
Alignment
Select 2+ components to use alignment tools
Select 3+ components to use distribute tools
Use toolbar buttons to align or distribute components
Save & Load
Save
- Save mockup to browser local storage
Load
- Load previously saved mockup
Mockups persist between browser sessions
Tips
Components placed later have higher z-order by default
Use the Properties Panel to fine-tune position, size, and z-order
Z-order controls which component appears on top when overlapping
Save your work regularly to avoid losing progress