Visual Tooling

Paperclip comes with visual tooling that allows you to see your UI changes instantly.

There are two options:

  1. For VS Code users, you can install the extension.
  2. For non-vscode users, you can install the CLI tools.

VS Code extension#

I highly recommend using the VS Code extension since you can launch previews directly from the IDE, and changes appear as you type.

alt Realtime editing

Check out the VS Code extension guide for more info.

CLI dev server#

If you don't have VS Code, you can just run the CLI tool:

npx paperclip-cli dev

This will launch Paperclip's visual tooling in the browser. Changes that are saved locally will appear immediately here.

alt Realtime editing

Note that there are some limitations to the dev server. For example, you won't be able to move frames around, and you won't be able to jump to source code via meta + click. That functionality is only available for the IDE extensions.

Edit this page