What is Vignet?
Vignet is a Storybook-like frontend workshop that renders "scenes" in your browser. These are variants and scenarios of your frontend UX based on your vitest cases.
Basically, your existing vitests will now have two possible paths they can run in:
- They can run as vitest tests per usual (in jsdom or browser mode)
- Any tests you annotate as relevant to Vignet will be rendered in Vignet when you start or build the Vignet workshop. Any test assertions in this mode are ignored.
The main use case right now is collaboration, although they can also be used for debugging.
While Vignet's scenes are conceptually similar to Storybook's stories, Vignet is meant to more easily render compound components and full pages, since it leverages vitest and its browser mode under the hood.
Goals
The guiding principle for Vignet is to minimize additional code written in another framework like Storybook to render these scenes and instead share the vitest component testing setup.
Motivation
The main motivation for Vignet was my frustrations adapting Storybook for my web app team's needs, since we didn't build just design components and wanted to show how full pages would look and what was customizable by customer. The longer story is below!
I was working on a web app team that interfaced cross-functionally with many non-technical teams, including UX designers, account managers, and project managers. This web app was for onboarding, and was somewhat like a survey system in that there were various customizable states and user flows, so it wasn't easy for someone to run through the deployed full-stack flow to examine all the states. Each of tehse other teams had some different needs: UX wanted to see how the final implemented UX looked compared to what they designed and often didn't know what was customizable or not by client, account teams wanted to know when UX changes occurred and how they looked so they could update their client screenshots, etc.
Eventually, I saw that our design components team was using Storybook, and I liked the way allow sharing the rendered, customizable states of things like buttons and sliders. I began implementing Storybook for our page views, but at each page I encountered new blockers (hooks, backend requests that dynamically updated the page, contexts being passed, etc) since we each page didn't have clearly separated layout and logic components. Eventually my team separated these so most of our pages could appear in storybook. However, it was always a challenge keeping things fully up-to-date, and it felt like we were recreating a lot of our already comprehensive component testing logic. While AI coding simplifies this a lot now, having duplicate logic to do the same thing is still always not ideal to me for various reasons.
When I saw that vitest supported a browser mode, I tried it and realized it was not anywhere close to doing what Storybook did (nor was it designed to) and thought it would be interesting to try to build something like Storybook powered by vitest, hence Vignet.
Why is this called Vignet?
This library is called Vignet as a play on the word Vignette (for domain and naming purposes).
Vignette's are scenes that capture a moment in time rather than a full plot. Similarly, component tests represent specific scenes of a UX without a broader user flow.
FAQ
TODO