Storybook is a tool used for testing UI components in isolation that works with JS frameworks like React, Angular, Vue,  and Svelte. It is especially useful for web developers building design systems and shared libraries. 

#webdevelopment #js #100SecondsOfCode 

🔗 Resources

Storybook Docs https://storybook.js.org
Storybook Github https://github.com/storybookjs/storybook
JS in 100 Seconds https://youtu.be/DHjqpvDnNGE

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Should I use storybook.js
- Storybook tutorial
- What is storybook
- Benefits of storybook.js
- Testing techniques in web development
2024-02-04T05:24:34.409Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
99d74bca-42e2-4573-a83b-70ba7bc68223
e5e63c77cae49230d760053920fdc534b1b4c91492666de7313f76af81b45fff
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Storybook, an open source tool used to build, test, and visualize UI components in isolation.
Modern web developers love component frameworks because they organize HTML, CSS, and JavaScript code into reusable chunks, like Lego bricks.
However, a complex code base can still easily descend into chaos, causing components to lose their meaning in life.
Storybook allows developers to extract components into a sandbox where they can be explored and tested without distractions.
Instead of viewing components through the lens of a giant complex component tree that is your application, you get a guide look that breaks everything down individually.
No need to worry about data dependencies or business logic.
This makes it much easier to share your work with other developers or clients who can validate that things actually work the way they're supposed to.
In addition, it has a test runner based on Jest and lay right that can automatically verify whether your component renders without errors and also validate concerns like accessibility, measure performance, and can even do visual regression testing in the cloud want to pinpoint everything you broke with that last CSS tweak.
To get started, create a project with your favorite front end framework like React, Angular, Vue, Svelte, and so on, or open an existing won, then run npx storybook init.
Next, find a UI component, then create a matching file ending in dot stories dotjs.
A story is just a function that describes how to render the component.
In many cases, a component will have multiple different variations to show in the story.
Export a function for each one of these variations.
That works, but we can actually change the arguments to a component dynamically directly in the UI.
By creating a template that maps arguments to the component, we can now change the component's behavior on the fly directly in the storybook UI.
It's also possible to write stories in markdown with MDX.
This allows you to not only visualize the component, but also document it at the same time.
And there's a huge collection of add ons to customize the behavior of love your storybook.
You might use actions to keep track of browser events or viewport to analyze components on responsive layouts.
And the measure add on can help you visually debug CSS layout and alignment issues within your stories.
When it comes to testing, you could spot check with your own eyeballs or use the test runner to write automated tests and run them on your CI server.
And finally, share your work with the world by publishing it as a static web application.
This has been Storybook in 100 seconds.
Hit the like button if you wanna see more short videos like this.
Thanks for watching and I will see you in the next one.

Speaker 0: Storybook, an open source tool used to build, test, and visualize UI components in isolation. Modern web developers love component frameworks because they organize HTML, CSS, and JavaScript code into reusable chunks, like Lego bricks. However, a complex code base can still easily descend into chaos, causing components to lose their meaning in life. Storybook allows developers to extract components into a sandbox where they can be explored and tested without distractions. Instead of viewing components through the lens of a giant complex component tree that is your application, you get a guide look that breaks everything down individually.

No need to worry about data dependencies or business logic. This makes it much easier to share your work with other developers or clients who can validate that things actually work the way they're supposed to. In addition, it has a test runner based on Jest and lay right that can automatically verify whether your component renders without errors and also validate concerns like accessibility, measure performance, and can even do visual regression testing in the cloud want to pinpoint everything you broke with that last CSS tweak. To get started, create a project with your favorite front end framework like React, Angular, Vue, Svelte, and so on, or open an existing won, then run npx storybook init. Next, find a UI component, then create a matching file ending in dot stories dotjs.

A story is just a function that describes how to render the component. In many cases, a component will have multiple different variations to show in the story. Export a function for each one of these variations. That works, but we can actually change the arguments to a component dynamically directly in the UI. By creating a template that maps arguments to the component, we can now change the component's behavior on the fly directly in the storybook UI.

