peut-être que tu peux entendre ça de la manière dont je parle.
Mais ça me sentait tellement magique quand tu le vois.
Je l'ai fait juste un an plus tard
et j'ai besoin de tester quelque chose.
Un truc complètement enrelé.
Et ça me répond,
c'est les histoires que j'ai évoquées pour toi.
Ils ont juste travaillé.
Il y avait des fonctions de joueur et tout ça.
Parce que c'est maintenant en dessous de cette information
de la CPI.
Bonjour, bienvenue à Deptuals.
C'est un podcast de The Bell for Tools
et les gens qui le font.
Je suis Andrew et je suis ma co-host, Justin.
Salut tout le monde.
Nous sommes vraiment excitées d'avoir
Yipe Reinhold sur ce sujet.
De la team Chromatic.
Nous n'avons pas eu une conversation
sur le livre de la histoire
depuis 2021.
Le premier épisode de la série 5,
c'était un long temps ago.
Nous sommes vraiment excitées
de revisiter ce sujet.
Juste de savoir
où la team Chromatic est
et ce qui est nouveau dans le monde de la histoire.
Mais avant de nous diviser,
Yipe, vous voulez donner à notre audience
un peu d'intro ?
Oui, je suis Yipe.
J'ai été dans la team Storebook
depuis 3 ans.
Nous travaillons en Chromatic.
Chromatic est une company
qui apprécie des fonds et des pouvoirs
dans la team Storebook.
Je suis un corp de contributeur
dans la Storebook.
Je travaille dans l'open source,
tout seul.
C'est beaucoup de fun.
Je suis de Danemark.
J'ai jointé
juste quand la 7e Storebook
était dans les works.
Si quelqu'un sait la Storebook,
ils savent que la shift
entre la 6e et la 7e Storebook
était de deux différents planètes.
C'était beaucoup de fun.
C'est moi.
Et c'est Natil.
C'est registered.
Effectivement,
Yipe, j'adore 1000


















et je suis élevé de voir comment ça commence maintenant.
C'est presque instant.
Vous pouvez nous dire un peu de cette aventure,
de comment vous, comme équipe,
avez appris un livre de la histoire de ce que c'était et de ce que c'est maintenant ?
Je pense que la bourse de la vitesse
a bien commencé avec la shift de la vente de Webpack.
La integration de la vente était originalement
une integration commune,
qui a été maintenue par des gens géniaux.
Et nous avons vu comment important c'était,
nous avons vu comment fastaient,
nous avons appris à la bourse de la vente
et nous avons fait une expérience de la vente.
Vous pouvez utiliser la bourse de Webpack
ou VIT aujourd'hui,
mais nous essayons de mettre tout le monde
à l'expérience de la vente.
Même si vous avez votre app
construit avec Webpack,
nous vous souhaitons que votre bourse de Webpack
soit construite avec VIT,
car c'est plus rapide.
Il y a encore des features maintenant,
pas seulement des performances,
mais aussi des features qui vont venir plus tard.
C'était, bien sûr,
la grande shift.
Et puis,
je pense que
il y avait juste beaucoup de
feedbacks de les utilisateurs de Webpack
sur Reddit, Twitter, etc.
de l'application de Webpack
en étant trop lent,
parce que les applications
commencent à se faire vite,
mais la vente de Webpack n'était pas en train de s'assurer.
C'était super anoyant,
je dirais, de commencer la vente.
C'était juste un grand focus
de la vente, et on devait fixer ça.
C'est mal.
Et ça a commencé
avec
la vente
en faisant des choses plus
laissées,
pour que nous puissions commencer,
et puis, tout de suite,
vous montrer quelque chose,
et puis, ça a commencé
et ça a également
rendu la vente,
en faisant plus petit,
parce que c'est plus petit et plus rapide,
et on va juste continuer
de faire ça,
en faisant plus de multiples releases
de l'Ontario,
qui est différent.
Et donc, je pense que la vente
était aussi majeure
dans la vente de Webpack.
La vente a beaucoup gris.
Donc, en 2022,
ça a gris
de 3 ingénieurs,
maintenant,
nous sommes 8
avec les managers.
Et donc, nous avons juste
eu beaucoup plus
de manpower
pour focusser
sur ces détails
que l'on utilise,
et plutôt,
pour se mettre en place des features.
Donc, oui,
c'était comme la question de la vente
de l'intervention de la vente.
Donc, une des choses
que nous avons faite
depuis les dernières années,
c'est la vente,

