Playground
Try Granularity in the browser
A full editor on its own domain. It compiles single-file components as you type, shows the result at three widths and keeps the code in the link, so you can paste it straight into an issue.
Start from a screen
All 8 screens from Examples, file for file, and an empty start. Each opens in the playground with a link of its own.
Blank
One button and a counter: the smallest file that is still an example.
components: 1Open
Operations dashboard
A working console for a team that ships and gets paged, built from the core package alone.
components: 12Open
Access control
An admin screen where you act on records: filter, select, edit, and are told what the selection actually covers.
components: 11Open
Import and export
The first screen here where an action takes time, and the only one that admits a job can half-succeed.
components: 9Open
Command centre
A keyboard-first screen that stays usable without a keyboard, and a palette that runs commands rather than finding pages.
components: 7Open
Sign in
A working sign-in screen with all five of its states reachable, including the two nobody designs.
components: 9Open
Workspace settings
A settings screen that commits to one save model and says so on the page.
components: 13Open
Your profile
Where the save model meets its exception: edits wait, actions do not.
components: 8Open
Publishing an article
Three reversible steps and one that is not, with the difference stated before the button rather than after.
components: 10Open
What it does for you
The link is the save
Every edit is written into the address, and Share copies it. Nothing is kept on a server: the link is the only copy, and it is all a bug report needs.
The same files as Examples
Templates are read from the sources of the example screens at build time. Change an example and the playground changes with it.
Take it home
Export hands you a project that runs: package.json with exact versions, the Vite and granum configs, an entry point and your files. Copy it or download a .zip.
Why a separate domain. The playground runs code from links anyone can prepare. It lives on play.granularity.tech, a different origin, so such code never runs next to the documentation.