WWireframe Studio
Sign in Get started free

Sketch your next screen
in minutes, not hours

Drag components onto a grid, arrange them, and share a link — all from a browser tab.

Start wireframing free Sign in
1
Designers here
1
Wireframes made
2
Screens drawn
37
Components
Capabilities

Everything you need to think in screens

A focused wireframing canvas — deliberately low fidelity, so conversations stay about structure instead of colours.

True drag and drop

Grab a component from the palette, drop it on the canvas, then move, resize and snap it to a grid with the mouse or the arrow keys.

Live properties panel

Change label, size, position, alignment, borders, corner radius, opacity and z-order — every edit renders instantly.

Undo, redo, duplicate

A 60-step history, plus copy and paste, duplicate, marquee select, and align or distribute a whole selection at once.

Layers and screens

Reorder elements in a layer list, lock or hide any of them, and keep every screen of the same flow in one project.

Autosave to MySQL

Work is stored as JSON against your account, with a thumbnail rendered on save. Close the tab and pick up exactly where you stopped.

Export and share

Download a wireframe as PNG, SVG or JSON, or flip a project to public and hand someone a read-only link.

The palette

Thirty-seven wireframe primitives

Grouped the way you think about a screen. Every one is editable from the properties panel.

Structure

Box / FrameRectangleCircleDividerLineArrow

Text

HeadingParagraphLabelSticky note

Forms

ButtonText inputTextareaDropdownCheckboxRadioToggleSlider

Layout

CardNav barSidebarTabsBreadcrumbFooterTableList

Media

ImageVideoIconAvatarChartMap

Feedback

ProgressBadgeAlertModalTooltip
How it works

From blank page to shareable wireframe

Four steps, and there is nothing to learn beyond dragging a box.

01

Create a project

Pick a canvas — desktop, laptop, tablet, phone or free — and name the flow you are designing.

02

Drop components

Drag from the palette, nudge with arrow keys, snap to the grid, and label everything as you go.

03

Arrange and refine

Multi-select, align, distribute, reorder layers, then add the next screen in the same project.

04

Save and share

Autosave keeps the canvas safe. Export a PNG for the deck, or send a public link to your client.

The stack

Runs anywhere cPanel does

No Composer, no Node build step, no external services. Upload the folder, run the four-step installer, and the whole thing is yours.

  • PHP 7.2 or newer with PDO MySQL — nothing else required
  • MySQL 5.7+ or MariaDB 10.2+, five tables, all InnoDB
  • The editor is vanilla JavaScript, so it keeps working offline once loaded
  • Passwords hashed with bcrypt, CSRF tokens on every mutating request
  • Canvases stored as plain JSON, so exports round-trip losslessly
Get started
Questions

Before you install

Do I need a licence key or an account with anyone?
No. This is a self-hosted application. Once it is installed on your hosting account there is nothing to activate and nothing phones home.
Where is my work stored?
In your own MySQL database, as JSON. You can export any screen to JSON at any time and re-import it later, or into a different installation.
Can I let clients view a wireframe without an account?
Yes. Switch a project to public in the editor and you get a read-only share link. Turn it off and the link stops working immediately.
Can I add my own components?
Yes. Components are declared in one file, assets/js/components.js. Add an entry with a default size and a render function, and it appears in the palette.

Your first wireframe is 30 seconds away

Create an account, open the editor, and start dropping boxes. Nothing to install on your machine.

Create free account
No credit card. No download. Your data stays on your own server.