包简介

TYPO3 extension that provides an API to render TYPO3 Fluid templates and partials through HTTP/HTTPS requests.

README 文档

README

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, 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.

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

A working TYPO3 instance with TYPO3 v12 installed.
TYPO3 site configured and accessible.

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

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

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

Success Response

{
  "data": "<html>Rendered Template</html>",
  "error": ""
}

Error Response

{
  "data": "",
  "error": "Template or partial not found."
}

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

The Fluid renderer is imported using the FluidTemplate function:

import FluidTemplate from '../../../../.storybook/typo3FluidTemplates';

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

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

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

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 `<div>${html}</div>`;
};

Export the Story

The story is exported and connected to the default arguments:

export const PersonsListTeaserFluid = Template.bind({});
PersonsListTeaserFluid.args = {
    ...defaultArgs,
};

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

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

This extension is licensed under the MIT License.

Credits

Inspired by storybook-typo3fluid. Developed by Casian Blanaru / PixelCoda.

pixelcoda/typo3-storybook-fluid-api 适用场景与选型建议

pixelcoda/typo3-storybook-fluid-api 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 2 次下载、GitHub Stars 达 0，最近一次更新时间为 2025 年 01 月 16 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 pixelcoda/typo3-storybook-fluid-api 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 pixelcoda/typo3-storybook-fluid-api 我们能提供哪些服务？

定制开发 / 二次开发

基于 pixelcoda/typo3-storybook-fluid-api 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

pixelcoda/typo3-storybook-fluid-api

包简介