Blazor.FlowGuide 0.3.0

Blazor.FlowGuide

Blazor.FlowGuide is a privacy-first Razor Class Library for Blazor Server and Blazor Web Apps. It helps enterprise teams add guided tours, browser-side flow recording, generated HTML/Markdown manuals, WebM video manuals and reproducible support reports.

Current version: 0.3.0

Secure default posture: recorder off, support reports off, snapshots off, video manuals off, and input values not captured unless explicitly opted in.

Install

dotnet add package Blazor.FlowGuide --version 0.3.0

Register services

Production-safe default:

builder.Services.AddBlazorFlowGuide(options =>
{
    options.ProductName = "My Enterprise App";
    options.DefaultCulture = "en-US";
    options.SupportedCultures = ["en-US", "es-ES"];

    // These are the package defaults.
    options.EnableRecorder = false;
    options.EnableSupportReports = false;
    options.CaptureElementSnapshots = false;
    options.CaptureInputValues = false;
    options.EnableVideoManuals = false;
});

Developer tools mode for internal/demo screens only:

builder.Services.AddBlazorFlowGuideDeveloperTools(builder.Environment, options =>
{
    options.ProductName = "My Enterprise App";
    options.PrimaryColor = "#2563eb";
});

The IWebHostEnvironment overload enables recorder, support reports, snapshots and video only in Development. Outside Development, it falls back to safe production defaults unless you explicitly override options.

Support-team mode:

builder.Services.AddBlazorFlowGuide(FlowGuidePreset.SupportTeam, options =>
{
    options.ProductName = "My Enterprise App";
});

Add the provider and recorder

<FlowGuideProvider>
    @Body

    <AuthorizeView Roles="Administrator,Support">
        <Authorized>
            <FlowGuideRecorder />
        </Authorized>
    </AuthorizeView>
</FlowGuideProvider>

The recorder should not be shown to all users. Your host application is responsible for authentication, authorization, roles and tenant rules.

Static assets

The package includes:

src/Blazor.FlowGuide/wwwroot/flowguide.css
src/Blazor.FlowGuide/wwwroot/flowguide.js

When consumed as a package, Blazor serves them from:

_content/Blazor.FlowGuide/flowguide.css
_content/Blazor.FlowGuide/flowguide.js

FlowGuideProvider can add the CSS automatically. Set IncludeDefaultStyles="false" if your application adds the stylesheet manually.

Stable selectors

Use stable data-flow identifiers instead of CSS classes:

<button data-flow="departments.create-button">
    Create department
</button>

<div data-flow-field data-flow-snapshot>
    <label for="department-name">Name</label>
    <input id="department-name" data-flow="departments.form.name" />
</div>

Privacy markers

Redact a sensitive subtree:

<div data-flow-private>
    <label for="token">Private token</label>
    <input id="token" data-flow="departments.form.secret" />
</div>

Exclude a section from visual snapshots:

<div data-flow-no-snapshot>
    <input data-flow="payment.card-number" />
</div>

Capture an input value only with explicit opt-in:

<input data-flow="search.term" data-flow-capture-value />

Without data-flow-capture-value or options.CaptureInputValues = true, input values are not stored in recorded steps or snapshots.

Define a tour

<FlowGuideTour Id="departments.create" Title="Create a department" Culture="en-US">
    <FlowGuideStep Target="[data-flow='nav.departments']"
                   Title="Departments"
                   Text="Open the departments module." />

    <FlowGuideStep Target="[data-flow='departments.create-button']"
                   Title="Create department"
                   Text="Use this button to create a new department." />
</FlowGuideTour>

<FlowGuideLauncher TourId="departments.create" Label="Start guide" />

Exports

When enabled for trusted users, the recorder can download:

• Markdown manual (.md)
• HTML manual (.html)
• Support report (.html)
• Browser-generated WebM video manual (.webm)

Large generated files are downloaded directly by the browser and are not sent back to .NET through Blazor Server SignalR.

Demo

Run the demo with a project reference:

dotnet run --project samples/Blazor.FlowGuide.Demo

After packing, test the package in the demo:

dotnet pack src/Blazor.FlowGuide/Blazor.FlowGuide.csproj -c Release -o artifacts
cd samples/Blazor.FlowGuide.Demo
dotnet run -c Release -p:UsePackedPackage=true -p:FlowGuidePackageVersion=0.3.0-preview.20

Validate before publishing

./scripts/validate.ps1

Or manually:

dotnet clean
dotnet restore
dotnet build -c Release
dotnet test -c Release
node --check src/Blazor.FlowGuide/wwwroot/flowguide.js
dotnet pack src/Blazor.FlowGuide/Blazor.FlowGuide.csproj -c Release -o artifacts

The project is configured to generate both .nupkg and .snupkg.

Repository and license

• Repository: https://github.com/alexeileyvamora/Blazor.FlowGuide
• Project URL: https://github.com/alexeileyvamora/Blazor.FlowGuide
• License: MIT