PHPackages e0ipso/twig-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. e0ipso/twig-storybook ActiveLibrary[Templating & Views](/categories/templating) e0ipso/twig-storybook ===================== Extends Twig with new "stories" and "story" tags for easily writing Storybook stories using Twig templates. v1.6.1(7mo ago)9689.5k↓19.5%6[3 issues](https://github.com/e0ipso/twig-storybook/issues)GPL-2.0-or-laterPHPPHP >=8.1CI failing Since Jan 2Pushed 7mo ago2 watchersCompare [ Source](https://github.com/e0ipso/twig-storybook)[ Packagist](https://packagist.org/packages/e0ipso/twig-storybook)[ RSS](/packages/e0ipso-twig-storybook/feed)WikiDiscussions main Synced 2w ago READMEChangelog (10)Dependencies (14)Versions (27)Used By (0) Twig Storybook ============== [](#twig-storybook) [![GitHub](https://camo.githubusercontent.com/5280dda87dcfae8f975c28b6195e2d8adf1acda9a1ae0d56d0b9b0a82598f396/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f65306970736f2f747769672d73746f7279626f6f6b)](https://camo.githubusercontent.com/5280dda87dcfae8f975c28b6195e2d8adf1acda9a1ae0d56d0b9b0a82598f396/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f65306970736f2f747769672d73746f7279626f6f6b)[![GitHub release (latest by date)](https://camo.githubusercontent.com/8cd1882ca36e0f7e4d25b6dacbb3ca0cb80a54bf7da8f083c28dcd5a341896a5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f65306970736f2f747769672d73746f7279626f6f6b)](https://camo.githubusercontent.com/8cd1882ca36e0f7e4d25b6dacbb3ca0cb80a54bf7da8f083c28dcd5a341896a5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f65306970736f2f747769672d73746f7279626f6f6b)[![GitHub issues](https://camo.githubusercontent.com/7737194e35a691617cc54b8c9e5b8f1f2d6471563c0e6e46c420133ad161f6fa/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732d7261772f65306970736f2f747769672d73746f7279626f6f6b)](https://camo.githubusercontent.com/7737194e35a691617cc54b8c9e5b8f1f2d6471563c0e6e46c420133ad161f6fa/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732d7261772f65306970736f2f747769672d73746f7279626f6f6b) Twig Storybook is a Composer package that enhances the Twig templating language by introducing two new Twig tags: `stories` and `story`. With Twig Storybook, you can easily create and manage Storybook stories directly in your Twig templates, making it a powerful tool for documenting and showcasing your frontend components. Table of Contents ----------------- [](#table-of-contents) - [Installation](#installation) - [Usage](#usage) - [Contributing](#contributing) - [License](#license) Installation ------------ [](#installation) You can install Twig Storybook via Composer: ``` composer require e0ipso/twig-storybook ``` Usage ----- [](#usage) ### With Drupal [](#with-drupal) You don't need to use this package directly, use the [Storybook](https://www.drupal.org/project/storybook)drupal module instead. This library is compatible with Drupal 10, and later. ### Adding Twig Tags [](#adding-twig-tags) After installing the package, you need to register the Twig tags in your Twig environment. Here's how you can do it: ``` use Twig\Environment; use Twig\Loader\FilesystemLoader; use TwigStorybook\Twig\StorybookExtension; // Initialize the Twig environment $loader = new FilesystemLoader('path/to/your/templates'); $twig = new Environment($loader); // Register the Storybook extension $twig->addExtension(new \TwigStorybook\Twig\TwigExtension()); ``` ### Creating Stories [](#creating-stories) Once the Twig Storybook extension is registered, you can start creating stories within your Twig templates. We recommend writing the stories in a file with name `.stories.twig`. - Use the `{% stories %}` tag to define a group of stories. - Use the `{% story %}` tag to define an individual story. Here's an example: ``` {% stories my_card with { title: 'Components/Examples/Card', argTypes: { iconType: { options: { Power: 'power', Like: 'like', External: 'external' }, control: 'radio' } } } %} {% story default with { name: '1. Default', args: { header: 'I am a header!', text: 'Learn more', iconType: 'power' } } %} {% embed '@examples/my-card' with { header } %} {% block card_body %} I am the card contents. {% include '@examples/my-button' with { text, iconType } %} {% endblock %} {% endembed %} {% endstory %} {% endstories %} ``` This will render as: [![Storybook Screenshot](./docs/sb-screenshot.png)](./docs/sb-screenshot.png) ### Storybook setup [](#storybook-setup) Install Storybook as usual: ``` # Make use of modern versions of yarn. yarn set version berry # Avoid pnp. echo 'nodeLinker: node-modules' >> .yarnrc.yml # Install and configure stock Storybook. yarn dlx sb init --builder webpack5 --type server ``` Then update `.storybook/main.js` to scan for stories where your application stores them. ### Compiling Twig stories into JSON [](#compiling-twig-stories-into-json) The Storybook application will does not understand stories in Twig format. It will fail to render them. You need to compile them into a `*.stories.json`. To do so, you can leverage the `StoryRenderer::generateStoriesJsonFile($template_path, $url)` method. Where the `$template_path` is the location of the `*.stories.twig` template, and the `$url` is the base URL in your application that will render the story. Storybook will make a request to `"$url . '/' . $hash"`, so make sure your application handles that route (see below). The [Drupal module implementation](https://www.drupal.org/project/storybook) includes a console command to find all `*.stories.twig` and compile them into `*.stories.json`. [See the implementation](https://git.drupalcode.org/project/storybook/-/blob/1.x/src/Drush/Commands/StorybookCommands.php). ### Rendering Stories [](#rendering-stories) To render the Storybook stories, you can use the `StoryRenderer` service. Every framework handles routes differently, but we recommend using the story renderer inside your controller. ``` public function renderStoryControllerHandler(string $hash, Request $request): array { $data = $this->storyRenderer->renderStory($hash, $request); return new Response($data); } ``` To use this service, wire the services to the container. The Twig Storybook Drupal module does it like this: ``` services: logger.channel.twig_storybook: parent: logger.channel_base arguments: ['twig_storybook'] TwigStorybook\Service\StoryCollector: {} TwigStorybook\Service\StoryRenderer: arguments: - '@TwigStorybook\Service\StoryCollector' - '@logger.channel.twig_storybook' - '%app.root%' calls: - ['setTwigEnvironment', ['@twig']] TwigStorybook\Twig\TwigExtension: arguments: - '@TwigStorybook\Service\StoryCollector' - '%app.root%' tags: - { name: twig.extension } ``` Contributing ------------ [](#contributing) We welcome contributions from the community. If you want to contribute to Twig Storybook, please follow these guidelines: 1. Fork the repository. 2. Create a new branch for your feature or bug fix. 3. Make your changes and ensure all tests pass. 4. Submit a pull request with a clear description of your changes. Make sure to follow the [code of conduct](CODE_OF_CONDUCT.md) when interacting with this community. License ------- [](#license) Twig Storybook is open-source software licensed under the [GPL-2 License](LICENSE). ### Health Score 49 — FairBetter than 94% of packages Maintenance58 Moderate activity, may be stable Popularity46 Moderate usage in the ecosystem Community17 Small or concentrated contributor base Maturity62 Established project with proven stability Bus Factor1 Top contributor holds 87.5% 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 ~32 days Recently: every ~107 days Total 24 Last Release 213d ago Major Versions 0.0.1 → v1.0.02024-01-02 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/1140906?v=4)[Mateu Aguiló Bosch](/maintainers/e0ipso)[@e0ipso](https://github.com/e0ipso) --- Top Contributors [![e0ipso](https://avatars.githubusercontent.com/u/1140906?v=4)](https://github.com/e0ipso "e0ipso (56 commits)")[![semantic-release-bot](https://avatars.githubusercontent.com/u/32174276?v=4)](https://github.com/semantic-release-bot "semantic-release-bot (4 commits)")[![idiazroncero](https://avatars.githubusercontent.com/u/3958741?v=4)](https://github.com/idiazroncero "idiazroncero (1 commits)")[![Natshah](https://avatars.githubusercontent.com/u/1641992?v=4)](https://github.com/Natshah "Natshah (1 commits)")[![neclimdul](https://avatars.githubusercontent.com/u/82823?v=4)](https://github.com/neclimdul "neclimdul (1 commits)")[![pixelwhip](https://avatars.githubusercontent.com/u/967665?v=4)](https://github.com/pixelwhip "pixelwhip (1 commits)") --- Tags phpstorybooktwigtwig-extension ### Code Quality TestsPHPUnit Static AnalysisPHPStan Code StylePHP\_CodeSniffer Type Coverage Yes ### Embed Badge ![Health badge](/badges/e0ipso-twig-storybook/health.svg) ``` [![Health](https://phpackages.com/badges/e0ipso-twig-storybook/health.svg)](https://phpackages.com/packages/e0ipso-twig-storybook) ``` ### Alternatives [easycorp/easyadmin-bundle Admin generator for Symfony applications 4.3k18.3M430](/packages/easycorp-easyadmin-bundle)[drupal/core Drupal is an open source content management platform powering millions of websites and applications. 19467.3M1.9k](/packages/drupal-core)[contao/core-bundle Contao Open Source CMS 1301.7M3.1k](/packages/contao-core-bundle)[drupal/core-recommended Locked core dependencies; require this project INSTEAD OF drupal/core. 6943.5M449](/packages/drupal-core-recommended)[shopware/core Shopware platform is the core for all Shopware ecommerce products. 595.8M672](/packages/shopware-core)[flow-php/flow PHP ETL - Extract Transform Load - Data processing framework 86337.5k](/packages/flow-php-flow) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)