PHPackages pixelcoda/typo3-storybook-fluid-api - 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. pixelcoda/typo3-storybook-fluid-api ActiveTypo3-cms-extension pixelcoda/typo3-storybook-fluid-api =================================== TYPO3 extension that provides an API to render TYPO3 Fluid templates and partials through HTTP/HTTPS requests. v1.0.0(1y ago)02[3 PRs](https://github.com/CasianBlanaru/typo3fluid-storybook-plugin-api/pulls)MITPHP Since Jan 16Pushed 2mo ago1 watchersCompare [ Source](https://github.com/CasianBlanaru/typo3fluid-storybook-plugin-api)[ Packagist](https://packagist.org/packages/pixelcoda/typo3-storybook-fluid-api)[ RSS](/packages/pixelcoda-typo3-storybook-fluid-api/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (1)Versions (9)Used By (0) TYPO3 Storybook Fluid API Extension \[Backend\] =============================================== [](#typo3-storybook-fluid-api-extension-backend) This TYPO3 extension provides an API to render TYPO3 Fluid templates and partials through HTTP/HTTPS requests. **Compatible with TYPO3 12.** Inspired by the [Storybook TYPO3 Fluid plugin](https://github.com/philip-hartmann/storybook-typo3fluid), this extension extends the functionality to facilitate rendering and testing TYPO3 Fluid templates in external tools such as Storybook or other frontend environments. Looking for the frontend integration? Check out the [TYPO3 Fluid Storybook Frontend](https://github.com/CasianBlanaru/typo3fluid-storybook). --- Features -------- [](#features) - **Render Fluid Templates via API**: Seamlessly render TYPO3 Fluid templates and partials through JSON-based HTTP requests. - **Rapid Frontend Development**: Connect TYPO3 templates with frontend tools like Storybook to test and preview components outside the TYPO3 environment. - **JSON-Based Communication**: Simplified integration with frontend applications using JSON request and response formats. - **TYPO3 v12 Compatible**: Fully compatible with TYPO3 12, leveraging the latest TYPO3 features. See her Frontend implementation: TYPO3 Fluid Storybook Frontend. --- Requirements ------------ [](#requirements) - A working TYPO3 instance with TYPO3 v12 installed. - TYPO3 site configured and accessible. --- Installation ------------ [](#installation) Install the extension via Composer: ``` composer req pixelcoda/typo3-storybook-fluid-api ``` Clear the TYPO3 cache after installation to ensure the extension is loaded: ``` php typo3cms cache:flush ``` --- Usage ----- [](#usage) ### API Endpoint [](#api-endpoint) The default API endpoint for rendering templates is: ``` /fluid/render ``` This endpoint accepts JSON payloads to specify templates, partials, and additional arguments. --- ### Request Structure [](#request-structure) You can send a POST request to the endpoint with the following JSON payload: ``` { "template": "Pages/Default", /* Path to the Fluid template */ "partial": "Atomics/Button", /* Optional path to a partial */ "section": "content", /* Optional section name */ "arguments": { /* Optional arguments for the template */ "key": "value" } } ``` --- ### Response Structure [](#response-structure) #### Success Response [](#success-response) ``` { "data": "Rendered Template", "error": "" } ``` #### Error Response [](#error-response) ``` { "data": "", "error": "Template or partial not found." } ``` --- Example Workflow with Storybook ------------------------------- [](#example-workflow-with-storybook) This example demonstrates how to integrate a TYPO3 Fluid template (`PersonsListTeaserFluid`) into Storybook for rendering and interactive customization. ### Fluid Template Import [](#fluid-template-import) The Fluid renderer is imported using the `FluidTemplate` function: ``` import FluidTemplate from '../../../../.storybook/typo3FluidTemplates'; ``` ### Define the Fluid Template Path [](#define-the-fluid-template-path) Specify the path to the Fluid template: ``` const PersonsListTeaserFluidpath = 'EXT:your_ext/Resources/Private/Partials/List/Item.html'; ``` ### Default Arguments [](#default-arguments) Define default values for the template variables: ``` const defaultArgs = { fullName: 'Max Mustermann', image: 'https://placehold.co/400x400/cc006e/white', detailPage: '/detail-page', position: 'Professor', work: 'Lehrt Physik und Mathematik', officeHours: 'Mo-Fr 10-12 Uhr', telephone: '+49 30 12345678', room: 'B-123', email: 'max.mustermann@example.com', }; ``` ### Storybook Configuration [](#storybook-configuration) The `PersonsListTeaserFluid` story is exported for use in Storybook: ``` export default { title: 'Molecules/PersonsListTeaserFluid', parameters: { layout: 'centered', }, argTypes: { fullName: { control: 'text', defaultValue: defaultArgs.fullName }, image: { control: 'text', defaultValue: defaultArgs.image }, detailPage: { control: 'text', defaultValue: defaultArgs.detailPage }, position: { control: 'text', defaultValue: defaultArgs.position }, work: { control: 'text', defaultValue: defaultArgs.work }, officeHours: { control: 'text', defaultValue: defaultArgs.officeHours }, telephone: { control: 'text', defaultValue: defaultArgs.telephone }, room: { control: 'text', defaultValue: defaultArgs.room }, email: { control: 'text', defaultValue: defaultArgs.email }, }, }; ``` ### Define the Template [](#define-the-template) Create a template function that renders the Fluid template: ``` const Template = (args) => { const html = FluidTemplate({ templatePath: PersonsListTeaserFluidpath, variables: { person: { fullName: args.fullName, image: args.image, detailPage: args.detailPage, position: { title: args.position }, work: args.work, officeHours: args.officeHours, telephone: args.telephone, room: args.room, email: args.email, }, }, }); return `${html}`; }; ``` ### Export the Story [](#export-the-story) The story is exported and connected to the default arguments: ``` export const PersonsListTeaserFluid = Template.bind({}); PersonsListTeaserFluid.args = { ...defaultArgs, }; ``` --- Benefits -------- [](#benefits) - **Interactive Testing**: Test Fluid templates dynamically in Storybook. - **Decoupled Development**: Render TYPO3 Fluid templates without a fully loaded TYPO3 environment. - **Modern Workflow**: Enable modern component-based frontend development. --- Contributing ------------ [](#contributing) We welcome contributions to improve this extension. If you encounter bugs or have feature suggestions, feel free to open an issue or submit a pull request on GitHub. --- License ------- [](#license) This extension is licensed under the [MIT License](LICENSE). --- Credits ------- [](#credits) Inspired by [storybook-typo3fluid](https://github.com/philip-hartmann/storybook-typo3fluid). Developed by [Casian Blanaru / PixelCoda](https://pixelcoda.de). ### Health Score 32 — LowBetter than 72% of packages Maintenance66 Regular maintenance activity Popularity2 Limited adoption so far Community11 Small or concentrated contributor base Maturity43 Maturing project, gaining track record Bus Factor1 Top contributor holds 69.4% 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 Unknown Total 1 Last Release 481d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/639e33866578c6312793535f5e9f2509229e5872e72974d830209df8ae0be50f?d=identicon)[casianus](/maintainers/casianus) --- Top Contributors [![CasianBlanaru](https://avatars.githubusercontent.com/u/23030087?v=4)](https://github.com/CasianBlanaru "CasianBlanaru (25 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (5 commits)")[![tenki-cloud[bot]](https://avatars.githubusercontent.com/in/1191865?v=4)](https://github.com/tenki-cloud[bot] "tenki-cloud[bot] (4 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)") ### Embed Badge ![Health badge](/badges/pixelcoda-typo3-storybook-fluid-api/health.svg) ``` [![Health](https://phpackages.com/badges/pixelcoda-typo3-storybook-fluid-api/health.svg)](https://phpackages.com/packages/pixelcoda-typo3-storybook-fluid-api) ``` ### Alternatives [fluidtypo3/vhs This is a collection of ViewHelpers for performing rendering tasks that are not natively provided by TYPO3's Fluid templating engine. 1954.1M49](/packages/fluidtypo3-vhs)[in2code/powermail Powermail is a well-known, editor-friendly, powerful and easy to use mailform extension for TYPO3 with a lots of features 982.5M38](/packages/in2code-powermail)[typo3/testing-framework The TYPO3 testing framework provides base classes for unit, functional and acceptance testing. 675.0M775](/packages/typo3-testing-framework)[fluidtypo3/flux The flux package from FluidTYPO3 152982.2k20](/packages/fluidtypo3-flux)[netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 63991.3k4](/packages/netresearch-rte-ckeditor-image)[friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 96374.6k23](/packages/friendsoftypo3-content-blocks) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)