PHPackages                             survos/js-twig-bundle - 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. survos/js-twig-bundle

ActiveSymfony-bundle[Templating & Views](/categories/templating)

survos/js-twig-bundle
=====================

wrap the jstwig library in a Symfony UX component

2.0.182(1mo ago)01.2k↓18.8%[1 issues](https://github.com/survos/js-twig-bundle/issues)3MITPHPPHP ^8.4

Since Apr 17Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/survos/js-twig-bundle)[ Packagist](https://packagist.org/packages/survos/js-twig-bundle)[ GitHub Sponsors](https://github.com/kbond)[ RSS](/packages/survos-js-twig-bundle/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (28)Versions (531)Used By (3)

JS Twig Bundle
==============

[](#js-twig-bundle)

Render Twig-like blocks in the browser from Stimulus controllers.

This bundle provides:

- A Symfony UX/TwigComponent bridge that extracts `` templates from Twig files.
- A browser-side twig.js API with Symfony-friendly helpers (`path`, `stimulus_*`, `ux_icon`, `render`).
- A block compiler/renderer utility for rendering a specific named block (for example a grid cell template in `api-grid-bundle`).
- A per-request manifest registry (block names + source hashes) for debug/discovery.
- An optional Dexie-based data/rendering pipeline.

Why this exists
---------------

[](#why-this-exists)

Server-rendered Twig is still the source of truth for markup, but some UI pieces need to be rendered client-side after async data is loaded. The primary use case is:

- define block templates in Twig
- pass those templates to JavaScript
- render specific blocks on demand from a Stimulus controller

Current modules
---------------

[](#current-modules)

- `assets/src/lib/twig_api.js`: installs Twig functions used by client-side templates.
- `assets/src/lib/twig_blocks.js`: compiles/renders named block registries.
- `src/TwigBlocksTrait.php`: extracts `` content from a caller template.
- `src/Components/JsTwigComponent.php` + `assets/src/controllers/js_twig_controller.js`: legacy UX component/controller path.
- `src/Components/DexieTwigComponent.php` + `assets/src/controllers/dexie_controller.js`: Dexie integration path.

Recommended path for new work
-----------------------------

[](#recommended-path-for-new-work)

For reusable rendering (for example, "render one cell block in a Stimulus grid controller"), prefer the library API:

- `installTwigAPI(...)`
- `compileTwigBlocks(registry, scriptTagId)`
- `twigRender(registry, blockName, data)`

This is more composable than hard-coding rendering logic in a single controller.

Manifest + runtime debug
------------------------

[](#manifest--runtime-debug)

The bundle now emits two debug layers:

- **Server manifest registry** (per request): each component contributes a manifest id, caller template, slot names, and source hashes.
- **Runtime usage tracking** (browser): compiled registries and rendered block slots are captured in `window.__jstwigDebugSnapshot()`.

To show an on-page debug panel, enable bundle debug config and render:

```
{{ jstwig_debug_panel() }}
```

The panel shows:

- server manifest registry
- compiled registries on current page
- block slots rendered on current page

### 1) Emit blocks JSON from Twig

[](#1-emit-blocks-json-from-twig)

Use a script tag that contains a JSON object `blockName -> template string`.

```
{# Example: include this near the Stimulus root element #}

    {{ this.twigBlocks|json_encode|raw }}

```

`this.twigBlocks` comes from `TwigBlocksTrait` in a TwigComponent.

### 2) Compile and render in a Stimulus controller

[](#2-compile-and-render-in-a-stimulus-controller)

```
import { Controller } from '@hotwired/stimulus';
import * as StimAttrs from 'stimulus-attributes';
import { installTwigAPI } from '@survos/js-twig-bundle/twig_api';
import { compileTwigBlocks, twigRender } from '@survos/js-twig-bundle/twig_blocks';

export default class extends Controller {
  connect() {
    this.tpl = {};
    installTwigAPI({ StimAttrs, blockRegistry: this.tpl });
    compileTwigBlocks(this.tpl, 'api-grid-cell-blocks');
  }

  renderCell(row) {
    return twigRender(this.tpl, 'cell', { data: row, globals: { locale: 'en' } });
  }
}
```

### 3) Define blocks in Twig

[](#3-define-blocks-in-twig)

```

    {{ data.label }}

```

Legacy `jsTwig` component usage
-------------------------------

[](#legacy-jstwig-component-usage)

The bundle still ships `` and `js_twig_controller.js` for direct fetch-and-render flows, but new integrations should prefer the reusable block registry approach above.

Twig functions available in browser templates
---------------------------------------------

[](#twig-functions-available-in-browser-templates)

After `installTwigAPI(...)`, twig.js templates can call:

- `path(route, params)`
- `render(blockName, vars)`
- `stimulus_controller(name, values, classes, outlets)`
- `stimulus_target(name, target)`
- `stimulus_action(name, action, event, params)`
- `ux_icon(name, attrs)`
- `sais_encode(url)`

See `assets/src/lib/twig_api.js` for behavior and fallbacks.

Dexie integration (optional)
----------------------------

[](#dexie-integration-optional)

`` and `dexie_controller.js` support loading data into Dexie and rendering list/detail blocks. This is useful for offline/mobile-like patterns, but has a larger API surface and more coupling than the block registry flow.

If your goal is only "render Twig blocks from Stimulus", you usually do not need Dexie.

Configuration (Dexie path)
--------------------------

[](#configuration-dexie-path)

Bundle configuration keys are defined in `src/SurvosJsTwigBundle.php`:

- `db`
- `version`
- `stores[]` with `name`, `schema`, `url`, `batch`, `response_key`

AI/Human docs map
-----------------

[](#aihuman-docs-map)

- `README.md`: entry point and quick usage.
- `docs/ARCHITECTURE.md`: internal contracts and data flow.
- `docs/AI_AGENT_GUIDE.md`: implementation conventions for contributors/agents.
- `docs/IMPROVEMENTS.md`: prioritized code improvements.
- `docs/EVENT_DRIVEN_EXAMPLE.md`: real-world event-driven rendering pattern.

###  Health Score

54

—

FairBetter than 97% of packages

Maintenance90

Actively maintained with recent releases

Popularity19

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity78

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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 ~1 days

Total

530

Last Release

45d ago

Major Versions

1.6.13 → 2.0.122025-09-28

PHP version history (3 changes)1.5.203PHP ^8.1

1.5.396PHP ^8.3

2.0.12PHP ^8.4

### Community

Maintainers

![](https://www.gravatar.com/avatar/21b39551f92ed4143772c622f9e571589c5a72c96ab3c53fe67489ce0d83e806?d=identicon)[tacman1123](/maintainers/tacman1123)

---

Top Contributors

[![tacman](https://avatars.githubusercontent.com/u/619585?v=4)](https://github.com/tacman "tacman (16 commits)")

---

Tags

symfony-ux

###  Code Quality

Static AnalysisPHPStan

Type Coverage Yes

### Embed Badge

![Health badge](/badges/survos-js-twig-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/survos-js-twig-bundle/health.svg)](https://phpackages.com/packages/survos-js-twig-bundle)
```

###  Alternatives

[prestashop/prestashop

PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers.

9.0k15.4k](/packages/prestashop-prestashop)[symfony/stimulus-bundle

Integration with your Symfony app & Stimulus!

17314.3M161](/packages/symfony-stimulus-bundle)[iq2i/storia-bundle

UI Storia bundle

144.6k](/packages/iq2i-storia-bundle)[spomky-labs/pwa-bundle

Progressive Web App Manifest Generator Bundle for Symfony.

6144.4k1](/packages/spomky-labs-pwa-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)