on a commencé
avec la vente de Storebook 8,
je crois,
où nous étions,
ok,
la vente de Storebook est
une bête massive,
construite dans
cette vielle façon de pensée.
Je pense que c'était pas
l'âge de la vie,
mais si vous avez
été autour
de Jarruscourt
pendant quelques années,
vous savez comment
Babel et Webpack
travaillent,
c'est beaucoup,
beaucoup
de packages
en parlant
avec eux,
et Storebook
était de la même manière,
parce que c'était
comment vous avez
construit les systèmes de la vente.
Mais puis,
les nouveaux packages
ont été réveillés,
comme Veed et d'autres,
comme,
vous pouvez le faire,
avec juste un packages,
et vous n'avez pas
besoin d'un importe
de cilien
tout le monde.
Et donc,
nous avons commencé
à vraiment
prendre ça
et mettre en place
la vente de Storebook
pour être,
juste,
ok,
qu'est-ce que Storebook
est juste
les minimums de baie
que vous utilisez,
ou que ça
couche la taille et la moitié.
Qu'est-ce que nous
vraiment regardons
notre vente de dépendance
et les sizes de dépendance,
et puis,
nous pouvons voir
qu'on peut en fait
retirer 90%
de la dépendance
que nous avons.
Et en faisant ça,
sur un ordinateur,
on continue
de ralentir
la prochaine
vente de Storebook,
c'est
où nous sommes aujourd'hui
avec Storebook 10
et
les micro-pages
que nous avons
juste fait.
Donc,
une des choses
qui me stresse
est
comment
l'expérience d'authenticité
pour écrire
une histoire est
donc,
pour quelqu'un qui ne
n'a pas
utilisé Storebook,
qui je pense
peut-être est un bon
fréquence de référence.
C'est
ce projet
où vous sortez
de définir
une histoire
pour votre
component UI,
component REI,
component FALC,
ou tout ce qui peut être.
Et vous pouvez,
vous pouvez
ajouter un peu de plugins
et,
vous pouvez avoir
des contrôles,
pour exemple,
pour contrôler
des valeurs propres,
ou
pour déployer un component
dans différents états,
ou donner des docs,
ou tout ça.
Et
pour les dernières
plus
de
les plus
grandes réleases,
il y a été
ce format
de histoire component.
Quand est-ce que vous avez
introduit?
Au-delà de 3 ans,
peut-être 4 ou 5 ans.
Donc,
c'est un grand
point de vue,
et je vais vous parler
de la
façon
d'améliorer
cette histoire
de performance.
Comment
vous avez
l'autorisation d'une histoire,
de la
date,
et tout.
Oh, oui,
pour sûr.
Le plus grand
changement est
le changement
de histoire
de transmission
de la histoire
de component
de la histoire.
Le format
initial
était
des
fonctions
imperatives
et de la function
de la histoire.
Vous allez
écrire
ce que vous voulez
pour
réagir
de nouvelles histoires.
C'était
une expérience

flexible
et

pour nous
d'optimer.
On ne
pouvait pas
regarder
ceci
sur le site
et dire
qu'on sait
exactement
les histoires.
On
devait
écrire
ces histoires.
On
devait
écrire
ce code
et c'était
très
lent.
On
avait
1000 histoires.
C'est
pourquoi
le format
de la histoire
de component
1, 2 et
2 et 3
a été
réagir.
Comment
on
peut
définir
un
JavaScript
?

sait
que

sait
exactement
les histoires
de la histoire
sans
écrire
ce code.
C'est
pourquoi
le
code
CSF
est
réagir.
On
a
décidé
d'exporter
ces histoires
pour
écrire
ces histoires.
En
JavaScript,
la
histoire
est
très
réagir.
On
ne

écrire
ce code.
On
a
décidé

écrire
ces histoires.
On




ces histoires.
On
a
décidé
de
écrire
ces histoires.
On
a

décidé
d'ex👋
de
écrire
ces histoires.




s'est
écrire












On a des histoires, des files, qui reflèrent les compagnies,
pour voir comment cela ne fonctionne pas en application,
mais en utilisant les propres,
ou en testant les compagnies sans l'application.
C'est comme un unité de compagnie.
Un component peut être un bouton de formule,
ou un bouton de formule, ou même un page,
ou un site FTS.
Un bouton de formule est un bouton de formule,
et vous pouvez utiliser le bouton de formule
pour documenter les compagnies,
et aussi pour tester les compagnies,
ce qui est un peu plus grand,
avec un test de component,
et ce qui est très important,
c'est que les compagnies sont visibles,
donc vous voulez utiliser le bouton de formule,
et vous ne voulez pas juste être en termes de la log,
mais vous voulez voir et interagir avec l'UI.
Qu quote-il que,
Thomas,
Dean et I donnés le jour 3,

et donc j'ai aussi un peu les subconscious d'ulseurs,
pour en définir toutes les compagnies les questions avec l'Il y a un,

