PHPackages andersundsehr/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. andersundsehr/storybook ActiveTypo3-cms-extension[Templating & Views](/categories/templating) andersundsehr/storybook ======================= The one and only Storybook Renderer for TYPO3 Fluid Components 0.1.37(3d ago)214.0k3[15 issues](https://github.com/andersundsehr/storybook/issues)[2 PRs](https://github.com/andersundsehr/storybook/pulls)GPL-2.0-or-laterPHPPHP ~8.3.0 || ~8.4.0 || ~8.5.0CI failing Since Jul 28Pushed 2w ago1 watchersCompare [ Source](https://github.com/andersundsehr/storybook)[ Packagist](https://packagist.org/packages/andersundsehr/storybook)[ RSS](/packages/andersundsehr-storybook/feed)WikiDiscussions main Synced today READMEChangelog (10)Dependencies (31)Versions (40)Used By (0) `EXT:storybook` =============== [](#extstorybook) [![TYPO3 Version](https://camo.githubusercontent.com/0ba951e780451a9ad3256afd5a24c86db57b8143a3750f930d8a7f123065d252/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f616e64657273756e64736568722f73746f7279626f6f6b2f7479706f33253246636d732d636f72653f7374796c653d666c61742d737175617265266c6f676f3d7479706f3326636f6c6f723d6f72616e6765)](https://camo.githubusercontent.com/0ba951e780451a9ad3256afd5a24c86db57b8143a3750f930d8a7f123065d252/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f616e64657273756e64736568722f73746f7279626f6f6b2f7479706f33253246636d732d636f72653f7374796c653d666c61742d737175617265266c6f676f3d7479706f3326636f6c6f723d6f72616e6765)[![Storybook Version](https://camo.githubusercontent.com/d07f396892452e4d220fa9ee1aade26deb11b971a7ed3b23009e1cf40116513e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646570656e64656e63792d76657273696f6e2f253430616e64657273756e647365687225324673746f7279626f6f6b2d7479706f332f73746f7279626f6f6b3f7374796c653d666c61742d737175617265266c6f676f3d73746f7279626f6f6b26636f6c6f723d253233666634373835)](https://camo.githubusercontent.com/d07f396892452e4d220fa9ee1aade26deb11b971a7ed3b23009e1cf40116513e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646570656e64656e63792d76657273696f6e2f253430616e64657273756e647365687225324673746f7279626f6f6b2d7479706f332f73746f7279626f6f6b3f7374796c653d666c61742d737175617265266c6f676f3d73746f7279626f6f6b26636f6c6f723d253233666634373835)[![PHP Version](https://camo.githubusercontent.com/45750bc63dc1943e2f3b8fc5b90749d866ff136148dfc7a3efe997e97468ae8a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f616e64657273756e64736568722f73746f7279626f6f6b2f7068703f7374796c653d666c61742d737175617265266c6f676f3d706870)](https://camo.githubusercontent.com/45750bc63dc1943e2f3b8fc5b90749d866ff136148dfc7a3efe997e97468ae8a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f616e64657273756e64736568722f73746f7279626f6f6b2f7068703f7374796c653d666c61742d737175617265266c6f676f3d706870)[![Static Badge](https://camo.githubusercontent.com/ce09f40bbb273d3c12de8c7e70f2a023ad9662129d1a066c9fe50c26a907ff47/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f536c61636b2d5459504f332d6f72616e67653f7374796c653d666c61742d737175617265266c6f676f436f6c6f723d6f72616e6765266c6f676f3d736c61636b266c696e6b3d68747470732533412532462532467479706f332e736c61636b2e636f6d25324661726368697665732532464330393841515047584c4d)](https://camo.githubusercontent.com/ce09f40bbb273d3c12de8c7e70f2a023ad9662129d1a066c9fe50c26a907ff47/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f536c61636b2d5459504f332d6f72616e67653f7374796c653d666c61742d737175617265266c6f676f436f6c6f723d6f72616e6765266c6f676f3d736c61636b266c696e6b3d68747470732533412532462532467479706f332e736c61636b2e636f6d25324661726368697665732532464330393841515047584c4d) [![TYPO3 loves storybook](./Documentation/assets/TYPO3-loves-storybook.svg)](./Documentation/assets/TYPO3-loves-storybook.svg) [Getting Started](https://docs.typo3.org/permalink/andersundsehr-storybook:start) The TYPO3 extension [storybook](https://storybook.js.org/) integrates Storybook into TYPO3 projects. With the open-source tool Storybook, developers can develop and test UI components in isolation. It provides an environment where components can be visually displayed and interactively tested. The extension facilitates the development of TYPO3 frontend components by enabling seamless integration of Storybook into TYPO3. ### Features: [](#features) - render [TYPO3 Fluid components](https://docs.typo3.org/permalink/fluid:components) in Storybook - configure stories inside storybook with the standard [Storybook's CSF format](https://storybook.js.org/docs/api/csf) - **automatically generates controls** for your components [arguments](https://docs.typo3.org/permalink/t3viewhelper:typo3fluid-fluid-argument) and [slots](https://docs.typo3.org/permalink/t3viewhelper:typo3fluid-fluid-slot) - **Interactivity** via [Storybook's Controls](https://storybook.js.org/docs/essentials/controls), allowing you to change component properties in real-time - shows [Fluid **code snippets**](https://storybook.js.org/docs/writing-docs/code-panel) for each component, allowing you to copy the code directly from Storybook - wide range of [Storybook's addons](https://storybook.js.org/addons) are available to enhance the development experience, such as accessibility checks, design systems, and more Installation: How to install the extension? (Composer, manual, dependencies) ---------------------------------------------------------------------------- [](#installation-how-to-install-the-extension-composer-manual-dependencies) The extension can be installed via Composer: ``` composer require andersundsehr/storybook --dev ``` it is recommended to install storybook into your projects package.json file as well: ``` # !!! make sure to install the same version as the extension !!! npm install @andersundsehr/storybook-typo3 --save-dev # or yarn add @andersundsehr/storybook-typo3 --dev ``` set framework in your `.storybook/main.ts` file to `@andersundsehr/storybook-typo3` as shown below. After that you can run storybook with: ``` # run in dev mode: ./node_modules/.bin/storybook dev -p 6006 # or build it for production: ./node_modules/.bin/storybook build # preview the production build: npx http-server ./storybook-static ``` > Also See [full installation steps](https://docs.typo3.org/permalink/andersundsehr-storybook:installation) in the Getting Started Guide. Configuration: -------------- [](#configuration) ### Inside TYPO3: [](#inside-typo3) To be able to render your own Fluid components in Storybook, you need to configure your own [ComponentCollection](https://docs.typo3.org/permalink/fluid:components) and register the global fluid namespace in your `ext_localconf.php` file: ``` $GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']['my'] = Vendor\MyExtension\ComponentCollection::class; ``` ### Inside Storybook: [](#inside-storybook) You need your own `.storybook/main.ts` file in your project, which should look like this: ``` import type { StorybookConfig } from '@andersundsehr/storybook-typo3'; const config: StorybookConfig = { framework: '@andersundsehr/storybook-typo3', // required stories: [ "../src/**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))", ], core: { disableTelemetry: true, }, env: (envs) => { return { STORYBOOK_TYPO3_ENDPOINT: 'http://localhost/_storybook/', STORYBOOK_TYPO3_WATCH_ONLY_STORIES: '0', // set to '1' If you already use vite in your TYPO3 with HMR // do not set your api key here! https://www.deployhq.com/blog/protecting-your-api-keys-a-quick-guide ...envs, // envs given to storybook have precedence }; }, }; export default config; ``` Usage: How to use the extension? (Examples, screenshots, typical use cases) --------------------------------------------------------------------------- [](#usage-how-to-use-the-extension-examples-screenshots-typical-use-cases) With a story file like this: ``` import { type Meta, type StoryObj, fetchComponent } from '@andersundsehr/storybook-typo3'; export default { component: await fetchComponent('de:card'), } satisfies Meta; export const Pirate: StoryObj = { args: { title: 'Yar Pirate Ipsum', text: "Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.", link: 'https://www.andersundsehr.com', }, }; ``` and a Fluid component like this: ``` {title} {text} more .card { display: block; padding: 1rem; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; color: inherit; } .card__title { font-size: 1.5rem; margin-bottom: 0.5rem; } .card__text { font-size: 1rem; margin-bottom: 1rem; } .card__moreButton { display: inline-block; padding: 0.5rem 1rem; background-color: #007bff; color: white; border-radius: 4px; text-decoration: none; } ``` you get a Storybook interface that allows you to interactively test your component, like this: [![Storybook Overview](./.Build/dummy-project/tests/screenshot.spec.ts-snapshots/card-example-1-chromium-linux.png)](./.Build/dummy-project/tests/screenshot.spec.ts-snapshots/card-example-1-chromium-linux.png) You can Select the site and the language in the top right corner of the Storybook interface: [![Site select](./.Build/dummy-project/tests/screenshot.spec.ts-snapshots/screenshot-select-site-chromium-linux.png)](./.Build/dummy-project/tests/screenshot.spec.ts-snapshots/screenshot-select-site-chromium-linux.png)[![Language select](./.Build/dummy-project/tests/screenshot.spec.ts-snapshots/screenshot-select-language-chromium-linux.png)](./.Build/dummy-project/tests/screenshot.spec.ts-snapshots/screenshot-select-language-chromium-linux.png) Documentation: Where to find more information? (Links, references, tutorials) ----------------------------------------------------------------------------- [](#documentation-where-to-find-more-information-links-references-tutorials) - docs TODO link to hosted Storybook instance - docs TODO link to playwright report? Development: Notes for developers (e.g., code structure, important classes, extensibility) ------------------------------------------------------------------------------------------ [](#development-notes-for-developers-eg-code-structure-important-classes-extensibility) The Storybook framework is located in the `the-npm-package` folder inside the extension. It provides a custom framework for Storybook, which allows you to render TYPO3 Fluid components in Storybook. It is implemented in TypeScript and is designed to be used with Storybook's Component Story Format (CSF). The TYPO3 extension `storybook` uses a [Middleware](./Classes/Middleware/StorybookMiddleware.php) to handle requests to the Storybook endpoint. It has [Actions](./Classes/Action/) to give Storybook the necessary information. It renders the Fluid components using the corresponding ComponentCollection that must be registered in TYPO3 via `$GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']`. ### Development helpers: [](#development-helpers) the test setup is a nice location to get started with developing the extension. it also has a [dummy project](./.Build/dummy-project/) that can be used to test the extension in a real TYPO3 environment. Tests: How to run tests? Are there test data? --------------------------------------------- [](#tests-how-to-run-tests-are-there-test-data) Currently there are only integration tests with [Playwright](./.Build/dummy-project/tests/)to run the tests you can use the following command: ``` cd .Build/ bash test.sh executeAll ``` If you want to make changes to the extension, and than run the tests again you should do this: ``` cd .Build/ bash test.sh composerInstall bash test.sh storybookBuild bash test.sh watchMode # in different terminal: cd .Build/ bash test.sh playwright:ui # (X11 forwarding required) ``` Troubleshooting: Known issues, troubleshooting, FAQ --------------------------------------------------- [](#troubleshooting-known-issues-troubleshooting-faq) Changelog: Important changes and versions ----------------------------------------- [](#changelog-important-changes-and-versions) until now there are no breaking changes, but the extension is still in development. License and Authors: License type, contributors, contact information -------------------------------------------------------------------- [](#license-and-authors-license-type-contributors-contact-information) This extension is licensed under the [GPL-2.0-or-later](https://spdx.org/licenses/GPL-2.0-or-later.html) license. with ♥️ from anders und sehr GmbH ================================= [](#with-️-from-anders-und-sehr-gmbh) > If something did not work 😮 > or you appreciate this Extension 🥰 let us know. > We are always looking for great people to join our team! ### Health Score 50 — FairBetter than 95% of packages Maintenance84 Actively maintained with recent releases Popularity33 Limited adoption so far Community15 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 85.3% 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 ~11 days Recently: every ~18 days Total 32 Last Release 3d ago PHP version history (2 changes)0.1.6PHP ~8.3.0 || ~8.4.0 0.1.30PHP ~8.3.0 || ~8.4.0 || ~8.5.0 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/471387?v=4)[Matthias Vogel](/maintainers/Kanti)[@Kanti](https://github.com/Kanti) ![](https://www.gravatar.com/avatar/ce27306c234536251754f00414959671d4a775e9cf57cce2f5ea1dca158183d6?d=identicon)[andersundsehr](/maintainers/andersundsehr) --- Top Contributors [![Kanti](https://avatars.githubusercontent.com/u/471387?v=4)](https://github.com/Kanti "Kanti (110 commits)")[![jramke](https://avatars.githubusercontent.com/u/81250358?v=4)](https://github.com/jramke "jramke (9 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (8 commits)")[![georgringer](https://avatars.githubusercontent.com/u/1905663?v=4)](https://github.com/georgringer "georgringer (2 commits)") --- Tags componentcomponentsfluidstorybooktypo3typo3fluidstorybook ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/andersundsehr-storybook/health.svg) ``` [![Health](https://phpackages.com/badges/andersundsehr-storybook/health.svg)](https://phpackages.com/packages/andersundsehr-storybook) ``` ### Alternatives [friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[pagemachine/typo3-formlog Form log for TYPO3 23238.6k8](/packages/pagemachine-typo3-formlog)[typo3/cms-adminpanel TYPO3 CMS Admin Panel - The Admin Panel displays information about your site in the frontend and contains a range of metrics including debug and caching information. 115.7M66](/packages/typo3-cms-adminpanel)[typo3/cms-fluid-styled-content TYPO3 CMS Fluid Styled Content - Fluid templates for TYPO3 content elements. 229.4M387](/packages/typo3-cms-fluid-styled-content)[fluidtypo3/vhs This is a collection of ViewHelpers for performing rendering tasks that are not natively provided by TYPO3's Fluid templating engine. 2034.2M62](/packages/fluidtypo3-vhs)[pagemachine/searchable TYPO3 extension to index and search content with Elasticsearch 1039.9k](/packages/pagemachine-searchable) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)