@storybook/addon-essentials
Advanced tools
Package description
The @storybook/addon-essentials package is a collection of essential Storybook addons that are recommended for all Storybook users. It includes a set of addons that provide a wide range of functionality, such as controls for live-editing props, actions for logging interactions, viewport customization for responsive design testing, backgrounds to alter the canvas background, toolbars to add global toolbars, and more. It simplifies the setup process by including these addons by default.
Controls
Controls allow you to interact with your component's arguments dynamically, without needing to code. It's like a playground for your components.
"addons": ["@storybook/addon-essentials"]Actions
Actions help you to display data received by event handlers in Storybook's UI. It's useful for debugging events.
"addons": ["@storybook/addon-essentials"]Viewport
Viewport lets you adjust the size of the iframe to check how your stories look on different screen sizes.
"addons": ["@storybook/addon-essentials"]Backgrounds
Backgrounds can be used to change the background color or image behind your stories. This is useful for visualizing components on different backgrounds.
"addons": ["@storybook/addon-essentials"]Toolbars & globals
Toolbars and globals allow you to add your own toolbar items and use them to control global types and values in your stories.
"addons": ["@storybook/addon-essentials"]This package allows you to add knobs to your stories in Storybook. Similar to Controls, knobs let you edit props dynamically using a UI. However, @storybook/addon-essentials' Controls are the successor to Knobs and are recommended for new development.
This package is included in @storybook/addon-essentials and can be used standalone. It allows you to log interactions and events that happen in the UI components being developed.
Also part of @storybook/addon-essentials, this standalone addon allows you to view your components in different sizes and layouts in Storybook, simulating how they would look on different devices.
This is another addon that is part of the essentials package. It lets you define a set of backgrounds that can be applied to the Storybook canvas, allowing you to test components in different environments.
This addon is included in the essentials package and provides the ability to create custom toolbars in Storybook. It's useful for creating global context changes for your components.
Changelog
8.2.0
Hold onto your hats! Storybook 8.2 has dropped, packed with a treasure trove of new features and bug fixes:
beforeAllplay functiontocbot - #28318, thanks @shilman!--no-dev option to init - #26918, thanks @fastfrwrd!--dev and --no-dev options to storybook init CLI - #26918, thanks @fastfrwrd!@storybook/addon-svelte-csf when initializing new projects - #27070, thanks @benmccann!beforeAll hook - #28255, thanks @ghengeveld!pkg-dir to fd-package-json - #28270, thanks @43081j!loading -> rendering -> playing - #28431, thanks @kasperpeulen!.stories.mdx handling - #25973, thanks @JReinhold!CJS for core/components - #28440, thanks @ndelangen!preview.js globals to initialGlobals - #27517, thanks @shilman!markdown-to-jsx to v7.4.5 - #26694, thanks @xyy94813!webpack-virtual-modules to 0.6.0 - #27102, thanks @fyodorovandrei!read-pkg-up to fd-package-json - #28272, thanks @43081j!doctrine with jsdoc-type-pratt-parser - #26305, thanks @43081j!Stories block, error when referenced in MDX - #28434, thanks @kasperpeulen!Typeset Doc block fontSizes type - #26475, thanks @noranda!env.bugfixes in SWC so destructuring is never transpiled - #28363, thanks @kasperpeulen!mount in react, svelte, and vue renderers - #28385, thanks @kasperpeulen!CompatibleString - #27180, thanks @sni-J!Readme
Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain framework support for all of the officially supported frameworks.
Storybook essentials includes the following addons. Addons can be disabled and re-configured as described below:
You can add Essentials to your project with:
npm install --save-dev @storybook/addon-essentials
And then add the following line to your .storybook/main.js:
export default {
addons: ['@storybook/addon-essentials'],
};
Essentials is "zero config." That means that comes with a recommended configuration out of the box.
If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's main.js on startup and if detects one of its addons is already configured in the addons field, it will skip that addon's configuration entirely.
You can disable any of Essential's addons using the following configuration scheme in .storybook/main.js:
export default {
addons: [{
name: '@storybook/addon-essentials',
options: {
<addon-key>: false,
}
}]
};
Valid addon keys include: actions, backgrounds, controls, docs, viewport, toolbars.
FAQs
Curated addons to bring out the best of Storybook
The npm package @storybook/addon-essentials receives a total of 4,561,741 weekly downloads. As such, @storybook/addon-essentials popularity was classified as popular.
We found that @storybook/addon-essentials demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.
Product
Check out what's new at Socket with our Product Changelog. It tracks all public-facing updates, improvements, and fixes so you can take full advantage of our features.