Vous avez le state et l'application, vous avez de cliquer 4 boutons et quand vous le relogue, vous avez de cliquer les 4 boutons pour ouvrir le modèle.
C'est super anointissant quand vous voulez l'adapter sur votre UI.
Et si vous le mettez dans le storybook, vous contrôlez le state et le contrôlez ce que vous faites.
Vous pouvez donc immédiatement voir les changements.
Je pense que c'est la flac de la utilisation de la case.
Donc, la tour de l'ESM et le changement de l'API ont vraiment évoqué beaucoup de choses.
Je ne pense pas que vous pourriez faire le même type de test si vous allez dans un
style d'impérative, de façon sidéfectif que vous avez déjà fait de la histoire.
Quels sont les différents types de tests qui ont été évoqués par la mobilisation de la CSA?
Donc, encore une fois, cette capacité de voir les histoires en arrière a été un grand boost pour nous.
Si vous regardez le playwright ou si vous regardez encore une fois le test UI mode,
qui sont des grands équipes, mais le test de la façon dont vous vous réunissez est impératif.
Donc, quand vous ouvrez le playwright, il ne sait pas ce que vous avez à l'histoire.
Il doit être évoqué par la code ou il ne sait pas ce que vous avez à l'histoire.
Et alors, il évoque la code et il se voit que ce sont les tests que vous avez évoqué.
Et donc, vous pouvez voir le UI.
D'ailleurs, pour le playwright, on immédiatement populate la barre de l'écran avec toutes les histoires
et parce que nous faisons ce qu'on a fait en bas.
Et ça se trouve en même temps pour les tests.
Donc, parce que les tests sont visibles dans la barre de l'écran immédiatement,
vous pouvez cliquer le contexte de la table de l'histoire et dire que je veux faire un test pour ça
et vous pouvez faire ça.
Ou vous pouvez faire comme pour tout le component ou tout ce qu'il y a.
Et je pense que c'est juste la puissance du format.
Nous travaillons sur des nouvelles fonctions de factory, on les appelle.
Ce qui est un peu plus impératif, mais pas dans un moyen que ça ne se débrouille
que ce que vous avez dit, mais ça justifie la sécurité type pour vos histoires
pour que ça se débrouille plus comme ce facteur de factory ou le pattern de builder
où vous définissez votre meta comme un call de fonction.
Et puis, de cela, vous définissez vos histoires comme des calls de fonction
pour que vous avez...
Le système de typisation, le système de typisation,
sait exactement à quel point les propriétés sont disponibles dans la histoire
et puis peut vous donner plus de hints, même d'adons et de tout ça.
Donc, c'est comme si nous sommes en train de faire ce mode de hybrid
qui nous donne encore la performance sans vous donner les constraintes de la langue.
Donc, une des choses que l'histoire du livre fait, c'est que ce n'est pas juste pour l'un des frameworks,
c'est pour tout le framework sous le son.
Donc, ça doit présenter un whole host de challenges
quand il s'agit de créer ce format pour que ça serve tous les cas de utilisation.
C'est très bien.
Donc, on essaie de faire le format en itself
pour soutenir tous les frameworks,
parce que nous sommes en train de faire le framework agnostic.
Ce n'est pas toujours durable.
Avec React, vous avez JSX.
Donc, en React, vous pouvez mettre vos compétences directement dans votre JavaScript.
Mais pour View, vous venez de l'utiliser comme des compétences de View
dans un File de View
où vous ne pouvez pas juste définir le JavaScript.
C'est le même pour Svelte.
Et donc, il y a ces autres frameworks
où vous voulez utiliser le View ou la langue de Svelte.
Mais ça ne va pas jouer bien avec le format de la compétition.
Et dans ces cas, pour Svelte, on est en train de maintenir un add-on
appelé Svelte CSF,
ce qui est essentiellement ce que ça pourrait devenir
si vous pouvez faire des histoires dans Svelte.
Donc, en fait, en en utilisant le JavaScript,
vous allez utiliser un component de Svelte.
Et puis, vous avez trouvé votre marque,
votre marque, le marque-up,
comme ces components de Svelte.
Et puis, ce que vous avez mis dans ça, il y aura un render.
Et on y a été parce que, essentiellement,
certains des constructeurs de Svelte,
comme Snippets ou des slots de Svelte,
étaient comme presque impossible
de soutenir le JavaScript.
Vous devez être dans un component de Svelte.
Et donc, l'expérience d'autorité est juste plus meilleure
quand vous êtes dans ce framework native language.
Bien sûr, ça présente des problèmes,
parce que ça signifie que,
quand nous nous développons ces fonctions de factory,
pour Svelte, nous devons faire les premiers pour le JavaScript,
et puis aussi pour Svelte,
et puis aussi, même pour le view,
comme il y a un communique,
et pas de la vue aussi.
Et ça, c'est plus de travail que de faire ça à l'heure de l'un de nous.
Mais nous aussi, on sait aussi comment est la différence.
Je vous ai écrit beaucoup de code de Svelte,
et je ne ferai pas de votre story de JavaScript
dans Svelte, parce que c'est juste une expérience malade.
Donc, parfois, on ne doit pas adapter la langue,
et c'est juste ça.
Je pense que c'est un point intéressant.
Je vais en remettre le point pour le contexte historique.
Je pense que,
nous avons sorti en parlant avant,
sur comment,
en oublier un component et un état en particulier,
et, en bas en,
dire, quand Webpack était la haute de les outils que nous utilisons,
et
vous savez,
il n'y a pas de
beaucoup de frameworks de métal,
un peu de fois,
quand vous étiez en train de construire
une app full stack React,
vous étiez en train de couvrir les choses ensemble,
ce n'était pas facile
sans quelqu'un qui est un expert
en front de l'infrastructure,
pour dire,
oh, je vais juste ajouter une nouvelle app de sub,
ou une nouvelle route qui est isolée,
ou autre chose.
Ce n'est pas comme,
oui, juste créer un nouveau file,
non, c'était vraiment difficile.
Et,
à la fois,
un livre de la histoire,
comme K-Man,
c'est comme,
il y aura un car de l'autre,
vous faites ce format,
vous arrêtez votre compagnon,
vous arrêtez toujours votre compagnon,
vous le rendrez,
et ça a un petit Ui.
Et, oui,
il y avait une intergération,
mais c'était comme une fois,
vous avez fait ça,
et puis,
vous savez,
ou quoi que soit.
Le monde a changé beaucoup.
Maintenant,
un peu de
le monde en front est sorti
par des frameworks de métal,
donc le Next.js,
le Nox,
la Ciflq,
le Kit,
l'Astro, etc., etc., etc.
Spending up sub-apps,
or sub-routes,
or whatever,
is a lot cheaper,
so displaying components
and a lot of ways
is a lot cheaper.
So, I'm curious,
like how the change
of the sort of state of the industry
and how the change of the state of
like how we build Ui
has impacted
the story books sort of adoption.
As you were saying,
to get people from different communities
who build components
in different ways
and to use in story book,
you have to sort of meet them
where they're at
in all these different use cases,
and that seems like a really hard problem
on the sort of headwinds
of people just being able to
throw together
new UI really easily.
I think I definitely see what you mean.
I think we've all been in that place
where we just added that
slash test route
when we just dumped in components
and just used that as a way to
like look at my components, right?
Until we got to a place
where a lot of our users are at
where like,
okay, this is not sustainable anymore.
I need to have a more structured way
to have a catalog of my components,

