Moka.Blazor.Json.Abstractions 0.2.0

Moka.Blazor.Json

A high-performance Blazor JSON viewer and editor component with virtualized rendering, lazy parsing for large documents, search, theming, and extensible context menus.

Features

• Virtualized rendering — handles documents up to 2 GB with smooth scrolling
• Lazy parsing — documents over 50 MB use byte-offset indexing with on-demand subtree parsing
• Inline editing — double-click to edit values, rename keys, add/delete nodes with undo/redo
• Search — plain text, regex, case-sensitive with match navigation; streaming search for large docs
• Theming — light, dark, auto (system preference), or fully custom via CSS variables
• Settings panel — built-in gear menu for runtime configuration of all display/behavior settings
• Toolbar modes — text-only, icon-only, or icon+text toolbar display
• Context menu — built-in actions + extensible custom actions with type/property filtering
• Breadcrumb navigation — clickable path segments for easy traversal
• Key sorting — sort object keys alphabetically (single level or recursive)
• Node scoping — zoom into any subtree as if it were the root
• Zero external dependencies — built on System.Text.Json
• Multi-target — supports .NET 9 and .NET 10

Packages

Installation

dotnet add package Moka.Blazor.Json

Quick Start

1. Register services

// Program.cs
builder.Services.AddMokaJsonViewer();

2. Add the component

@using Moka.Blazor.Json.Components

<MokaJsonViewer Json="@myJson" />

@code {
    private string myJson = """{"name":"Alice","age":30,"tags":["dev","admin"]}""";
}

3. Two-way binding

<MokaJsonViewer @bind-Json="myJson" ReadOnly="false" />

@code {
    private string myJson = """{"name":"Alice"}""";
    // myJson updates automatically when the document is modified
}

Parameters

Configuration

builder.Services.AddMokaJsonViewer(options =>
{
    options.DefaultTheme = MokaJsonTheme.Dark;
    options.DefaultToolbarMode = MokaJsonToolbarMode.IconAndText;
    options.DefaultExpandDepth = 3;
    options.MaxDocumentSizeBytes = 2L * 1024 * 1024 * 1024; // 2 GB
    options.LazyParsingThresholdBytes = 50 * 1024 * 1024;   // 50 MB
    options.MaxClipboardSizeBytes = 100 * 1024 * 1024;      // 100 MB
    options.SearchDebounceMs = 300;
    options.ShowSettingsButton = true;
});

Programmatic Control

The component implements IMokaJsonViewer for programmatic access:

<MokaJsonViewer @ref="_viewer" Json="@json" />

@code {
    private MokaJsonViewer _viewer = null!;

    private async Task NavigateToUser()
    {
        await _viewer.NavigateToAsync("/users/0/name");
    }

    private async Task Search()
    {
        var matchCount = await _viewer.SearchAsync("error", new JsonSearchOptions
        {
            CaseSensitive = false,
            UseRegex = true,
            SearchKeys = true,
            SearchValues = true
        });
    }
}

Available methods:

• NavigateToAsync(jsonPointer) — Navigate to a JSON Pointer path
• ExpandToDepth(depth) — Expand nodes to depth (-1 for all)
• ExpandAll() / CollapseAll() — Expand or collapse the entire tree
• SearchAsync(query, options) — Search with optional regex/case sensitivity
• NextMatch() / PreviousMatch() — Navigate search results
• ClearSearch() — Clear search state
• GetJson(indented) — Get the current JSON as a string

Custom Context Menu Actions

private readonly List<MokaJsonContextAction> _actions =
[
    new MokaJsonContextAction
    {
        Id = "open-url",
        Label = "Open URL",
        ShortcutHint = "Enter",
        Order = 500,
        HasSeparatorBefore = true,
        IsVisible = ctx => ctx.ValueKind == JsonValueKind.String
                           && ctx.RawValuePreview.StartsWith("\"http", StringComparison.OrdinalIgnoreCase),
        OnExecute = ctx =>
        {
            var url = ctx.RawValuePreview.Trim('"');
            // Open URL...
            return ValueTask.CompletedTask;
        }
    }
];

<MokaJsonViewer Json="@json" ContextMenuActions="_actions" />

Theming

@* Built-in themes *@
<MokaJsonViewer Json="@json" Theme="MokaJsonTheme.Dark" />
<MokaJsonViewer Json="@json" Theme="MokaJsonTheme.Light" />
<MokaJsonViewer Json="@json" Theme="MokaJsonTheme.Auto" />

@* Custom theme: use Inherit + your own CSS variables *@
<MokaJsonViewer Json="@json" Theme="MokaJsonTheme.Inherit" />

Override CSS custom properties for full control — see Theming documentation.

Diagnostics

For development, add the diagnostics package to monitor lazy parsing performance:

dotnet add package Moka.Blazor.Json.Diagnostics

@using Moka.Blazor.Json.Diagnostics.Components

<MokaJsonViewer @ref="_viewer" Json="@json" />
<MokaJsonDebugOverlay Viewer="_viewer" Enabled="true" />

The overlay shows real-time coverage, parse stats, cache hit rates, and recent parse operations.

Keyboard Shortcuts

Documentation

Full documentation: jacobwi.github.io/Moka.Blazor.Json

Project Structure

src/
  Moka.Blazor.Json/              # Main component library
  Moka.Blazor.Json.Abstractions/ # Interfaces and models
  Moka.Blazor.Json.Diagnostics/  # Debug overlay for lazy parsing
tests/
  Moka.Blazor.Json.Tests/        # Unit + bUnit component tests
  Moka.Blazor.Json.Benchmarks/   # Performance benchmarks
samples/
  Moka.Blazor.Json.Demo/         # Interactive demo application

License

MIT