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(4mo ago)9541.0k—7.2%6[3 issues](https://github.com/e0ipso/twig-storybook/issues)GPL-2.0-or-laterPHPPHP >=8.1CI failing Since Jan 2Pushed 4mo 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 1mo 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 52 — FairBetter than 96% of packages Maintenance71 Regular maintenance activity Popularity45 Moderate usage in the ecosystem Community17 Small or concentrated contributor base Maturity61 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 123d 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 [sylius/sylius E-Commerce platform for PHP, based on Symfony framework. 8.4k5.6M651](/packages/sylius-sylius)[simplesamlphp/simplesamlphp A PHP implementation of a SAML 2.0 service provider and identity provider. 1.1k12.4M193](/packages/simplesamlphp-simplesamlphp)[shopware/platform The Shopware e-commerce core 3.3k1.5M3](/packages/shopware-platform)[drupal/core Drupal is an open source content management platform powering millions of websites and applications. 19562.3M1.3k](/packages/drupal-core)[sulu/sulu Core framework that implements the functionality of the Sulu content management system 1.3k1.3M152](/packages/sulu-sulu)[contao/core-bundle Contao Open Source CMS 1231.6M2.4k](/packages/contao-core-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)