Trickroom

The dimensions twisted!

Design is Code

Trickroom is a local design workspace for web interfaces. It is built heavily around React and Tailwind, so what you make stays close to how those libraries operate. It also lives inside your codebase by design, so you can leverage the wonders of git!

Trickroom is not trying to be a general-purpose image editor! It is a small, focused place to lay the foundation for your product's UI with the same building blocks you use in code.

Usage

Install Trickroom globally:

npm install -g trickroom

Start the project without a folder selected:

trickroom

Then run it from the project you want to design in:

trickroom .

Or pass a project directory explicitly:

trickroom /path/to/your/project

If you don't want to use the Electron app, this CLI is your best bet. Trickroom will open a local browser tab on port 18100 and onboards you on setting up your project, and works best if you initialize it inside your web ui / styling library!

Create a design file, start adding layers and apply Tailwind class names directly. Changes autosave as JSON files under .trickroom/designs, meaning both tracking/version control as well as reviewing designs as code are as easy as can be.

Extremely Random

The name trickroom is a nod to the fact that, just like Tailwind, Trick Room is an important speed control move in competitive Pokémon / VGC.