Getting Started

Installation

dotnet add package Moka.Blazor.Json

The package targets .NET 9 and .NET 10. It uses FrameworkReference so it will not force specific package versions on your project.

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) — navigate to a JSON Pointer path (RFC 6901)
• 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
• Undo() / Redo() — undo/redo edit operations
• GetJson(indented) — get the current JSON as a string

Keyboard Shortcuts