And then that's where they reach for story book.
So, the value of story book
is not necessarily
that it's just set up and works
because as you say,
that is also true
for meta frameworks today.
The value is more about
having this opinionated way
for you to see and document
your components,
especially in the era of LLMs
where that's even more important.
But it has also forced us to
integrate more deeply
with these meta frameworks
that we have story book
slash next.js as a package.
When we detect that you're starting
up story book in the next.js thing,
we immediately just integrate with that.
We pull in all the conflicts
that you had in your next.js.
We pull that into story book as well.
So, you don't have to redo all that.
We do it for VIT as well.
We do it for SvelteKit.
Regnative, all that, right?
And that's necessary now
because you as a user expect
that when you start up,
when you use a CLI
to create a project,
it just works from day one.
And so, we've had to adapt
and also do that.
So, you don't have to configure
VIT and Webpack all the time.
There is still a lot of front cost
and that's I think that's our biggest issue today.
We have a story book.
Is that getting to those first
five, ten stories
takes some time
because maybe you have in react.
You have a global auth provider
that all your components need.
And of course, that's already set up
in your next.js app,
but it's not set up in story book.
And so, you need to set that up.
And then, you also need to set up
your theme provider.
And there is some upfront cost.
And we're hoping to improve that
sooner or later.
But once you get over that initial bump,
then just spinning out story after story
is becoming way easier.
And I think that's the selling point.
It also, because so many people use story book
like across teams and companies.
Like when you switch from company A to company B,
you know story book
and so you take story book with you.
And so, you can use story book to
collaborate with your designers as well.
And because they also know story book.
And I think that's
that's also one of the
off-sides of user story book.
So, like building your own bespoke component catalog.
But of course, there's also always trade-offs.
So, I'd love to dig into
like the optimization of story book a little more.
There's like two really big pieces in there.
There's the ESM story.
And there's also the I or the E18E story.
How you guys eliminate all those dependencies.
Maybe let's start there.
You guys boast some like crazy numbers.
Like you posted the graphs everywhere.
Like it went from like a spider's web
of half the MPM ecosystem down to like nothing.
So, like what were the things that you eliminated?
Like where was the web of dependencies coming from?
We early on started to collaborate with the E18E community
to like figure out where do we begin right now.
We had this huge project, multiple projects actually
to figure out what are our issues.
And it was luckily for us,
it was a couple of main dependencies
that contributed to that huge spider web graph.
It was express, was like over half of that graph.
But that also was a very integral part to our work
and our code and architecture.
It wasn't just like, oh, now we just need to pull out express.
So, there's actually a lot of work to find a replacement for that.
And then there was a lot of, I guess, legacy compatibility.
We would, in the old days, we would like add a bunch of dependencies
to make sure that your browser bundle work fine,
both in Node and in the browser and such.
Which doesn't make sense to do anymore in 2025.
So, we removed those things,
which was of course breaking changes,
but nobody really cared because they had already moved on.
It was, I can't even remember what the other big ones were.
But there were two or three big dependencies
that once we removed those,
the spider web of dependencies really shrunk.
And it was just hacking away at each.
So, that was about the dependencies size decrease.
But then there was also in general about our package distribution size.
So, the bundle code that we bundled in,
and of course our dependencies.
And so, we consolidated a lot of our packages into one,
which meant that we had less du decadent code.
We removed CJS, just recently from Storebook 10,
which actually brought down the size considerably
because we had already optimized Storebook for CJS and ESM
and let dual distribution.
But even still removing CJS from that part
was a big chunk of stuff removed.
And we actually took that as an opportunity to say,
okay, Storebook's access is so small now
that we don't have to minify it anymore.
And maybe that's like a very nitty-gritty detail
of only the most hardcore power users.
But Storebook's code being minified
was always a chore to debug,
not just for me as a core maintainer,
but for you as a user getting an error in Storebook
and then it's like, okay, what's going on?
I have no idea because I can't read this code.
So, we unminified our code,
we of course added kilobytes or megabytes back,
but Storebook was still smaller even though we did that.
And I can't, right now,
remember what are the other big contributors to the size.
I know that there was something with Predator we optimized.
We also had Babel five times,
which we were able to say,
okay, maybe just have that half of one.
And so, it was really a lot of technical depth
getting cleaned up as well and just focusing on it.
Yeah, and the blog post where y'all talked about this,
this was like the Storebook 9 release, I think.
You talked about like pre-bundling,
just like pre-optimizing a lot of the dependencies.
Yeah, so we had actually done pre-bundling for many years,
but now we're being more explicit
about looking at e-dependency and saying,
okay, is this pre-bundable?
And it's, in certain circles,
the hot topic, should you pre-bundle your package code or not?
We decided to do that
because we saw that a lot of the dependency we had,
our users would not have
because they were like very library specific.
So that deduplication that you lose
when you pre-bundle as a package like Storebook,
we wouldn't have that deduplication anyway
because they don't have the same packages.
But you could look at, let's say, load-ash
and that would, whether it be like four megabytes of download,
but when we pre-bundled,
the four functions that we were using,
that became 10 kilobytes.
And just doing that pre-bundling all over again,
for every single package that was possible,
also shrunk down the size noticeably.
There are some packages that you can't pre-bundle,
you cannot pre-bundle as built
because it's a native dependency.
And that's like totally fine.
But so it's not just like,
we had to be really testing everything out
whenever you change one dependency
from being a regular dependency to a test dependency.
Not to mention going from CJS to ESM.
That must have been a journey also.
What are we, 10, 15 years into the CJS to ESM migration?
It's still not simple.
So were there any hurdles there?
Oh, there was plenty.
We, it was like a
more than a year effort of trying out, just spiking.
Can we do it like this?
Okay, yes.
Then we wrote a long document of learning.
And then six months later,
maybe we could do it like this
and then all the learnings more.
And then finally we feel like,
okay, now we actually know what we can do here.
And so, so it was like an eight week project
of two full time engineers,
just getting rid of CJS.
And it was a lot of like,
importing this module over here
now has to get a path
because on Windows,
you can't do absolute path anymore.
Like all of these very, very tiny annoyances
that we will just run into a day in and day out.
I don't envy anyone doing that work.
But we got there in the end.
And that was, that was pretty amazing.
We are lucky in that store book is the,
is the, is the runtime.
Like you start store book,
the CLI store book is not something that you put into someone else.
So we control if you start up as CJS
or if you start at ESM.
And so we can pretty take it from there
and just go down and like when you will load your code,
we load at the CSM.
And then we keep loading everything in CSM.
And then finally,
the whole tree of modules,
we don't have any CDS in there anymore.
But there was a lot of,
like I have too much knowledge about CDS.
No one should have that amount of knowledge
because like it's just so annoying.
Yeah.
I'm glad you're pushing on it though
because it's like,
it feels like more of the ecosystem
needs to get a little bit aggressive about it.
Cause you know, we're in our,
it's like definitely kind of like the Python 2 to 3
sort of like era,
but like at this point,
haven't we been going longer than the,
you know, it's like, it's still,
you know, it's still hard to see
the light in the tunnel there.
I'm, I'm very grateful for the no team
adding support for Require ESM
to node 20.
They did a huge amount of work,
not just adding support in node 24,
but then backporting it to 22
and then backporting again to 20.
And I like that backporting work that they did
to something so fundamental as module loading.
I can't imagine how hard that must have been.
But the fact that they did it
means that now any packets can market to ESM only
without breaking anything.
Because node supports both ways.
And I think that's a huge opportunity
for everyone to just go ESM please now.
Yeah, it's never been easier
since the introduction of those flags.
Yeah.
So Storybook has been,
you know, since its inception,
this like sort of playground for your components.
And then Chromatic,
the sort of company funding the development,
is a company that like helps enable
visual snapshot testing,
which I want to talk about that soon.
But that has also,
that was like a very early part
and like a very obvious part
is like you have these stories,
you have your components
and all these different states.
You can like, you know, test like screenshots
of them basically between versions.
And there's a lot you can learn from that.
But more recently,
you've done the V-test integration.
So you have this like first class,
we're like testing sort of behavior
and interactions inside your stories.
And I'd love to just hear more about
like how that came along,
like how, I mean,
what made it feel like,
oh, well Storybook's like the obvious place
for like these tests to live.
Yeah, just tell us a little bit more
about that story.
So I think it,
we had,
we all had a feeling for a very long time
that Storybook was great for testing your components.
We all used it in Chromatic,
which is like the place
where you test your components.
But that was always in CI
or it was in the cloud, right?
You also wanted to test your components locally.
We've had the test runner for many years,
but it started to get chunky and clunky.
The test runner is this separate CLI
that'll be a building
that you can use to like run on your stories.
And then that will test your stuff.
But it's kind of slow.
And so what we also saw
was that no matter what we said,
no matter what we did,
people will always say,
oh, Storybook,
that's the thing for design systems.
And we knew that that wasn't true.
Like we knew that Storybook
also works for your application components
on your full application
because we saw one of our,
like many of our biggest users and teams,
they were using Storybook successfully
to build out their whole sites.
It's not just for design systems.
I mean, like, why won't people understand this?
But what is it that they want
in application development
that they don't necessarily need
in design systems?
It's not documentation
because you don't necessarily need
to document your login page, right?
But you want to test it.
And so we were like, oh,
we need to improve the testing experience
of Storybook.
And we saw that all the testing tools out there,
they were very, as I said,
in the terminal.
So whenever you have your UI
and the test is failing,
what you get is an HTML tree.
And it just says,
this doesn't exist.
And you're like, well, what do I do?
I have no idea what I do.
But in Storybook,
you can actually just interact with it.
You can see, oh, well,
of course the button doesn't exist
because you submitted the wrong data
or whatever, and so you edit it.
So Storybook as a debugging platform
is just great, we think.
And so we added the whole component testing setup,
which is essentially an integration into VTest.
We're collaborating with the VTest team
and they're awesome guys,
where you now have this small play button
or run button in the bottom of Storybook UI.
And when you press it,
it tests all your stories.
It navigues through all the stories,
like behind the scenes,
and runs the interaction test
or the play functions.
And then shows you in the sidebar,
you had five failures.
And you couldn't do that before.
Before, you had to manually go into the story,
see the levels failing.
Next story, see the speed limit.
But now you can do this in a matter of seconds
and you can even enable the watch mode,
so it's instant.
And when we tried that on our own work,
we saw, like, okay, that's pretty magic.
And it's actually also pretty fast.
And it works in a real browser.
It's not JS Dom or something simulated.
So that also makes it more true.
And then we added accessibility testing into it.
So there's a checkbox,
if you enable accessibility.
You're not just getting failure and failing test,
you're also getting accessibility violations reported
on all your stories.
And that's also a huge boom for our users.
Usually, when they do this
and they have 500 stories,
they'll have 5,000 accessibility violations.
That's the appropriate state of our industry today.
But at least it's a number that they can hack on
and get smaller and smaller and smaller.
And we see them doing that.
And so with that integration,
we also added the visual testing integration.
So that you're running Chromatic
in that same experience.
But it just ships your stories to the cloud,
takes the snapshots, and then get it back.
So you get, like, this snapshot of your stories
in the same environment, as ever.
And then, coming back to what I started saying,
was, like, it's actually a very viable tool
for your application developers
to start putting your components into store
instead of just having your application only
because with your application,
you're constrained to using Playwright.
That's the end-to-end testing.
But that's slow and getting all to...
You probably only test the happy states.
But when you have it on a component level,
it's way easier to write up all your failure states
and get better test coverage, essentially, from that.
And that's it with SorgNine,
for any Veed-based frameworks.
And that also pushed us to say,
OK, a huge part of our user base is Next.js.
But Next.js is not built on Veed.
What do we do?
We build a Veed mock of Next.js
so that our users can migrate to that Next.js Veed framework.
And they're pretty happy about that
because it's also way faster.
So win-win, I guess.
So one hard-edged storybook testing that I've met
is there is only one Play function right now.
If I want to write a test and it's different
from the Play function,
I have no options, really,
other than to create another story,
copy the entire thing,
or do a whole bunch of structure stuff
to get me to a place where I'm just testing this one thing
and then multiple ways.
Are you guys planning on adding anything to help with that?
Yes. And we call it .tests.
So, essentially, the factory CSF functions
that I talked about later
where you had the metacall
and then you could call the story and add in properties.
What we're adding is that on a story,
you can call .tests.
And then in there,
you can say, I want to run these interactions.
So you define a story that is,
this is the modal with the form.
But maybe you have five tests for that modal form.
So you write the call test function
five times with different interactions.
We're still not 100% satisfied
with how that API is shaped.
But it is out there.
If you're using React, you can use it today.
It's experimental.
And we are not going to take it away from you.
We're just still trying to figure out
what's the best economics for you, essentially,
which is why it's experimental,
not necessarily because it's unstable or anything.
And so what that gives you also in the sidebar
we have other stories is that now,
the story is not the lowest level of component.
Each story has a test also,
if you want multiple tests for a single story.
Because as you said,
it's annoying that you have to write five or 10 stories,
just, which essentially shows the same thing,
but they assert differently.
And that's just annoying, right?
Why isn't it just a test?
And it is coming very soon.
Yeah, I'm looking at one of the discussions
on the test method for CSF factories.
And the factory function, market improvement.
I've said for a long time
that the best TypeScript is no TypeScript.
You shouldn't see it.
And this really gets you over that line,
like not having to satisfy meta or do any weird
TypeScript gymnastics to get it all to work.
That's a huge thing.
Yeah, just the fact that you can just like,
you import something from your global preview
and then you just get the types from that.
Because that's how TypeScript works.
I think that's going to be great when that gains more adoption.
We're working right now on expanding
that option to other frameworks that we act.
So that should hopefully be stable soon.
That's definitely exciting.
I want to shift the conversation again.
So we've talked about how Storybook
has lived through the era of JavaScript maturity,
of the maturity of how we build web products.
But we're in a new era now.
How we write code is changing.
And how we think about code is changing
with the advent of AI and LLMs
and this new strange reality we find ourselves in.
So Storybook, obviously,
your team has proven yourself to be very adaptable.
And how are you thinking about integrating
into this new world with its new tools and its new paradigms?
What are the opportunities that you see?
We've been thinking a lot about it.
I think we're slow out of the gate
when talking about integrating Storybook to LLMs.
Last year, everyone was out of the gate
and we were still thinking,
what does this mean for Storybook?
And we didn't really know.
And then we kept getting more and more demand for it.
Like big customers of Chromatic would ask us repeatedly,
when are you doing integrations?
And we'd also have a bunch of users.
And then in the end, we saw that users
were just building the integrations themselves
because they were tired of waiting on us.
And then during the summer, this year,
we were like, okay, we have to do something.
Because now they actually want it, right?
It's not just a hype cycle anymore.
Or maybe it is, but it doesn't look like it is right now.
And so what we've been thinking is that,
we really want to integrate with where the users are.
And so our users are engineers and developers.
They are using coding agents today.
We're not going to be building our own Storybook coding agent
because you won't be using it.
You will be using Cloud Code or Co-Pilot or whatever.
And so we want to integrate with that.
And the way you do that today,
which I think is pretty cool,
is you do MCP servers.
So we're building an MCP server for Storybook as well.
And from initial reactions, it's pretty powerful.
Essentially, the biggest problem that people are having today
when they're building UI with their LLM or agents,
is that their agents are ignoring their existing components.
When you ask the agent,
can you please build me this e-commerce page?
Then it will do that using base tailwind classes.
And next year, it will completely ignore your components
a lot of the time, especially if those components
live in a design system package that is not in your repository,
but just like dependency.
It will often not know to use components directly.
And so that's what we keep hearing,
is why can't it know to use the thing that we've already built?
We spend years on designing it in Figma
and on having our design systems used.
Why can't it just reuse that place
instead of going off the rails?
And so that's the first thing we're solving.
Whereas if you're building your design system
or anything in Storybook
and you've done that for years,
what you've done essentially
is you've poured in a ton of information into your Storybook.
You have all the components in there,
you have all your stories
which are essentially examples of every component.
This button renders these five different ways.
Maybe you're writing docs in MDX
to document for other humans.
This is how to use my components.
And so you put all this information in Storybook,
but you've never been able to get it out again.
And even if you disregard the whole MCP stuff,
that request from users has always been there.
I want to get the information out of Storybook
because I want to show it somewhere else
in the docs website or whatever.
So that's our first step,
is we're enabling you to get that information out.
We're doing what we call component manifests.
So now when you build Storybook 10.1,
which is just released a week ago or two,
what you also get if you enable this feature
is that you get this JSON file out
that is essentially all of your components
with usage examples from the stories,
not just CSF in the JSON,
but actually we're converting the CSF
to be a React component with JSX as a component.
And all of the descriptions,
so if you have JS doc descriptions on your components,
we get that out.
We get prop types out
because Storybook automatically first prop types
today from the components.
Just by looking at your type code.
And that data is also available
in this component manifest that you get out.
So that was sort of like step one.
And then step two was,
okay, let's build an HTTP server that consumes this
and shows it to the LLM.
And so what it does is that it exposes a few tools
and some instructions for the agent.
So when you're using your co-pilot agent
and you're saying,
I want to build a card component,
what it will also do is that,
first it will call the Storybook HTTP
and say, what are the components available?
List all components.
Just get a list of all the components
with a summary.
And then it will say,
oh, I need documentation on those four components
because they seem relevant to the task at hand.
And then it will ask the Storybook HTTP for that.
So it will get usage examples
and it will get prop types documentation.
It will get written documentation for your components.
And then it will use that information
to build out the UI instead.
And then in the end,
if you're using Storybook,
you can use the Storybook HTTP server
with or without Storybook.
As long as the design system is built with Storybook,
your consumer can use it without Storybook.
But if you're using Storybook,
it will also say, okay,
now I've built these UI components.
Now I'm automatically going to write stories for it
because the HTTP server told me to write stories
for my new UI.
And it will get the URLs to the stories
to show you at the end of the task.
Here are the four stories I wrote.
Here's how you can view them.
And so I've been working on this specific topic a lot.
Maybe you can hear that from the way I talk about it.
But it just feels so magical when you see it.
I just did this like an hour ago
and I, because I needed to test something out,
something completely unrelated.
And it replied to me,
here's the stories that I wrote for you.
And they just worked.
And like there were play functions and all that jazz.
Because it's now pulling in this information
from the MCP server.
And of course,
then you can host this MCP server on Chromatic
so that when you publish your storybook online
for a design system to be used,
anyone can also just connect to that MCP server.
In the future,
we are hoping to add testing capabilities also.
We have some proof of concepts
so that not only does it write your stories for you
as it does today,
but it also knows that it should run the test
for those stories via the storybook MCP,
which is way faster
because it's a runtime that's already running.
It doesn't have to spin up, CLI.
The storybook is just running.
And then the storybook will apply with,
yeah, those two stories,
they're now failing
because you changed the color to blue or whatever.
And then it will iterate,
like the agent will know to iterate
and then keep improving the stories or the UI
and then come back.
And we're not quite there yet with that testing story,
but that's what we're seeing today.
So really just taking the three pillars of storybook
with development, documentation and testing
and seeing how does that work
in a coding agent environment.
And what we realize is that,
well, we need to make the same available,
like the same content available with the MCP server.
Cool, that's exciting.
I'm so interested in how MCPs are developing
and what the shape of that looks like.
It seems like there's obviously,
they're still rough around the edges
and a lot of stuff to mature
there, but it's pretty fascinating to see.
Just shift to conversation one more time.
I think it would be good for us
to just talk about the sort of funding force
behind Storybook, The Open Source Project.
So the company that you are employed by is Chromatic.
And Chromatic sort of started as a hosted
storybook platform that ran snapshot visual tests.
It's been several years
since I've actively used Chromatic
since I've been at a company that's used it.
So I'm curious about how the product
and the company has evolved
and what new features you are working on
and what are you thinking about?
Yeah, so I think the cool thing about Chromatic
is that it has grown with Storybook.
And we always say that Chromatic is built
by the team that builds Storybook
and that is true.
It's not just because Chromatic hired five people
and then they just sit over on the side.
Like, we're actually the same team building the same things.
So the integration with Storybook
has gone way deeper for Chromatic
over the past few years.
We have the visual testing add-on now.
So you don't necessarily have to go to Chromatic.com
to see your visual tests.
You can see them in the add-on panel
inside the Storybook if you want to.
And also run them.
A big push that we've done at Chromatic
over the past year has been accessibility,
regression testing.
So essentially, it's similar to...
You have your visual baseline.
You take a snapshot of all your stories
and like, this is the screenshot.
You do the same thing
for all your accessibility violations
because you don't start from zero violations.
No one does that, unfortunately.
You maybe have thousands of violations.
And then Chromatic says,
okay, this is your baseline of violations.
This story has exactly these accessibility violations
because the contrast is bad.
And then when you make changes,
Chromatic will tell you, oh,
you have a new violation.
That's bad.
You see, I is getting blocked on this
because you don't want to merge in this new violation.
Then you're getting that count
at least to stay stable
and hopefully also decrease it over time.
That's at least what we're seeing
from some very interesting teams
that are using this accessibility system Chromatic.
It's essentially...
Because there's this chart
that anyone can see of violations
and we just see it's a burned down chart
that's going down and down.
And that's very magical for me to see
that we're actually making an impact
on improving the accessibility of the web today.
And so...
And then Chromatic has also expanded
to support multiple browsers.
There's also a...
We did a recent webinar
on a feature called Steadie Snap,
which is essentially...
We're not just taking a screenshot of the story.
We're taking multiple screenshots
to figure out if it's a flake or not.
Or if it's...
Because if you take a screenshot
of text in a browser,
the NTLizing will change it
from slightly gray to very much gray.
And that's just so annoying.
On a pixel level.
You don't want to deal with that.
And that's what most people run into
when they do...
There's a lot of people
that build their own visual requests
in testing setup.
You can do to match snapshot
and play write or wherever you want.
But then they run into this flakiness.
And they're...
Oh, this is unstable.
And now the date change
from being December to November.
Now there's a new snapshot
because of that.

