Posted on Oct 19 • Originally published at Storybook.js.org Storybook is the gold standard UI workshop environment. It’s used across the industry by teams at Monday.com, The Guardian, Intuit, and many more for developing, documenting, and testing UIs.Today, we're thrilled to introduce Storybook's latest version: Storybook 7.5! It brings a range of new features that enhance the Storybook experience.Let's dive in!One of the major highlights of Storybook 7.0 was the official introduction of zero-config support for Vite. Vite has quickly grown into one of the ecosystem's favorite builders due to its highly competitive speeds.In Storybook 7.5, we're laying the groundwork for integration with Vite's next version: Vite 5.0! Storybook 7.5 includes Vite 5 as a peer dependency and dynamically imports all Vite functions to force the use of ES modules (as Vite 5 deprecates CJS methods).Storybook 7.5 upgrades react-docgen to version 6. This change is a precursor to making react-docgen the default for auto-generating controls in Storybook 8.The upgrade dramatically improves Storybook's handling of TypeScript types and heavily decreases startup times for larger React Storybooks. For example: react-docgen 6 reduced startup times for the Mealdrop project (which we use for many of our tests) from 8.9s to 4.0s!storiesOf was our original API for creating Storybook stories. In 2019 (Storybook 5.2), it was replaced by Component Story Format (CSF) – a simpler, portable, and more performant successor.Since introducing CSF, new versions of Storybook have continued supporting storiesOf . This gave CSF time to mature and provided Storybook users with time to make the migration.It’s now four years later. CSF is on its third iteration and it’s used by virtually all Storybook projects. So, we’re taking this as a moment to officially deprecate our support for storiesOf and storyStoreV6.If you're still using storiesOf, you can get started with the migration by using these two scripts:Learn more about the deprecation and how to continue dynamically generating stories in CSF.We've made several improvements to how Storybook works with Next.js.Firstly, Next.js users are are now able to alias import statements from next/font/ into Storybook.We've also fixed an issue where next/font wasn't working properly on Windows machines.Finally, we've set up monitoring for Next.js canary releases. This automatically checks whether Storybook runs with the latest Next.js canary, and means we can spot bugs and make fixes more quickly!Storybook 7.5 introduces the argsToTemplate feature for Angular, designed to simplify the generation of Angular component templates. This function streamlines the handling of property and event bindings in Storybook stories.A significant benefit of argsToTemplate is that it addresses the challenge of how Angular treats undefined values in property bindings, which often led to misunderstandings. With this utility, there’s now enhanced support for Storybook controls, ensuring they align better with Angular’s standard behaviors.In your story, integrate argsToTemplate within the template string, as seen below:Your arguments will correctly be mapped to property and event bindings!In Storybook 7, Webpack compilation errors wouldn't propagate to the terminal while Storybook was in dev mode. This was the case in Storybook 6.5. It stopped working because of changes made to the webpack-dev-middleware library.Storybook 7.5 fixes that bug and that behavior has now returned. This means that you might now see more warnings that weren’t previously there. Fixing them may help make your Storybook more performant!If you’d like to customize the level of logs that Storybook provides, you can configure the logLevel option in your storybook/main.ts file.Finally, Storybook 7.5 also brings support for Lit 3.0!Lit is one of the leading libraries for developing web components. The new Lit 3.0 is the Lit team's first major release since early 2021.To carry on using Storybook as normal in your Lit 3 project, upgrade to Storybook 7.5 today!To upgrade your Storybook to 7.5, run:For guidance on upgrading from a version of Storybook that's earlier than Storybook 7, check out the Storybook 7 migration guide.Alternatively, for a fresh install, bootstrap Storybook into an existing app with:Huge thanks to everyone who contributed to Storybook 7.5! That includes:There are many ways to get involved with the Storybook community!Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Mad Devs - Oct 11 sudha - Oct 15 Ojo Akinsola - Oct 15 Janki Mehta - Oct 11 Once suspended, storybookjs will not be able to comment or publish posts until their suspension is removed. Once unsuspended, storybookjs will be able to comment and publish posts again. Once unpublished, all posts by storybookjs will become hidden and only accessible to themselves. If storybookjs is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Storybook. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag storybookjs: storybookjs consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging storybookjs will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.