The clone of "Storybook" for Blazor β a frontend workshop for building UI components and pages in isolation.
Built almost 100% on Blazor native (only a few JavaScript helpers), so you can create a UI catalog application the Blazor way β no npm, package.json, webpack, or JS/TS code required.
Blazing Story also provides an MCP server feature that exposes component and story information to AI agents for highly accurate code generation.
π Try the live demo: https://jsakamoto.github.io/BlazingStory/
This walkthrough assumes you already have a Blazor app project (e.g. MyBlazorApp1) with components you want to catalog.
dotnet new install BlazingStory.ProjectTemplates
Add a Blazing Story app project alongside your existing app:
# For Blazor WebAssembly: dotnet new blazingstorywasm -n MyBlazorApp1.Stories # For Blazor Server (add -mcp to enable the MCP server feature): dotnet new blazingstoryserver -n MyBlazorApp1.Stories dotnet sln add ./MyBlazorApp1.Stories/
Note
The MCP server feature is only available with the Blazor Server variant.
Tip
Visual Studio users can do the equivalent through Add β New Project and pick the "Blazing Story (WebAssembly App)" or "Blazing Story (Server App)" template.
dotnet add ./MyBlazorApp1.Stories reference ./MyBlazorApp1
Place a *.stories.razor file (typically under a Stories/ folder) in the Blazing Story app project:
@* MyBlazorApp1.Stories/Stories/Button.stories.razor *@
@using MyBlazorApp1.Components
@attribute [Stories("Components/Button")]
<Stories TComponent="Button">
<Story Name="Primary">
<Template>
<Button Label="Button" Primary="true" @attributes="context.Args" />
</Template>
</Story>
</Stories>Important
The file name must end with .stories.razor β this is required by the "Show code" feature on the "Docs" pages.
dotnet run --project ./MyBlazorApp1.Stories
π You'll see the Storybook clone built on Blazor!
For advanced topics β story structure, args, controls, decorators, addons, and more β see the Blazing Story Documentation Site.
Agent skills are published to help AI coding assistants implement stories and custom addons for Blazing Story:
blazing-story-storyβ generate.stories.razorfiles for your componentsblazing-story-addonβ scaffold and register custom addons (toolbar, panel, preview decorator)
Install with GitHub CLI (v2.90.0+):
gh skill install BlazingStory/agent-skills blazing-story-story gh skill install BlazingStory/agent-skills blazing-story-addon
For details and the latest information, see the upstream repository: https://github.com/BlazingStory/agent-skills
.NET SDK 8 or later
Assembly files of a Blazing Story app embed the project file path as metadata.
If the project path must remain confidential, avoid using Blazing Story.
Blazing Story is a personal hobby project and a technical exhibition β it is not an officially derived product of Storybook. I plan to keep improving it, but it may be abandoned if I cannot spend enough time on it. Forks and community maintenance are welcome.
Because Blazing Story is a Blazor-native re-implementation that mimics Storybook's look, behavior, and functionality, none of the Storybook community's contributions, addons, or related services are available here. The trade-off is that Blazor developers get a Storybook-like component catalog within the familiar .NET ecosystem, free from the JavaScript front-end toolchain.
See RELEASE-NOTES.txt.
Mozilla Public License Version 2.0
The third party notice is here.