Design tool
Wireframe Sketcher
Sketch website and app wireframes from a library of low-fidelity components, across multiple pages, with grid snapping. Export PNG, a multi-page PDF or JSON.
Free, no sign-up. Runs in your browser; nothing is uploaded.
Components
Pick one, then click or drag on the canvas.
Basic
Navigation
Content
Forms
Frames
Pan with the hand tool or Space, zoom with the wheel. Double-click a component to edit its text (tables use one row per line and | between cells; lists, tabs and the navbar use one line per item).
10 components on Landing page, 0 selected
Properties
Select something to change its colours, text and style. Double-click a shape to edit its text.
File
Wireframes stay in this browser. Exports use a light background.
How to use the wireframe sketcher
Sketch the screens before you design them
A wireframe answers a simple question early: what goes where. Doing it with low-fidelity boxes keeps the conversation on layout and flow instead of colours and fonts, and it takes minutes rather than days. This sketcher gives you a library of grey-box components, a snapping grid and several pages in one project.
How to build a screen
- Start from the sample. It opens with a landing page in a browser frame and a login screen on a phone, so you can see how components stack. Reset to the sample at any time or delete the pages and begin your own.
- Add a frame. Choose Browser frame for desktop or Phone frame for mobile, then click the canvas. Drag instead of clicking if you want a custom size.
- Fill it. Pick a component from the library and click or drag where you want it. Navbar, heading, text block, image, card, list, table, button, input, dropdown, checkbox, radio, toggle and tabs cover most screens.
- Edit the text. Double-click a component to change its label. For a table, type one row per line and separate cells with a vertical bar.
- Arrange. Drag to move, use the handles to resize, and use the layer buttons to bring a component forward or send it back. Duplicate, copy and paste speed up repeated sections such as a row of cards.
Grid and precision
Snap to grid is on by default with a ten pixel grid, so edges line up without effort. Turn it off for free placement, or type exact position and size values in the Properties panel. Arrow keys nudge the selection.
Pages
Add a page for every screen in the flow, rename it, and switch between pages from the tabs. Each page has its own canvas, so a signup flow can live next to the dashboard it leads to.
Export and sharing
PNG exports the current page, cropped to its content on a light background. The PDF puts every page on its own A4 sheet with the page name above it, which is ready to attach to a brief or a review. JSON is an editable backup that you can import later.
If a wireframe is the first step toward a real product, DEV3 designs and builds web and mobile apps from sketches like these.
Frequently asked questions
What components are included?
Navbar, tabs, heading, text block, image placeholder, card, list, table, button, input, dropdown, checkbox, radio, toggle, phone frame and browser frame, plus a plain box, text label, avatar and divider.
How do I edit the text inside a component?
Double-click it, or select it and use the Text box in Properties. Tables use one row per line with | between cells. Lists, tabs and the navbar use one line per item, and the first navbar line is the brand name.
How do multiple pages work?
Use the page tabs above the canvas to add, rename, delete and switch pages. Each page has its own canvas, and undo and redo cover page changes too.
What does the PDF contain?
One A4 page per wireframe page, each cropped to its content with the page name as a heading. PNG exports the page you are looking at.
Where is my work stored?
In your browser on this device only. Nothing is uploaded. Export JSON for a backup or to move the project to another device.
How do I put a button on a phone screen?
Add a phone frame first, then add components over it. New components are placed on top, and the layer buttons bring any component forward or send it back.