Kirby 3 Storybook - Live preview for snippets and templates

I am creating posts for my plugins to make it easier to find them using the forum search and not just the docs search.

With this plugin you can now automatically generate stories for Storybook from snippets and templates.

Storybook is a great way to preview and publish for collaboration of component based UI designs. For me personally it can often replace tools like browser-sync or live-reload while adding easy to use gadgets like a ruler and device size simulation.

Once setup you can define placeholders for the variables used in your PHP code. A basic example would be using a Yaml file but JSON for a KQL Query and a raw PHP injection method are available as well.

The plugin will generate Vue SFC stories referencing to a HTML file. This way you can customize title, variants or add documentation pages while the plugin will only every update the HTML file.

site/snippets/blockquote.php

<blockquote>
    <?= $blockquote ?>
    <cite>- <?= $cite ?></cite>
</blockquote>

site/snippets/blockquote.stories.yml

blockquote: Autem consequatur ...
cite: Expedita

3 Likes