PHPackages bnomei/kirby3-storybook - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. bnomei/kirby3-storybook ActiveKirby-plugin[Templating & Views](/categories/templating) bnomei/kirby3-storybook ======================= Kirby Plugin to generate Storybook stories from PHP snippets and templates 2.0.2(8mo ago)23941MITPHPPHP >=8.2CI passing Since Dec 19Pushed 8mo ago2 watchersCompare [ Source](https://github.com/bnomei/kirby3-storybook)[ Packagist](https://packagist.org/packages/bnomei/kirby3-storybook)[ RSS](/packages/bnomei-kirby3-storybook/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (8)Dependencies (8)Versions (9)Used By (0) Kirby Storybook =============== [](#kirby-storybook) [![Release](https://camo.githubusercontent.com/b97365cccca95568d8680d80a4dd269c39e29c5083109cfa194028b8d29f409f/68747470733a2f2f666c61742e62616467656e2e6e65742f7061636b61676973742f762f626e6f6d65692f6b69726279332d73746f7279626f6f6b3f636f6c6f723d6165383166662669636f6e3d676974687562266c6162656c)](https://camo.githubusercontent.com/b97365cccca95568d8680d80a4dd269c39e29c5083109cfa194028b8d29f409f/68747470733a2f2f666c61742e62616467656e2e6e65742f7061636b61676973742f762f626e6f6d65692f6b69726279332d73746f7279626f6f6b3f636f6c6f723d6165383166662669636f6e3d676974687562266c6162656c)[![Discord](https://camo.githubusercontent.com/36eaef1b06f4996feb7587aa3281dcbd658e57535bc6b5e10110ed108e7a7a03/68747470733a2f2f666c61742e62616467656e2e6e65742f62616467652f646973636f72642f626e6f6d65693f636f6c6f723d3732383964612669636f6e3d646973636f7264266c6162656c)](https://discordapp.com/users/bnomei)[![Buymecoffee](https://camo.githubusercontent.com/62e55d1129b82bf9c2fd4656451e81ab87a9787e7c9676ca58276532ed9666ee/68747470733a2f2f666c61742e62616467656e2e6e65742f62616467652f69636f6e2f646f6e6174653f69636f6e3d6275796d6561636f6666656526636f6c6f723d464638313346266c6162656c)](https://www.buymeacoffee.com/bnomei) Kirby Plugin to generate [Storybook](https://storybook.js.org/) stories from PHP snippets and templates. [![screenshot](https://raw.githubusercontent.com/bnomei/kirby3-storybook/main/screenshot.png)](https://raw.githubusercontent.com/bnomei/kirby3-storybook/main/screenshot.png) Install ------- [](#install) ### Plugin [](#plugin) Using composer: ``` composer global require getkirby/cli composer require bnomei/kirby3-storybook --dev ``` You need to install the CLI with composer since this plugin depends on the CLI to be available either globally or locally. ### Storybook & Vue3 [](#storybook--vue3) Please refer to the [official docs](https://storybook.js.org/docs/get-started/install) on how to install Storybook if in doubt. ``` npx storybook@latest init --type vue3 # select vite as bundler and then... npm install @vitejs/plugin-vue --save-dev ``` Tip I used Storybook@^8.4 and Vue3 with Vite as bundler for my test. ### Vite Config [](#vite-config) If you are using Vite as your bundler you might need to adjust the `vite.config.mjs` to properly load Vue components. ``` import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [vue()], }); ``` Usage ----- [](#usage) ### Creating stories [](#creating-stories) The plugin can load data for your Snippet/Template files. You can use three different ways for Snippets and two for Templates. Check out the [tests in this repository to see some examples](https://github.com/bnomei/kirby3-storybook/tree/master/tests/site). #### Snippet stories [](#snippet-stories) Let's assume a snippet named `example.php` in either `site/snippets` or registered via a plugin extension. Add any of these files into the same folder as the snippet. - `example.stories.yml` containing an array with a key-value pair for each PHP variable you need. - `example.stories.json` containing a KQL Query you want to be extracted into the snippet. - or add the `extract(storybook($YOUR_DATA_ARRAY), EXTR_SKIP);` call to the head of your snippet. #### Template stories [](#template-stories) Let's assume a template named `blog.php` in either `site/templates` or registered via a plugin extension. Add any of these files into the same folder as the template. - `blog.stories.yml` containing either an `id` key with the id of a page to load as value or an array called `virtual` with all data needed for a `Page::factory()` call. - `blog.stories.json` containing a KQL Query you want to be extracted into the template. ### Storybook and the plugins file watcher [](#storybook-and-the-plugins-file-watcher) You need to run two tasks. First start Storybook. ``` npm run storybook ``` Note Make sure you can run storybook after installation at least once without errors. Then remove the demo files or copy them to a different location in case you need them for reference (like I usually do). Secondly, in a different shell run the file watcher powered by the Kirby Storybook plugin. ``` kirby storybook:watch ``` The file watcher provided by this plugin needs the Kirby CLI and has various options for interval, displaying errors, running only once and a file pattern match. Call with `--help` for details. Some examples: ``` kirby storybook:watch --help kirby storybook:watch --errors --once kirby storybook:watch --interval 5000 kirby storybook:watch --pattern article kirby storybook:watch --pattern '/.*blocks\/.*/' ``` ### Generated Files [](#generated-files) The plugin will use the file watcher to monitor your Snippet/Template files and their story config files (aka `*.stories.yml|json`). If any of these files changes it will generate or overwrite the corresponding files in your Storybook `stories` folder. Creating subfolders as needed to match Kirby's extension registry (like `snippets/blocks`). It will NOT remove any files. There are three files created for each story. - `Example.html` contains the rendered HTML and will be **overwritten on changes** to the source files. - `Example.stories.js` defines details about your story for Storybook, like title or variants. It will only be created if missing. You can edit it as you like. - `Example.vue` standard Vue SFC. It references to the HTML file. This file allows you to add custom js/css or when the source is finalized remove the reference, copy the HTML into the vue-file and add support for variants etc. Tip The plugin will not overwrite the `*.stories.@(js|jsx|mjs|ts|tsx)` and `*.vue` files if they already exist. This allows you to customize the stories as needed with the full power of Storybook. #### Adding your CSS and JS assets [](#adding-your-css-and-js-assets) You could add the reference your a single css file manually with `` and import all your scripts to each vue SFC. But my suggested method [out of 6](https://betterprogramming.pub/6-ways-to-configure-global-styles-for-storybook-faa1517aaf1a) would be to import your assets in the `./storybook/preview.js` and/or `.storybook/main.js` that storybook created. See example below: **./storybook/preview.ts** ``` + import './../assets/css/app.css' + import "./../assets/js/alpine.min" import type { Preview } from "@storybook/vue3"; const preview: Preview = { parameters: { controls: { matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, }, }; export default preview; ``` **./storybook/main.ts** ``` ... "docs": { "docsPage": true }, + "previewHead": (head) => (` + + + ${head} + `), ``` Settings -------- [](#settings) bnomei.storybook.DefaultDescriptioncli`callback`detect if is cli and only then inject valuesfolder`callback`logic to find you Storybook stories folder, adjust if neededstories.json`callback`if KQL exists allow loading from json filesstories.yml`true`allow loading from yml filesstories.ignore`[...]`array of string, if matches any file will not be renderedDependencies ------------ [](#dependencies) - [Storybook](https://storybook.js.org/) - [Kirby CLI](https://github.com/getkirby/cli) - [Symfony Finder](https://symfony.com/doc/current/components/finder.html) Disclaimer ---------- [](#disclaimer) This plugin is provided "as is" with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment. If you find any issues, please [create a new issue](https://github.com/bnomei/kirby3-storybook/issues/new). License ------- [](#license) [MIT](https://opensource.org/licenses/MIT) It is discouraged to use this plugin in any project that promotes racism, sexism, homophobia, animal abuse, violence or any other form of hate speech. ### Health Score 41 — FairBetter than 89% of packages Maintenance58 Moderate activity, may be stable Popularity19 Limited adoption so far Community9 Small or concentrated contributor base Maturity64 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~139 days Recently: every ~240 days Total 8 Last Release 269d ago Major Versions 1.0.4 → 2.0.02024-12-01 PHP version history (2 changes)1.0.0PHP >=8.0 2.0.0PHP >=8.2 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3265642?v=4)[Bruno Meilick](/maintainers/bnomei)[@bnomei](https://github.com/bnomei) --- Top Contributors [![bnomei](https://avatars.githubusercontent.com/u/3265642?v=4)](https://github.com/bnomei "bnomei (34 commits)") --- Tags componentcomponent-basedfilewatcherkirbykirby-cmskirby-pluginkirby3kirby4kirby5slotslotssnippetsstorybookstorybookjstemplatesvuevue3templatecomponentvuekirbykirby-pluginkirby-cmscomponent-basedstorybooksnippetvue3slotsslotfilewatcher ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/bnomei-kirby3-storybook/health.svg) ``` [![Health](https://phpackages.com/badges/bnomei-kirby3-storybook/health.svg)](https://phpackages.com/packages/bnomei-kirby3-storybook) ``` ### Alternatives [bnomei/kirby3-janitor Kirby Plugin for running commands like cleaning the cache from within the Panel, PHP code or a cronjob 9339.9k2](/packages/bnomei-kirby3-janitor)[leitsch/kirby-blade Enable Laravel Blade Template Engine for Kirby 4 and Kirby 5 219.2k](/packages/leitsch-kirby-blade)[bnomei/kirby-janitor Kirby Plugin for running commands like cleaning the cache from within the Panel, PHP code or a cronjob 922.8k1](/packages/bnomei-kirby-janitor)[beebmx/kirby-blade Blade template for Kirby 151.8k2](/packages/beebmx-kirby-blade)[bnomei/kirby3-feed Generate a Atom/JSON/RSS-Feed and XML-Sitemap from Pages-Collections 7224.8k](/packages/bnomei-kirby3-feed)[getkirby/layouts Kirby Layouts 428.4k](/packages/getkirby-layouts) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)