Wireframe Tool

How to use

1. Pick a desktop, laptop, tablet or phone size under Canvas settings on the right, then click a component in the library to drop it in the middle of the view, or drag it onto the canvas.
2. Select an object to change its fill, border, text, font size, position and size in the Properties panel. Select several to line them up with Align or Group in the ⋯ More menu, and press Ctrl+Z to undo.
3. When you are done, click Export PNG for an image (1× to 3× resolution) or Export JSON to keep an editable file you can load later with Import JSON.

Worked example

Opening a 1440×900 desktop canvas in an 800×600 editing area, Fit sets the zoom to min((800 − 80) ÷ 1440, (600 − 80) ÷ 900) = min(0.5, 0.58) = 50% and centers the board with 40px left and right and 75px above and below. A 375×812 phone canvas fits at (600 − 80) ÷ 812 ≈ 64%.

Select object A (X 100, Y 50, 200 wide, 40 high) and B (X 400, Y 120, 100 × 100) together and choose Left: B moves 300px left to X 100. Choose Bottom instead and both bottom edges line up at 220, moving A down 130. With only A selected, Right aligns it to the canvas edge, moving it 1140px to X 1240.

With Snap to grid on, dragging an object to X 14 snaps it to 10 and to X 15 snaps it to 20. An image exported on 14 October 2026 at 15:30 is named wireframe-20261014-1530.png, and a JSON exported in the same minute is wireframe-20261014-1530.json.

Reading the results

• The zoom percentage only changes what you see, not object sizes or the export. X, Y, width and height in the Properties panel are always pixels at 100%, with X and Y measured from the top-left corner of the canvas board.
• Components such as buttons, cards and tables are groups of shapes: fill and border change the main shape (for example the button background) and the text field changes the main label. To edit an individual part, click Ungroup first.
• When the status line says the draft was saved in this browser, it is stored. If a red message says it cannot be saved (private window or storage full), export a JSON backup right away.

How it works

• The canvas is drawn with the open-source Fabric.js 6 library on an HTML canvas. Each component is a set of vector shapes (rectangles, circles, lines, text), so zooming never blurs it.
• Align uses the canvas board as the reference when one object is selected and the union of all bounding boxes when several are, then shifts each object's bounding box (including rotation) horizontally or vertically.
• Undo and redo store a JSON snapshot of the whole canvas after each change, keeping up to 100. Identical states are skipped, and making a new change after undoing discards the redo entries.
• Drafts and exports use the same JSON format {app, version, canvas}. Imports are checked for format version and object types; only the shapes and text this tool creates are accepted, and images, patterns or anything that loads external resources is rejected.
• Export PNG temporarily resets the view to 100%, crops to the canvas board, renders it at the chosen scale and creates the PNG with the browser's canvas.toBlob, without any server.

Limitations

• It is meant for layout and information architecture, not clickable prototypes, multi-page flows, shared components or real-time collaboration.
• You cannot insert real images or icons, and there is no SVG or PDF export; choose PNG 3× when you need a sharper image.
• Drafts live in one browser's localStorage (usually about 5 MB) and very large boards may not fit. Imports are limited to 10 MB, boards to 5000 px per side, and exporting a huge board at 3× may exceed the browser's canvas size limit.
• Text uses the device's system fonts, so the same JSON can show slightly different text widths and line breaks on another computer or language setting.

FAQ

💬 Can't find an answer? Report a problem with this tool or send a suggestion