UI Drafter is an installable web app.

  • You can Save to disk.
  • And your files are auto-saved in your computer.


The Home workspace is for file management. It’s reachable by clicking the top-left logo.

UI Drafter’s Home

Drafter Workspace

For now, glance over where Card and Entry actions are. Then, take a look at the Cards and compare them with the next section.

UI Drafter’s Drafter Workspace

Previewer Workspace

In Previewer, Cards become interactive pages. In this workspace, you can change the page background among other settings.

UI Drafter’s Previewer Workspace

Initial Page

Previewer opens at the selected Card. Otherwise, at the topmost.

Initial Workspace

Files remember their last active workspace.

Undo works in Previewer too

Both workspaces share their undo history. For example, changing an Entry value in Previewer modifies it in Drafter as well. If that’s undesirable, you can either:

  • FileDuplicate before previewing, or
  • PreviewerPreview in New Tab. This way Drafter and Previewer will have independent undo histories. But you’ll need to make the final edit in the tab you want to be saved in your browser storage. That edit could be arbitrary, or an Undo + Redo.


Exporting for Graphic Design Programs

In Previewer, use the browser’s PrintSave as PDF. That PDF serves as an editable starting point you can import into Adobe® Illustrator or Inkscape®.

Hiding Toolbars

You can hide the Toolbar and Side Panels using the View menu, because most actions are available in context menus (right-click) and Shortcuts, and the top Menubar has all them.

Next Cards  ️⇾