Getting Started

Installation

dotnet add package Moka.Blazor.Json

The package targets .NET 9 and .NET 10, and works in Blazor Server, WebAssembly and MAUI Hybrid.

Register Services

In your Program.cs:

builder.Services.AddMokaJsonViewer();

Or with custom options:

builder.Services.AddMokaJsonViewer(options =>
{
    options.DefaultTheme = MokaJsonTheme.Dark;
    options.DefaultExpandDepth = 3;
});

Basic Usage

@using Moka.Blazor.Json.Components

<MokaJsonViewer Json="@myJson" />

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

Two-Way Binding

Use @bind-Json to keep your variable in sync when the document is edited:

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

@code {
    private string myJson = """{"name":"Alice"}""";
    // myJson updates automatically when the user edits values
}

Component Parameters

Event Callbacks

<MokaJsonViewer Json="@json"
                OnNodeSelected="HandleNodeSelected"
                OnError="HandleError" />

@code {
    private void HandleNodeSelected(JsonNodeSelectedEventArgs e)
    {
        Console.WriteLine($"Selected: {e.Path} ({e.ValueKind})");
        Console.WriteLine($"Full value: {e.RawValue}");
    }

    private void HandleError(JsonErrorEventArgs e)
    {
        Console.WriteLine($"Error at line {e.LineNumber}: {e.Message}");
    }
}

Programmatic Control

Access the component via @ref to call methods on the IMokaJsonViewer interface:

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

@code {
    private MokaJsonViewer _viewer = null!;

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

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

Available methods:

• NavigateToAsync(jsonPointer): select a node by JSON Pointer (RFC 6901), expanding and scrolling to it. "" is the root; "/" is a property named ""
• ExpandToDepth(depth): expand nodes to depth (-1 for all)
• ExpandAllAsync() / CollapseAll(): expand or collapse the entire tree
• SearchAsync(query, options): search with optional regex/case sensitivity, highlighting and scrolling to the first match
• NextMatchAsync() / PreviousMatchAsync(): move between search results
• ClearSearch(): clear search state
• UndoAsync() / RedoAsync(): undo/redo edit operations
• GetJson(indented): get the current JSON as a string

ExpandAll(), NextMatch(), PreviousMatch(), Undo() and Redo() still exist. They start the operation without waiting for it and report failures through OnError. Prefer the Async versions when you need to know it finished.

The async methods are safe to call from any thread; they run on the component's dispatcher.

Settings the user changes in the settings panel (theme, read-only, line numbers and so on) stay in effect when your page re-renders. Passing a different value for that parameter takes over again.

Keyboard Shortcuts

Shortcuts apply while focus is inside the viewer; click a node first. Cmd works in place of Ctrl on macOS.