Home
Guide
Configuration

Configuration

MokaJsonViewerOptions

Configure global defaults via the options pattern when registering services:

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

Options Reference

Option	Type	Default	Description
`DefaultTheme`	`MokaJsonTheme`	`Auto`	Default theme for all viewer instances
`DefaultToolbarMode`	`MokaJsonToolbarMode`	`IconAndText`	Default toolbar display mode (Text, Icon, or IconAndText)
`DefaultExpandDepth`	`int`	`2`	Default depth to expand on load
`MaxDocumentSizeBytes`	`long`	1 TB (1 GB in WebAssembly)	Maximum document size accepted
`EnableEditMode`	`bool`	`true`	Whether edit mode is available
`SearchDebounceMs`	`int`	`250`	Debounce delay for search input
`LazyParsingThresholdBytes`	`long`	50 MB (16 MB in WebAssembly)	Documents over this open in large file mode and are read-only
`MaxClipboardSizeBytes`	`long`	50 MB	Maximum size for clipboard copy
`MaxExportSizeBytes`	`long`	512 MB	Maximum document size for the Export button
`MaxSearchMatches`	`int`	`10,000`	Search of a large document stops after this many matches
`ShowSettingsButton`	`bool`	`true`	Whether the settings gear icon is shown in the toolbar
`AggressiveCleanup`	`bool`	`false`	Forces full GC + LOH compaction when the viewer is disposed

Settings Panel

The viewer includes a built-in settings panel accessible via the gear icon in the toolbar. Users can change settings at runtime without reloading:

Display: Theme, toolbar mode, toggle style, toggle size
Layout: Line numbers, word wrap, breadcrumb, bottom bar
Behavior: Expand depth, collapse mode, read-only toggle
Search: Default case-sensitive and regex modes

To hide the settings button globally:

builder.Services.AddMokaJsonViewer(options =>
{
    options.ShowSettingsButton = false;
});

Or per-instance:

<MokaJsonViewer Json="@json" ShowSettingsButton="false" />

Control how toolbar buttons are displayed:

@* Text labels only *@
<MokaJsonViewer Json="@json" ToolbarMode="MokaJsonToolbarMode.Text" />

@* Icons only *@
<MokaJsonViewer Json="@json" ToolbarMode="MokaJsonToolbarMode.Icon" />

@* Both icons and text *@
<MokaJsonViewer Json="@json" ToolbarMode="MokaJsonToolbarMode.IconAndText" />

Collapse Mode

Control how the tree is initially displayed with the CollapseMode parameter:

@* Default: expand to MaxDepthExpanded *@
<MokaJsonViewer Json="@json" CollapseMode="MokaJsonCollapseMode.Depth" MaxDepthExpanded="3" />

@* Show only root brackets { } or [ ] *@
<MokaJsonViewer Json="@json" CollapseMode="MokaJsonCollapseMode.Root" />

@* Expand everything *@
<MokaJsonViewer Json="@json" CollapseMode="MokaJsonCollapseMode.Expanded" />

Toggle Styles and Sizes

Customize the expand/collapse toggle appearance:

@* Different styles *@
<MokaJsonViewer Json="@json" ToggleStyle="MokaJsonToggleStyle.Chevron" />
<MokaJsonViewer Json="@json" ToggleStyle="MokaJsonToggleStyle.PlusMinus" />
<MokaJsonViewer Json="@json" ToggleStyle="MokaJsonToggleStyle.Arrow" />

@* Different sizes *@
<MokaJsonViewer Json="@json" ToggleSize="MokaJsonToggleSize.ExtraSmall" />
<MokaJsonViewer Json="@json" ToggleSize="MokaJsonToggleSize.Medium" />
<MokaJsonViewer Json="@json" ToggleSize="MokaJsonToggleSize.ExtraLarge" />

Available styles: Triangle (default), Chevron, PlusMinus, Arrow

Available sizes: ExtraSmall, Small (default), Medium, Large, ExtraLarge

Last updated: 2026-11-06