A component preview and development tool for ASP.NET Core Razor components

Inspired by Storybook, built for .NET developers

Features • Installation • Quick Start • Documentation • Contributing • License

---

Overview

RazorKit brings the component-driven development experience to ASP.NET Core Razor applications. Develop, test, and document your UI components in isolation within your running application using an interactive preview environment—without navigating through the full application flow.

Features

• 🎨 Interactive Component Preview — View and interact with Razor components in isolation
• ⚡ Real-time Property Editor — Dynamically modify component props and see changes instantly
• 📚 Story Support — Define multiple states and variants for each component
• ♿ Accessibility Testing — Built-in axe-core integration for automated a11y validation
• 📱 Responsive Testing — Preview components at different viewport sizes
• 🔍 Component Discovery — Automatically discovers components in your project
• 🏗️ Atomic Design Support — Organize components using Atomic Design methodology

Installation

Requirements

• .NET 9.0 or later
• ASP.NET Core

Package Installation

dotnet add package Manifesto.RazorKit

Or add to your .csproj:

<PackageReference Include="Manifesto.RazorKit" Version="0.0.1" />

Quick Start

1. Register Services

Add RazorKit to your ASP.NET Core application in Program.cs:

using Manifesto.RazorKit.Extensions;

var builder = WebApplication.CreateBuilder(args);

// Add Razor Pages (required for RazorKit UI)
builder.Services.AddRazorPages();

// Add RazorKit services
builder.Services.AddRazorKit(options =>
{
    options.ComponentLibraryName = "YourProject.Components";
});

var app = builder.Build();

// Map RazorKit routes
app.MapControllers();
app.MapRazorPages();

app.Run();

2. Define Component Props

Create a props class for your component:

public class ButtonProps
{
    public string Text { get; set; } = "Click me";
    public string Variant { get; set; } = "primary";
    public bool Disabled { get; set; } = false;
}

3. Create Stories

Define stories to showcase different component states:

using Manifesto.RazorKit.Models;

public class ButtonStories : ComponentStoriesBase<ButtonProps>
{
    public override string ComponentName => "Button";

    public override List<ComponentStory> GetStories()
    {
        return new List<ComponentStory>
        {
            CreateStory("primary", "Primary Button", "Default primary button", new ButtonProps
            {
                Text = "Primary",
                Variant = "primary"
            }),
            CreateStory("secondary", "Secondary Button", "Secondary variant", new ButtonProps
            {
                Text = "Secondary",
                Variant = "secondary"
            }),
            CreateStory("disabled", "Disabled State", "Disabled button", new ButtonProps
            {
                Text = "Disabled",
                Disabled = true
            })
        };
    }
}

4. Launch RazorKit

Start your application and navigate to /razorkit to view your components.

Documentation

Component Organization

RazorKit supports Atomic Design principles:

Components/
├── Atoms/
│   └── Button/
│       ├── Button.cshtml
│       ├── ButtonProps.cs
│       └── ButtonStories.cs
├── Molecules/
├── Organisms/
└── Templates/

Configuration Options

Component Library Name

Configure the component library name to specify static asset paths in the preview HTML:

builder.Services.AddRazorKit(options =>
{
    options.ComponentLibraryName = "YourProject.Components";
});

This generates preview HTML with paths like:

• /_content/YourProject.Components/css/main.css
• /_content/YourProject.Components/js/main.js

Custom Component Discovery

Implement IComponentDiscovery to customize how components are discovered:

public class CustomComponentDiscovery : IComponentDiscovery
{
    public List<ComponentInfo> DiscoverComponents()
    {
        // Your custom discovery logic
    }
}

// Register in Program.cs
builder.Services.AddRazorKit(options =>
{
    options.UseCustomDiscovery<CustomComponentDiscovery>();
});

Umbraco Integration

For Umbraco CMS projects, see Umbraco Setup Guide for detailed integration instructions.

Quick Umbraco Setup

Create a Composer to register RazorKit services:

using Manifesto.RazorKit.Extensions;
using Umbraco.Cms.Core.Composing;

namespace YourProject.Composers;

public class RazorKitComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.Services.AddRazorKit(options =>
        {
            options.ComponentLibraryName = "YourProject.UmbracoComponents";
        });
    }
}

Contributing

We welcome contributions! Please see our Contributing Guide for details on:

• Setting up the development environment
• Submitting pull requests
• Coding standards and guidelines
• Publishing new versions

Support

• 🐛 Bug Reports: Open an issue
• 💡 Feature Requests: Open an issue
• 💬 Questions: Start a discussion

Roadmap

• Visual regression testing integration
• Dark mode support
• Component documentation generation
• Plugin system for custom addons

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgments

• Inspired by Storybook
• Built with ❤️ by Manifesto Digital

---

⬆ Back to Top