Frequently Asked Questions

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.

Is Vignet a replacement for Storybook?

Vignet can be used as an alternative or a complement to Storybook, though we still believe Storybook is best for design systems given its maturity and robust feature set. However, for quickly rendering basic components and for full page components that already have Vitest tests utilizing mocks, we hope that Vignet would eventually be the simplest and best choice.

How is Vignet different from Vitest's browser mode?

Vignet's main purpose is to serve as a frontend workshop for visual inspection and collaboration, similar to Storybook. It's built on top of Vitest's browser mode functionality, and differs both in application (it's not meant to run assertions) and in its implementation. Vitest browser mode runs all tests upon launch, whereas Vignet only runs the selected component test at a time for workshop rendering purposes, silently ignoring all assertions. Of course, there could be a day in the distant future where Vitest browser mode and Vignet overlap, but for now they are designed for different purposes.