Preview in the playground

Explore installed components locally without writing to the theme or connecting to Ghost.

From a configured Ghost theme with components installed:

npx ghostcn@1.4.0 playground

Open the loopback URL printed by the CLI. The default port is 4190; pass --port 0 to pick an available one. Select a component, try supported style and content parameters, and switch color schemes or simulated membership states. Copy the resulting Handlebars call into your own template to keep it. Changes to component files refresh the preview without discarding your selected options. Stop with Ctrl+C.

The playground is read-only and uses sample content. It does not activate a theme, send email, or start checkout. Test actual Ghost queries, editor cards, Portal, comments, and access rules in your publication.

For Tailwind themes, keep npm run dev or your own CSS watcher running separately. Utilities typed only into preview fields are not compiled. Put complete utility names in a scanned .hbs file to make them available to the build.