PHPackages                             ben-rogerson/craft-storybook-starter - 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. ben-rogerson/craft-storybook-starter

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

ben-rogerson/craft-storybook-starter
====================================

This starter sets up everything for you to be productive in Storybook and Craft and makes it easy to produce a living styleguide for your site or app.

v1.1.1(7y ago)56176[5 PRs](https://github.com/ben-rogerson/craft-storybook-starter/pulls)UnlicenseHTML

Since Jan 31Pushed 4y ago3 watchersCompare

[ Source](https://github.com/ben-rogerson/craft-storybook-starter)[ Packagist](https://packagist.org/packages/ben-rogerson/craft-storybook-starter)[ Docs](https://craftcms.com/)[ RSS](/packages/ben-rogerson-craft-storybook-starter/feed)WikiDiscussions master Synced yesterday

READMEChangelog (2)Dependencies (2)Versions (62)Used By (0)

[![Craft CMS](https://camo.githubusercontent.com/7164ce2a14a65c2bc216d292f6b65fa56990948c880613cec34b3c39bbbafe25/68747470733a2f2f692e696d6775722e636f6d2f37394e433473742e706e67)](https://camo.githubusercontent.com/7164ce2a14a65c2bc216d292f6b65fa56990948c880613cec34b3c39bbbafe25/68747470733a2f2f692e696d6775722e636f6d2f37394e433473742e706e67)

Craft Storybook Starter
=======================

[](#craft-storybook-starter)

[Storybook](https://storybook.js.org/) is an open source tool for developing UI components in isolation.
It makes building stunning UIs organized and efficient.

🎉 Storybook runs outside Craft in JavaScript and doesn't require a Craft plugin
🎉 Storybook works with the same Twig files from your project [with some differences](#user-content-hosting-your-storybook)

This starter sets up everything for you to be productive in Storybook.
Use Storybook to create a living styleguide from your existing site/app.
Take advantage of the excellent Webpack dev server to create solid components with mock data.

Storybook Features
------------------

[](#storybook-features)

This starter has many modern features including:

👍 Hot module reloading
👍 Automatic accessibility tests
👍 Color accessibility tests
👍 Fake data generator (Faker)
👍 Sass support
👍 Device previews
👍 Extendable Webpack config
👍 Static site generator

**[View the Storybook demo](https://craft-storybook-starter.netlify.com)** 👉

Getting Started
---------------

[](#getting-started)

### Create a new project

[](#create-a-new-project)

Create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):

```
npx degit ben-rogerson/craft-storybook-starter craft-storybook && cd $_ && npm install
```

Start Storybook with:

```
npm run storybook
```

Start Craft CMS setup:

```
composer install && ./craft setup
```

### Bring into an existing project

[](#bring-into-an-existing-project)

Adding Storybook into your project is a quick process:

1. Grab the repository: ```
    git clone https://github.com/ben-rogerson/craft-storybook-starter.git
    ```
2. Copy these folders into your project: ```
    .storybook
    stories
    templates/components

    ```
3. Install the Storybook `devDependencies`:
    ```
    npm i -D @babel/core @babel/preset-env @storybook/addon-a11y @storybook/addon-knobs @storybook/addon-viewport @storybook/html faker babel-loader css-loader node-sass sass-loader style-loader twig twigjs-loader babel-plugin-module-resolver webpack-cli
    ```
4. Add these script definitions into your `package.json`: ```
    "scripts": {
        "storybook": "start-storybook",
        "build-storybook": "build-storybook -c .storybook -o build"
    },
    ```
5. Start Storybook with: `npm run storybook`

Working with Storybook
----------------------

[](#working-with-storybook)

1. Create a normal Twig file somewhere in your templates folder:
    Eg: `/templates/components/[component].twig`
2. Add a matching story in the stories folder:
    Eg: `/stories/[component].stories.js`
3. Start Storybook with: `npm run storybook`

Hosting your Storybook
----------------------

[](#hosting-your-storybook)

Storybook builds static file previews for your components. This means you can leverage easy (and free) hosting services like Netlify.

Configure it to run `npm run build-storybook` and serve from the `/build` folder.

You could also use [Github pages](https://github.com/storybooks/storybook-deployer) to host your storybook.

A heads up: Storybook Twig != Craft Twig
----------------------------------------

[](#a-heads-up-storybook-twig--craft-twig)

Storybook uses a JavaScript implementation of Twig and you may come across some of its limitations.

- Any Craft or Craft Plugin functions, or Twig tags or filters will throw an error
- [String interpolation](https://twig.symfony.com/doc/2.x/templates.html#string-interpolation) isn’t supported
- Importing components within components isn't supported (perhaps fixable with Webpack adjustments)
    Importing now works correctly

While I agree that this isn’t ideal, there is an upside to it. It forces small and basic components. You see this same technique constantly in modern JavaScript apps and it’s a good thing! It’s a technique you can also bring to many of your Craft Components. If you’re interested in the concept check out [Atomic design](http://bradfrost.com/blog/post/atomic-web-design/).

If you’re bringing components into Storybook and you’re having compatibility issues you may need to break it up into a presentational and logic component. The presentational component would have the basic component html and wouldn’t contain the incompatible Twig code. This would be the component you’d display in Storybook.

Links
-----

[](#links)

- [Writing Storybook Stories](https://storybook.js.org/docs/basics/writing-stories/#writing-stories)
- [Another Storybook demo](https://storybooks-html.netlify.com)
- [Storybook Docs](https://storybook.js.org/docs/basics/introduction/)
- [Craft CMS Docs](https://docs.craftcms.com)

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community20

Small or concentrated contributor base

Maturity77

Established project with proven stability

 Bus Factor1

Top contributor holds 56.6% 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 ~16 days

Recently: every ~24 days

Total

56

Last Release

2466d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/3929a71a8602dc2367cb307cb60eb32725e5a4fcee3d40c0c4e6b2d5719f02e4?d=identicon)[ben-rogerson](/maintainers/ben-rogerson)

---

Top Contributors

[![brandonkelly](https://avatars.githubusercontent.com/u/47792?v=4)](https://github.com/brandonkelly "brandonkelly (141 commits)")[![ben-rogerson](https://avatars.githubusercontent.com/u/21288568?v=4)](https://github.com/ben-rogerson "ben-rogerson (72 commits)")[![dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?v=4)](https://github.com/dependabot-preview[bot] "dependabot-preview[bot] (13 commits)")[![angrybrad](https://avatars.githubusercontent.com/u/61869?v=4)](https://github.com/angrybrad "angrybrad (7 commits)")[![carlcs](https://avatars.githubusercontent.com/u/7516543?v=4)](https://github.com/carlcs "carlcs (5 commits)")[![benjamindavid](https://avatars.githubusercontent.com/u/2911900?v=4)](https://github.com/benjamindavid "benjamindavid (2 commits)")[![Tam](https://avatars.githubusercontent.com/u/977594?v=4)](https://github.com/Tam "Tam (2 commits)")[![mildlygeeky](https://avatars.githubusercontent.com/u/273266?v=4)](https://github.com/mildlygeeky "mildlygeeky (2 commits)")[![jasonmccallister](https://avatars.githubusercontent.com/u/5354908?v=4)](https://github.com/jasonmccallister "jasonmccallister (1 commits)")[![jnowland](https://avatars.githubusercontent.com/u/1244314?v=4)](https://github.com/jnowland "jnowland (1 commits)")[![cromwellryan](https://avatars.githubusercontent.com/u/129756?v=4)](https://github.com/cromwellryan "cromwellryan (1 commits)")[![mtnorthrop](https://avatars.githubusercontent.com/u/800546?v=4)](https://github.com/mtnorthrop "mtnorthrop (1 commits)")[![geenious](https://avatars.githubusercontent.com/u/26128416?v=4)](https://github.com/geenious "geenious (1 commits)")

---

Tags

boilerplatecraftstorybookstorybook-uitwigcmsprojectCraftcraftcmsstyleguidestorybook

### Embed Badge

![Health badge](/badges/ben-rogerson-craft-storybook-starter/health.svg)

```
[![Health](https://phpackages.com/badges/ben-rogerson-craft-storybook-starter/health.svg)](https://phpackages.com/packages/ben-rogerson-craft-storybook-starter)
```

###  Alternatives

[nystudio107/craft-autocomplete

Provides Twig template IDE autocomplete of Craft CMS & plugin variables

44204.4k13](/packages/nystudio107-craft-autocomplete)[verbb/footnotes

Adds a footnotes feature to CKEditor fields and Twig templates.

213.3k](/packages/verbb-footnotes)

PHPackages © 2026

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