Adding a Histoire "Storybook" to Swyxkit

[swyxio]

---

tags: histoire, dx

As of #113, Swyxkit now comes with a "Storybook" out of the box. We chose Histoire for now. Thats the TLDR.

---

When you run npm start, you get both SvelteKit, and a Histoire instance running alongside:

The story authoring process currently uses a .story.svelte format, which means you have to write .story.md files separately for docs. We are currently discussing how best to improve this.

Why add a Design System Sandbox?

The best way to prototype new components is in isolation, and you should have some knobs to play around with them as well as be able to resize them to see how they behave responsively.

This does of course add weight to the swyxkit installation, but my subjective judgment is that:

• the benefits (easy documentation and browsing) are worth the cost (npm install time, npm start time)
  • i intend to add more components to swyxkit over time
• it is easy to rip out if you disagree with it (remove the references in package.json, and remove the *.story.* files and youre done)

These are the main decision criteria for adding.

Why Histoire?

Storybook is the 800 pound gorilla in this space, but requires config for a separate Webpack toolchain.

There are a number of Vite-native Storybook killers:

• Bookit: https://bookit.leveluptutorials.com/book
• Vitebook: https://vitebook.dev/
• Histoire: https://histoire.dev/

All are at very early stages so it is hard to say who to bet on. But I subjectively liked @Akryum's design and OSS maintenance skills so I went with Histoire for now.