Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Storybook by Nicklas Knell DarmstadtJS cosee GmbH
Search
Nicklas
June 25, 2019
Programming
0
110
Storybook by Nicklas Knell DarmstadtJS cosee GmbH
Overview about Storybook, its use-cases and its features.
Nicklas
June 25, 2019
Tweet
Share
More Decks by Nicklas
See All by Nicklas
Vue vs React - Ein direkter Vergleich
nicklasknell
0
75
Einstieg in Vue.js - Cosee Lightning Talks
nicklasknell
0
68
Other Decks in Programming
See All in Programming
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
570
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
630
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
120
AIエージェント開発、DevOps and LLMOps
ymd65536
1
270
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
310
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
kiroでゲームを作ってみた
iriikeita
0
180
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
920
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
100
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
実践!App Intents対応
yuukiw00w
1
300
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Fireside Chat
paigeccino
39
3.6k
A Tale of Four Properties
chriscoyier
160
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
GitHub's CSS Performance
jonrohan
1031
460k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
BBQ
matthewcrist
89
9.8k
Optimizing for Happiness
mojombo
379
70k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Six Lessons from altMBA
skipperchong
28
4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
None
Nicklas Knell Frontend Engineer
[email protected]
@nicklas_knell
Why you might wanna use Storybook! → Managing many components
→ Building components in isolation → Enforcing a consistent design across one or more projects
One example for Consistent Design
What is Storybook?
What is Storybook? UI-Documentation Living Styleguide Component Explorer Isolated Development
Environment Testing Environment
None
None
How does it work? Storybook is just a web app
that you also can serve as static app.
Getting started npx -p @storybook/cli sb init
“Did you know that a whopping 18% of Storybook support
issues are related to configuration problems?!” - Michael Shilman
Presets New since v5.1 Simplify Storybook configuration Typescript SCSS
What is a story? Plain JavaScript Representation of a component
How is a story written?
Knobs Actions Source Notes A11y Backgrounds Links Viewport Addons
Addons Additionally you can write your own addons or browse
other community addons.
Knobs Provides a set of inputs to dynamically change a
components props.
Knobs text boolean number number in range color files object
array select radio buttons options date
Actions Actions are an easy way to log that an
event has happened.
Notes With Notes you can write simple text or markdown
to improve your components documentation.
Viewport Viewport provides a wide range of screen sizes to
choose from
Source View the stories source directly in Storybook.
Links If your component is a composition of other components,
you can link the stories of them in your story.
Backgrounds
Backgrounds
A11y View you stories in different types of color blindness.
A11y Analyse your components directly in Storybook.
Centered
Live Demo
+ Stories are written super fast + Addons provide an
huge amount of features + Easily browse and mock your components - Setup can be a hell of a ride Conclusion