Workspaces
Home
Home 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
Cards become interactive pages.
Initial Page
Previewer opens at the selected Card. Otherwise, at the topmost.
Undo works in Previewer too
Both workspaces share their undo history. For example, changing an input value in Previewer modifies it in Drafter too.
Alternatively, if that sharing is 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.
File Storage
For working offline, security, and privacy:
- UI Drafter automatically saves in your browser, and
- You can File → Save to Disk.
More about the file storage…
Your files don't leave your computer. They get saved in your browser database after every change. Therefore, if you have multiple tabs with the same file, the last edited one wins.
As the browser's Clear browsing data deletes all files, you can mitigate accidental deletions by creating an exclusive profile. For example, Google Chrome® has a Manage people feature where the storage of Profile A doesn't interfere with Profile B.
Similarly, you can User → Export all Files.
The saved and exported files are JSON, so you can keep track of
their history in a version control system like git.
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 the top menubar has all the actions, you can hide the Toolbar and Side Panels using the View menu. Also, most actions are available as context menus (right-click) and Shortcuts.