PHPackages                             parisek/styleguide - 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. parisek/styleguide

ActiveLibrary[Templating & Views](/categories/templating)

parisek/styleguide
==================

Twig component styleguide as a self-contained Composer package

v0.3.12(1w ago)0162—7.4%[1 issues](https://github.com/parisek/styleguide/issues)MITPHPPHP ^8.3CI passing

Since May 18Pushed 6d agoCompare

[ Source](https://github.com/parisek/styleguide)[ Packagist](https://packagist.org/packages/parisek/styleguide)[ RSS](/packages/parisek-styleguide/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (10)Dependencies (10)Versions (20)Used By (0)

parisek/styleguide
==================

[](#parisekstyleguide)

Self-contained Composer package that turns a tree of Twig component templates into a live, browsable styleguide — sidebar, ⌘K search, viewport presets, locale switcher, deep links — without writing any of that chrome yourself.

Drop the package into a project that already renders Twig (Symfony, Drupal, WordPress with Timber, or any standalone Twig setup), wire a 15-line bootstrap into a public PHP file, point a YAML config at the project's CSS/JS bundles, and `/styleguide/...` works.

[![Overview screen showing palette, typography, fonts](https://camo.githubusercontent.com/c95defe9d3029a208dadc6a4a3ddad35ec4d14140ce8378130f4845a89a3fd1b/68747470733a2f2f706c616365686f6c642e636f2f31363030783930303f746578743d4f766572766965772b70726576696577)](https://camo.githubusercontent.com/c95defe9d3029a208dadc6a4a3ddad35ec4d14140ce8378130f4845a89a3fd1b/68747470733a2f2f706c616365686f6c642e636f2f31363030783930303f746578743d4f766572766965772b70726576696577)

---

What it does
------------

[](#what-it-does)

SurfaceWhat you get**SPA chrome**Alpine.js 3 + Tailwind v4 sidebar with collapsible sections, search (`⌘K` / `Ctrl+K`), iframe preview with named viewport presets (Mobile 375×667 · Tablet 768×1024 · Desktop 1280×800 · Full 100 %) + smooth drag-resize, live dimension readout, cs ↔ en locale switcher, deep-link routing via history API. All bundled — zero CDN dependencies, zero JS to write.**Overview**Auto-generated palette / typography / fonts page driven by the project's `styleguide.yaml`. Colours are click-to-copy hex; typography rolls preview headings + body sample. Lands here by default at `/styleguide/`.**Iframe preview**Each component / page renders inside an iframe that loads the project's real CSS + JS — what you see is what production renders. The package's `Renderer` reuses the project's Twig environment, so component templates keep access to project filters / functions (`component_*`, `_x()`, `placeholder()`, custom helpers).**Cross-references**Chip panel above each preview: components list "Used in: …", pages list "Components used: …", click to navigate. Driven by per-template `usage:` YAML metadata.**REST endpoints**`/styleguide/api/components`, `/api/pages`, `/api/fields` return JSON for consumers (the SPA itself, plus any external tooling).**Open in new tab**Each render can be opened standalone — the iframe template auto-reveals a "← back to styleguide" navbar only when it detects it's NOT inside an iframe.**Asset serving**`AssetServer` serves the bundled SPA + locale files from `vendor/parisek/styleguide/dist/` with path-traversal guard, ETag, and immutable cache headers for hashed filenames.The whole package is ~8 PHP classes plus prebuilt JS/CSS — no Node.js required in production.

---

Install
-------

[](#install)

```
composer require parisek/styleguide
```

Local dev against a sibling checkout — register a path repository so the consumer's `vendor/parisek/styleguide` is a live symlink:

```
// composer.json (in the consuming project)
{
    "repositories": {
        "parisek-styleguide-local": {
            "type": "path",
            "url": "../styleguide",
            "canonical": false,                 // critical: lets Packagist still supply ^0.1 when needed
            "options": {
                "symlink": true,
                "versions": { "parisek/styleguide": "dev-local" }
            }
        }
    },
    "scripts": {
        "styleguide:local":  "@composer require parisek/styleguide:dev-local --no-interaction",
        "styleguide:remote": "@composer require parisek/styleguide:^0.1 --no-interaction"
    }
}
```

`canonical: false` is what keeps Packagist visible — without it the path repo would shadow it and the `^0.1` constraint would fail to resolve. The `versions` override pins the local copy to a fixed `dev-local` identifier so the switch scripts have a deterministic string to ask for. See `AGENTS.md` § *Local development against a consuming project* for the full mechanism.

---

Bootstrap
---------

[](#bootstrap)

Add to whichever public PHP file fronts your project (`public/index.php`, `static/index.php`, …):

```