Component Guide

Editors can't tell which Matrix block is which. When a field accepts a dozen block types, the only way to find out what "Feature Split" looks like is to add one and look at it.

Component Guide shows a live preview of every block a field accepts, rendered from your own Twig templates — and gives developers and clients a component library in the control panel to look at, try out and sign off every block you build.

For editors

• Blocks gallery on every Matrix field. Grouped, searchable previews with descriptions, in the entry editor and in Live Preview.
• Variants as cards. Light or dark, image left or right — each variant can be a card of its own, so the layout you want is the one you pick.
• One click adds the block, prefilled with that variant's content, with Undo. (Pro)
• Their own variants. An editor saves a block as they filled it, as a card of their own, and can hand it to a developer as a ready-made story. (Pro)

For client sign-off

The blocks themselves, before launch — not the content of your pages.

• Try a block before it is on a page. Under each preview, Controls lists the block's fields — text, choices, on/off, images from the site's assets — and the preview re-renders as you type, on desktop, tablet and phone.
• Made for staging. A client with a control-panel account opens the blocks of the sprint and tries them with their own words and pictures. Nothing they try is saved.
• Approve, or ask for changes. The client approves each story as written, or asks for changes with a comment — the values they tried come with it. Everyone sees where each block stands: to review, approved, changes requested. (Pro)
• Approvals land in git. Export the decisions from staging; one command writes each approval into its story file, with who and when, so production knows what was signed off. Change the block afterwards and it is back to review. (Pro)
• Send what you see. The page's address carries the changes; Copy as story turns a case into a story the developer adds to the library, signed with who made it and when.

For developers

• A component library of the templates you already have. Every Twig component in a folder, by group, with live previews rendered with your site's CSS. Previews come from the actual template, so they can't go stale.
• Block templates work as they are — including ones that read block.heading or block.cards.all() themselves. Stories are plain files next to the template, versioned in git; one click scaffolds the first draft.
• A contract check flags a story that sets a field the entry type doesn't have — in the control panel, and as a CI step on Pro.

Editions

Lite — free, on any site including production: component library, live previews, Controls, the contract check, and the blocks gallery to browse.

Pro — $99 per site, then $39/year for updates after the first year; free in development and staging: one-click prefilled insertion with Undo, editors' own variants, client review with approvals written into your story files, and the contract check in CI.

Worth knowing

• Previews are as accurate as the CSS you point them at.
• Client review signs off blocks — how each one looks and behaves — not the content editors put on pages.
• Each block type needs a template file of its own. Templates that run their own craft.entries queries preview whatever those queries find.
• Matrix fields only, not Neo.
• Requires Craft CMS 5 and PHP 8.2+. Tested on Craft Cloud.