It's also possible to write stories in markdown with MDX. This allows you to not only visualize the component, but also document it at the same time. And there's a huge collection of add ons to customize the behavior of love your storybook. You might use actions to keep track of browser events or viewport to analyze components on responsive layouts. And the measure add on can help you visually debug CSS layout and alignment issues within your stories.

When it comes to testing, you could spot check with your own eyeballs or use the test runner to write automated tests and run them on your CI server. And finally, share your work with the world by publishing it as a static web application. This has been Storybook in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
Storybook, an open source tool used to build, test, and visualize UI components in isolation. Modern web developers love component frameworks because they organize HTML, CSS, and JavaScript code into reusable chunks, like Lego bricks. However, a complex code base can still easily descend into chaos, causing components to lose their meaning in life.
graphic design
visualization
computer science
architecture
Storybook allows developers to extract components into a sandbox where they can be explored and tested without distractions.
Instead of viewing components through the lens of a giant complex component tree that is your application, you get a guide look that breaks everything down individually. No need to worry about data dependencies or business logic. This makes it much easier to share your work with other developers or clients who can validate that things actually work the way they're supposed to. In addition, it has a test runner based on Jest and lay right that can automatically verify whether your component renders without errors and also validate concerns like accessibility, measure performance, and can even do visual regression testing in the cloud want to pinpoint everything you broke with that last CSS tweak.
quality assurance
software
software development
To get started, create a project with your favorite front end framework like React, Angular, Vue, Svelte, and so on, or open an existing won, then run npx storybook init. Next, find a UI component, then create a matching file ending in dot stories dotjs. A story is just a function that describes how to render the component. In many cases, a component will have multiple different variations to show in the story. Export a function for each one of these variations. That works, but we can actually change the arguments to a component dynamically directly in the UI.
By creating a template that maps arguments to the component, we can now change the component's behavior on the fly directly in the storybook UI. It's also possible to write stories in markdown with MDX. This allows you to not only visualize the component, but also document it at the same time.
visualization
And there's a huge collection of add ons to customize the behavior of love your storybook. You might use actions to keep track of browser events or viewport to analyze components on responsive layouts. And the measure add on can help you visually debug CSS layout and alignment issues within your stories. When it comes to testing, you could spot check with your own eyeballs or use the test runner to write automated tests and run them on your CI server.
And finally, share your work with the world by publishing it as a static web application. This has been Storybook in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
multimedia
documentary
streaming
youtube
video gaming
Storybook, an open source tool used to build, test, and visualize UI components in isolation. Modern web developers love component frameworks because they organize HTML, CSS, and JavaScript code into reusable chunks, like Lego bricks. However, a complex code base can still easily descend into chaos, causing components to lose their meaning in life. Storybook allows developers to extract components into a sandbox where they can be explored and tested without distractions. Instead of viewing components through the lens of a giant complex component tree that is your application, you get a guide look that breaks everything down individually. No need to worry about data dependencies or business logic. This makes it much easier to share your work with other developers or clients who can validate that things actually work the way they're supposed to. In addition, it has a test runner based on Jest and lay right that can automatically verify whether your component renders without errors and also validate concerns like accessibility, measure performance, and can even do visual regression testing in the cloud want to pinpoint everything you broke with that last CSS tweak. To get started, create a project with your favorite front end framework like React, Angular, Vue, Svelte, and so on, or open an existing won, then run npx storybook init. Next, find a UI component, then create a matching file ending in dot stories dotjs. A story is just a function that describes how to render the component. In many cases, a component will have multiple different variations to show in the story. Export a function for each one of these variations. That works, but we can actually change the arguments to a component dynamically directly in the UI. By creating a template that maps arguments to the component, we can now change the component's behavior on the fly directly in the storybook UI. It's also possible to write stories in markdown with MDX. This allows you to not only visualize the component, but also document it at the same time. And there's a huge collection of add ons to customize the behavior of love your storybook. You might use actions to keep track of browser events or viewport to analyze components on responsive layouts. And the measure add on can help you visually debug CSS layout and alignment issues within your stories. When it comes to testing, you could spot check with your own eyeballs or use the test runner to write automated tests and run them on your CI server. And finally, share your work with the world by publishing it as a static web application. This has been Storybook in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
Storybook,
storybook
an
an
open
open
source
source
tool
tool
used
used
to
to
build,
build
test,
test
and
and
visualize
visualize
UI
ui
components
components
in
in
isolation.
isolation
Modern
modern
web
web
developers
developers
love
love
component
component
frameworks
frameworks
because
because
they
they
organize
organize
HTML,
html
CSS,
css
and
and
JavaScript
javascript
code
code
into
into
reusable
reusable
chunks,
chunks
like
like
Lego
lego
bricks.
bricks
However,
however
a
a
complex
complex
code
code
base
base
can
can
still
still
easily
easily
descend
descend
into
into
chaos,
chaos
causing
causing
components
components
to
to
lose
lose
their
their
meaning
meaning
in
in
life.
life
Storybook
storybook
allows
allows
developers
developers
to
to
extract
extract
components
components
into
into
a
a
sandbox
sandbox
where
where
they
they
can
can
be
be
explored
explored
and
and
tested
tested
without
without
distractions.
distractions
Instead
instead
of
of
viewing
viewing
components
components
through
through
the
the
lens
lens
of
of
a
a
giant
giant
complex
complex
component
component
tree
tree
that
that
is
is
your
your
application,
application
you
you
get
get
a
a
guide
guide
look
look
that
that
breaks
breaks
everything
everything
down
down
individually.
individually
No
no
need
need
to
to
worry
worry
about
about
data
data
dependencies
dependencies
or
or
business
business
logic.
logic
This
this
makes
makes
it
it
much
much
easier
easier
to
to
share
share
your
your
work
work
with
with
other
other
developers
developers
or
or
clients
clients
who
who
can
can
validate
validate
that
that
things
things
actually
actually
work
work
the
the
way
way
they're
they're
supposed
supposed
to.
to
In
in
addition,
addition
it
it
has
has
a
a
test
test
runner
runner
based
based
on
on
Jest
jest
and
and
lay
lay
right
right
that
that
can
can
automatically
automatically
verify
verify
whether
whether
your
your
component
component
renders
renders
without
without
errors
errors
and
and
also
also
validate
validate
concerns
concerns
like
like
accessibility,
accessibility
measure
measure
performance,
performance
and
and
can
can
even
even
do
do
visual
visual
regression
regression
testing
testing
in
in
the
the
cloud
cloud
want
want
to
to
pinpoint
pinpoint
everything
everything
you
you
broke
broke
with
with
that
that
last
last
CSS
css
tweak.
tweak
To
to
get
get
started,
started
create
create
a
a
project
project
with
with
your
your
favorite
favorite
front
front
end
end
framework
framework
like
like
React,
react
Angular,
angular
Vue,
vue
Svelte,
svelte
and
and
so
so
on,
on
or
or
open
open
an
an
existing
existing
won,
won
then
then
run
run
npx
npx
storybook
storybook
init.
init
Next,
next
find
find
a
a
UI
ui
component,
component
then
then
create
create
a
a
matching
matching
file
file
ending
ending
in
in
dot
dot
stories
stories
dotjs.
dotjs
A
a
story
story
is
is
just
just
a
a
function
function
that
that
describes
describes
how
how
to
to
render
render
the
the
component.
component
In
in
many
many
cases,
cases
a
a
component
component
will
will
have
have
multiple
multiple
different
different
variations
variations
to
to
show
show
in
in
the
the
story.
story
Export
export
a
a
function
function
for
for
each
each
one
one
of
of
these
these
variations.
variations
That
that
works,
works
but
but
we
we
can
can
actually
actually
change
change
the
the
arguments
arguments
to
to
a
a
component
component
dynamically
dynamically
directly
directly
in
in
the
the
UI.
ui
By
by
creating
creating
a
a
template
template
that
that
maps
maps
arguments
arguments
to
to
the
the
component,
component
we
we
can
can
now
now
change
change
the
the
component's
component's
behavior
behavior
on
on
the
the
fly
fly
directly
directly
in
in
the
the
storybook
storybook
UI.
ui
It's
it's
also
also
possible
possible
to
to
write
write
stories
stories
in
in
markdown
markdown
with
with
MDX.
mdx
This
this
allows
allows
you
you
to
to
not
not
only
only
visualize
visualize
the
the
component,
component
but
but
also
also
document
document
it
it
at
at
the
the
same
same
time.
time
And
and
there's
there's
a
a
huge
huge
collection
collection
of
of
add
add
ons
ons
to
to
customize
customize
the
the
behavior
behavior
of
of
love
love
your
your
storybook.
storybook
You
you
might
might
use
use
actions
actions
to
to
keep
keep
track
track
of
of
browser
browser
events
events
or
or
viewport
viewport
to
to
analyze
analyze
components
components
on
on
responsive
responsive
layouts.
layouts
And
and
the
the
measure
measure
add
add
on
on
can
can
help
help
you
you
visually
visually
debug
debug
CSS
css
layout
layout
and
and
alignment
alignment
issues
issues
within
within
your
your
stories.
stories
When
when
it
it
comes
comes
to
to
testing,
testing
you
you
could
could
spot
spot
check
check
with
with
your
your
own
own
eyeballs
eyeballs
or
or
use
use
the
the
test
test
runner
runner
to
to
write
write
automated
automated
tests
tests
and
and
run
run
them
them
on
on
your
your
CI
ci
server.
server
And
and
finally,
finally
share
share
your
your
work
work
with
with
the
the
world
world
by
by
publishing
publishing
it
it
as
as
a
a
static
static
web
web
application.
application
This
this
has
has
been
been
Storybook
storybook
in
in
100
100
seconds.
seconds
Hit
hit
the
the
like
like
button
button
if
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
In this video, the speaker explains the benefits of using Storybook as a tool for building and visualizing UI components in isolation. The tool allows developers to extract components from a sandbox and test them against the tool's framework. The tool also allows for flexible editing and customization of component behavior through various actions and tests.
Storybook in 100 Seconds
Storybook, an open source tool used to build, test, and visualize UI components in isolation. Modern web developers love component frameworks because they organize HTML, CSS, and JavaScript code into reusable chunks, like Lego bricks. However, a complex code base can still easily descend into chaos, causing components to lose their meaning in life. Storybook allows developers to extract components into a sandbox where they can be explored and tested without distractions. Instead of viewing components through the lens of a giant complex component tree that is your application, you get a guide look that breaks everything down individually. No need to worry about data dependencies or business logic. This makes it much easier to share your work with other developers or clients who can validate that things actually work the way they're supposed to. In addition, it has a test runner based on Jest and lay right that can automatically verify whether your component renders without errors and also validate concerns like accessibility, measure performance, and can even do visual regression testing in the cloud want to pinpoint everything you broke with that last CSS tweak. To get started, create a project with your favorite front end framework like React, Angular, Vue, Svelte, and so on, or open an existing won, then run npx storybook init. Next, find a UI component, then create a matching file ending in dot stories dotjs. A story is just a function that describes how to render the component. In many cases, a component will have multiple different variations to show in the story. Export a function for each one of these variations. That works, but we can actually change the arguments to a component dynamically directly in the UI. By creating a template that maps arguments to the component, we can now change the component's behavior on the fly directly in the storybook UI. It's also possible to write stories in markdown with MDX. This allows you to not only visualize the component, but also document it at the same time. And there's a huge collection of add ons to customize the behavior of love your storybook. You might use actions to keep track of browser events or viewport to analyze components on responsive layouts. And the measure add on can help you visually debug CSS layout and alignment issues within your stories. When it comes to testing, you could spot check with your own eyeballs or use the test runner to write automated tests and run them on your CI server. And finally, share your work with the world by publishing it as a static web application. This has been Storybook in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
In this video, the speaker explains the benefits of using Storybook as a tool for building and visualizing UI components in isolation. The tool allows developers to extract components from a sandbox and test them against the tool's framework. The tool also allows for flexible editing and customization of component behavior through various actions and tests.