And all those things
is what we're trying to solve
in Chromatic Direct.
So you don't have to deal with that.
And that's really the value add
over just building up
your own testing suite, essentially.
We're also doing Turbo Snap.
It's been there for a few years.
But that's essentially
whenever Chromatic
decides to take snapshots
of your storybook,
it looks at what are the git changes
compared to the module graph
and then say,
we're not going to take snapshots
of all the stories
because that would be too expensive for you.
We can see that your git changes
only have changes to these five stories
because you only change the button component.
So we're only going to snapshot those.
And we're only going to bill you
for those five snapshots.
So that's...
It's really just about optimizing
also the speed, of course,
to make it way faster.
And that's what people they enjoy, I think.
And then, of course,
building something on top
of the storybook MCP server.
There are different value adds
when you can have that hosted
for you at the click of a button.
And we're very excited
to see where we're going to take that.
We don't quite know yet,
but I'm sure you'll see at some point.
Yeah, those two things,
Steady Snap and Turbo Snap,
like, as you said,
you can build out your own
testing snapshot infrastructure
and you will run into these things.
And having a thing that just does that
for you and you're not having to worry
about that and build it yourself.
Pretty cool.
I also love that you can do selective testing
because that was like...
At my last company, Descript,
that was a huge problem.
We had thousands of tests,
thousands of screenshots,
and running them all
was very cost and efficient
and very slow.
Yeah, pretty excited for you guys.
That MCP thing seems super cool.
Just one thing before we move on
to our last question.
If I want to use Chromatic,
but I don't use Storybook, can I?
Yes, you can.
Chromatic has an end-to-end integration.
We always propose that you use it with Storybook
because you have a more lower level component,
so your screenshots are more stable.
But you can integrate it into Cypress and Playwright.
So there's a Chromatic slash
E2E Playwright package,
I believe it's called.
And that allows you to,
at the end of any Playwright function,
or in the middle of any Playwright function,
call, take snapshot.
Or you can also make it the default.
So all your Playwright tests,
they just do that automatically at the end.
And that will generate these snapshots,
put into Chromatic,
and then you get the exact same experience
as if it was Storybook.
The little known detail
is that in fact those snapshots
generate Storybooks.
And it doesn't just take a screenshot.
It takes a snapshot of the DOM as well,
so you can inspect it.
And it's not interactive,
because you can't take a snapshot of JavaScript memory.
But it has HTML and all that stuff,
and it looks exactly as it's supposed to do.
Which again, for me,
is a way more powerful
than just having Playwright traces,
because they like these videos and recordings,
whereas for Chromatic,
the E2E snapshots are actually the DOM
that you can inspect in your browser.
So yeah, we do support Playwright and Cypress.
– Sweet.
So looking to the future,
we've already done a little bit of it,
but what's next for Storybook
and at a larger, more generic scale?
What do you think's next for UI development?
– So what's next for Storybook right now
is definitely trying to make it easier
to get to those first five or ten stories.
Getting over that initial hurdle
of setting up your Storybook,
maybe doing automatic integrations
to the biggest styling providers
like Tailwind,
so you don't have to set that up.
Or maybe we will be running
some stories for you in the background
and see how they fail,
and then fix those failures
before you even have your Storybook set up.
But definitely,
that is the biggest issue we see today,
is people sometimes choke
on even just setting up the first story,
and then they don't get any further.
We're also experimenting with,
right now we call them ghost stories,
but essentially,
what if we generate stories
for all your components in the sidebar,
but they didn't exist on the file system,
they were just there,
so you could look at them,
oh, this is a story for this component
that I haven't even written yet,
but I can see it being written
and I can click Save to file,
and then it's on the file.
So, so both getting to those first five stories,
but also going from 100 stories
to 5,000 stories,
to just to get coverage for all your components.
I think that's where we want to help people
and really improve the experience
to just make it easier to get your Storybook running.
UI,
development in
general,
I think,
well, of course,
AI is going to be part of that.
Somehow,
what we're seeing right now
is that everyone is building the same websites,
because AI loves purple,
and so we're building purple websites.
I think we're going to see a shift away from that,
both by the model builders,
like GMNI and stuff,
they're going to figure out
how to do that,
less generic,
but also there's going to be tools
that show up,
that enables you to be more personal
with how you build your UI.
We have,
I love Svelte,
I would love to see Svelte just grow
like a ton,
because I think it's just a way better
authoring experience,
but I don't think that we're going to see
major shifts in frameworks usage.
Over the next few years,
because people just tend to use
what they know,
which is fair.
I also do that.
I don't think I have any hot takes
on UI development.
I think we're going to stay
with our components,
and as I said,
documenting these components
and having
great
structure for our components
is going to be very important
for your AI understanding them.
And so I think
investing time into that,
of course, I'm biased
because I'm on the store team,
but we see that when you invest
time into that,
the alarms just get way better
at using the components.
So you don't get into these
back and forth,
they please use the component, correct?
I think that's going to be a big push as well.
Well, sweet.
Thanks for coming on.
This was a fun talk about Storybook.
You guys have been at it
for a really long time,
and it's constantly improving.
So thanks for coming on
and talking about it.
I'm also really excited
to dig into the MCP server stuff.
We have a sneak peek
blog post about the MCP server stuff
where you can also sign up
for Early Access.
Cool, thanks Yabek.
This is awesome.
It's so exciting
to watch Storybook develop.
It's just been such a cornerstone
of the front-end development community
for such a long time.
And I'm glad
that y'all have evolved
so well and adapted
so well
because of how much everything
has changed since it started.
Like, the industry feels
very different than what it did.
And it's awesome
to have that one stable tool
that we can rely on.
So, good work.
Cool, thanks.