Blazing Story

The clone of "Storybook" for Blazor, a frontend workshop for building UI components and pages in isolation.
Published on Friday 24 January 2025

https://jsakamoto.github.io/BlazingStory/

Over the past couple of years I've been working with React and on occasion there have been a Storybook of components for the UI libraries I've been working with. This is an excellent way to have examples of the control(s) you may need to implement in your site. It gives you options to try different parameter combinations, see it in action and even grab a copy of the code needed to add it to your page(s).

In my pursuit to have all these great options but in .NET I was lucky enough to come across Blazing Story:

The clone of "Storybook" for Blazor, a frontend workshop for building UI components and pages in isolation.

Blazing Story

The "Blazing Story" is built on almost 100% Blazor native (except only a few JavaScript helper codes), so you don't have to care about npm, package.json, webpack, and any JavaScript/TypeScript code. You can create a UI catalog application on the Blazor way!

See it in action: https://jsakamoto.github.io/BlazingStory/

It's very simple to setup.

dotnet new install BlazingStory.ProjectTemplates

Add a new Project to your Solution. Add your components Project to this new Stories Project. Add a new [COMPONENT].stories.razor Razor file and setup the properties.

If you choose the WASM version you can then deploy it via GitHub Pages too!

There's a discussion showing how: #33

  <ItemGroup>
    <PackageReference Include="PublishSPAforGitHubPages.Build" Version="3.0.0" />
  </ItemGroup>

I usually just use sed in the GHA.

I quickly built an example and had it published in about 5 mins:

Looking forward to adding more of the features and working with some components I've built.