Skip to content

Storybook 6.5 - Key Features to Note

Storybook is an open-source tool for building UI components and pages in isolation. It allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

Storybook 6.5 was recently released and it comes with exciting features highlighted in this article.

Support for the Latest Popular Javascript Libraries and Frameworks

Support for Angular and React Out of the Box

Storybook 6.5 supports React 18 and Angular 14 out of the box.

When you run your React project for the first time, it will auto-detect the React version and use the new root API if it detects it on React 18.

Check out #17215.

Figma Plugin

With Storybook 6.5, you can easily compare design specs and different implementations with the help of the Figma plugin’s Storybook Connect which embeds stories into the Figma workspace.

This plugin allows developers to interact with the Figma design using a link created by the Figma plugin between the stories and designs. Check out more here.

Interaction Testing

Storybook Interaction Testing allows developers to write tests for your application in the story file itself. The tests execute in the browser, and you can get a GUI to visualize and debug them. Under the hood, it is powered by Jest, Playwright, and a testing library, giving you the familiarity of testing the application.

Check out Integrated Test.

Webpack 5 Lazy Compilation

Lazy Compilation is a feature that only calls the content of a page when it is needed, and delays every other content until a route to the content is called.

Storybook 6.5 only compiles the core runtime, and builds stories as you visit them. This enables the developer to quickly spin-up stories, and rebuild larger Storybooks.

Learn more about Storybook Lazy Compilation

Other features

Storybook support for Vite Builder has been improved with instant rebuild of stories, and have officially been brought into Storybook's core.

There were also improvements to accessibility features for Storybook and UI design features for stories.

Wrap Up

Storybook 6.5 offers a number of features and out of the box support for both React and Angular, making this release among the most exciting for this open source UI tool:

Figma’s Storybook Connect embeds stories into the Figma workspace. Write tests for your application in the story file itself with Storybook Interaction Testing.

Webpack 5 Lazy Compilation calls the content of a page when it is needed, and delays every other content until a route to the content is called.

If you get a chance to try out Storybook yourself, please let us know by tweeting us at @ThisDotMedia!


This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdot.co.

You might also like

Javascript

Getting Started with RxJS

Javascript

Testing Web Components with Cypress and TypeScript

Javascript

Web Components Integration using LitElement and TypeScript

Javascript

Navigation Lifecycle using Vaadin Router, LitElement and TypeScript