Getting Started With Storybook Without a JavaScript Framework

Use it with plain HTML and CSS

Photo by Ksenia Makagonova on Unsplash.

We all want to use well-documented UI components in our frontend. With Storybook, you can do that reasonably quickly with React, Angular, Vue, or any other framework.

But since the documentation lacks clear information about how to set up Storybook without any JavaScript framework, I’m going to write it all down for you because it is possible to use plain HTML and CSS.

If you want to learn more about why you should use Storybook, check out Why You Should Always Use Storybook When Developing User Interfaces by Tyler Hawkins.

Installation

Add Storybook by running the following command in the terminal:

npx sb init

This command will add all the dependencies for Storybook and create initial files so that you can get started right away.

After the installation, you will see this question: “Do you want to manually choose a Storybook project type to install?” Type “yes.” Then “Please choose a project type from the list” will appear. For this, type “HTML.”

Now the CLI will set everything up to use Storybook with plain HTML.