What is this?
A simple tool for sketching website layouts using ASCII characters. Great for quick wireframes and
planning page structure before coding.
How to use
- Type directly in the canvas area
- Click palette characters to insert them at cursor
- Use box-drawing characters for clean edges
- Copy your wireframe to share or document
Common patterns
┌─┐ └─┘ — Box corners│ ─ — Vertical & horizontal lines├ ┤ ┬ ┴ ┼ — Junctions[ ] — Buttons, inputs< > — Navigation arrows
Example Wireframe
┌──────────────────────────────────────┐
│ LOGO NAV NAV NAV │
├──────────────────────────────────────┤
│ HERO SECTION │
│ [ CALL TO ACTION ] │
├──────────────────────────────────────┤
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ CARD │ │ CARD │ │ CARD │ │
│ └──────┘ └──────┘ └──────┘ │
└──────────────────────────────────────┘
Example Site Map
HOME
├── About
│ └── Team
├── Projects
│ ├── Project 1
│ └── Project 2
└── Contact
Example Navigation
┌─────────────────────────────────────────┐
│ Home Products ▼ Services Contact │
└─────────────┬───────────────────────────┘
┌────┴────────────┐
│ ○ Category A │
│ ○ Category B │
└─────────────────┘
Tip
Click the Example button multiple times to cycle through 8 different templates:
wireframes, site maps, navigation patterns, forms, and grids.