Workspaces
UI Drafter is an installable web app that works privately.
- You can Save to disk as a traditional file.
- And your files are auto-saved in your computer.
Home
The Home workspace is for file management. It's reachable by clicking the top-left logo.
Drafter Workspace
For now, glance over where the Card and Entry actions are. Then, take a look at the Cards and compare them with the next section.
Previewer Workspace
In Previewer, Cards become interactive pages. Also, you can change some options such as using a dropdown vs. radio buttons.
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 too. If that's undesirable, you can either:
- File → Duplicate before previewing, or
- View → Preview 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.
Tips
Exporting for Graphic Design Programs
In Previewer, use the browser's Print → Save as PDF. That PDF serves as an editable starting point you can import into graphic design programs.
Distraction Free Mode
As most actions are available in context menus (right-click) and Shortcuts, you can hide the Toolbar and Side Panels using the View menu. At any rate, the top menubar has all the actions.
File History and Collaboration
The files are in JSON format. Therefore, you can collaborate and keep track
of their history in a version control system like
git,
or share them as traditional files.