Component Guide

Component Guide is a Storybook-style component browser that lives inside the Craft control panel — no separate Node toolchain, no second dev environment.

It works with the templates you already have, right where they live. Drop a GUIDE.md marker file into your blocks folder and every Twig template in it appears in the guide immediately — no configuration, no registration, no migration. Add a story file next to a template and it gets a live preview, rendered with your site's own CSS once you point the guide at it.

For developers

• Instant inventory. A marker file lists every component you already have, documented or not.
• Stories are plain files. A .stories.twig (or .stories.php) next to the template, versioned in git like everything else.
• Scaffolding. One click writes a first-draft story from the template's own variables — including one story per state the template switches on (light/dark, media left/right).
• Placeholder tokens. @lorem_p_2, @image_1600x600, @icon_star — say what kind of content a story needs instead of pasting it.

For editors

• Blocks gallery in Live Preview. Every Matrix page-builder field gets a gallery of real component previews with descriptions. Click one to add that block — in inline-editable fields it's prefilled from the story, so it's visible on the page straight away.

Zero lock-in

Nothing in your content or templates depends on the plugin. Remove it and your project is exactly as it was.

Worth knowing. Previews are as accurate as the CSS you point them at. Components that query Craft themselves need a story that passes plain arrays instead — presentational components work as-is.

Requirements: Craft CMS 5, PHP 8.2+