webdna / component-viewer

2.0.0 2026-10-19 12:37 UTC

Requires

• php: ^8.2
• craftcms/cms: ^5.0

proprietary

• webdna

• twig
• cms
• components
• Craft
• craftcms
• craft-plugin
• component-viewer

Published on Packagist.org on 2026-10-19 13:06 UTC

README

A Craft CMS 5 plugin for browsing, trying out and sharing a site's Twig components.

• In the control panel, the team browses every component a site has, by category or by search, and tries each one out with its settings and examples, previewed in each site's own styling on a desktop, tablet or phone.
• Through a share link, a client reviews the same library with no account. A link has a label and an expiry, and it can be revoked at any moment.
• Each component describes itself with a {% component %} block at the top of its own file, which renders nothing on the live site. Named examples live in a .stories.twig file beside it.
• The live site can't tell it's there, apart from being faster: the component list is built once and cached, and every existing way of including a component keeps working.

Requires Craft ^5.0 and PHP ^8.2.

Install

composer require webdna/component-viewer:^2.0
php craft plugin/install component-viewer

Then grant Access Component Viewer to the user groups that should see it. Control-panel access alone isn't enough. Setup covers the config file, the preview layout and the permissions.

A component

{# templates/_components/ui/button.twig #}
{% component {
    name: 'Button',
    status: 'ready',
    props: {
        label: 'Save',
        style: { type: 'select', default: 'primary', options: ['primary', 'secondary'] },
        disabled: false,
    },
} %}
<button class="btn btn--{{ style ?? 'primary' }}"{{ (disabled ?? false) ? ' disabled' }}>
    {{- label ?? 'Save' -}}
</button>

Include it as {% include '@ui:button' with { label: 'Send' } %}, or by its path as before.

Commands

php craft component-viewer/make ui/button           # a new component and its stories file
php craft component-viewer/check [--strict]         # lists broken components, exits 1 if any

Documentation

Guide	For
Setup	Installing on a new site: config file, preview layout, permissions
Component format	The component tag, props, stories, handles, site versions, the check
Share links	Creating, sending and revoking links for clients
Upgrading from v1	Moving a site off the v1 module
Resolver	Finding a site's version of any file from PHP

Changelog