Codekali.Net.Config.UI — .NET appsettings Management UI

What's included

Everything you need to manage config

A full-featured UI embedded directly in your ASP.NET Core app — no external services, no dashboards, no configuration required to get started.

Tree View Editor

Expand, edit, add, and delete keys inline with full nested object and array support. Works on any depth of JSON.

Monaco Raw JSON Editor

Powered by the VS Code engine — syntax highlighting, bracket matching, and Ctrl+S to save directly from the editor.

Comment Preservation

// and /* */ comments survive every save operation — in both the tree view and raw editor.

Array Editing

Expand arrays, append new items, remove items by index, and update values — all from the browser UI.

Move / Copy Between Environments

Swap configuration keys between appsettings.json, appsettings.Development.json, and any other environment file.

Side-by-Side Diff

Compare any two environment files visually, side by side, to spot differences at a glance.

Sensitive Value Masking

Keys containing password, secret, token, or apikey are automatically masked in the UI.

Hot Reload Detection

A dismissible banner notifies you when a config file changes externally while the UI is open.

Dark / Light Mode

Toggle between dark and light themes. Your preference is remembered across sessions.

Auto-detect Config Files

Automatically discovers all appsettings*.json files in your solution at runtime — no manual registration.

Explicit Save Only

Never auto-saves. All changes require a deliberate save action, giving you full control over when changes are applied.

Development-Only by Default

The middleware returns 404 in production unless explicitly enabled, so it never leaks its existence to the public.

Get up and running

Quick Start

Three lines of code and you're done. Open your browser and manage your config.

dotnet add package Codekali.Net.Config.UI --version 1.1.5

NuGet\Install-Package Codekali.Net.Config.UI -Version 1.1.5

<PackageReference Include="Codekali.Net.Config.UI" Version="1.1.5" />

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

// Program.cs
app.UseConfigUI();

https://localhost:5001/config-ui

Options

Configuration Reference

All options are optional. Pass them to AddConfigUI() to customise behaviour.

builder.Services.AddConfigUI(options =>
{
    options.PathPrefix              = "/config-ui";          // Configurable to any path prefix you like (e.g. "/admin/config", etc.)
    options.AccessToken             = "your-secret-token";   // simple token auth
    options.AuthorizationPolicy     = "ConfigUIAccess";       // ASP.NET Core policy
    options.AllowedEnvironments     = ["Development", "Staging"];
    options.MaskSensitiveValues     = true;
    options.ReadOnly                = false;
    options.EnableAutoToken         = false;                  // auto-generate token on first run
    options.EnableHotReloadDetection = true;
    options.ConfigDirectory         = null;                   // defaults to CWD
});

builder.Services.AddAuthorization(o =>
    o.AddPolicy("ConfigUIAccess", p => p.RequireRole("Admin")));

app.UseConfigUI();

// Auto-generate token on first run
// Written to Properties/launchSettings.json as CONFIGUI_ACCESS_TOKEN
builder.Services.AddConfigUI(options =>
    options.EnableAutoToken = true);

// Access via header:
// X-Config-Token: <generated-token>
// Or query string:
// /config-ui?token=<generated-token>

Option	Type	Default	Description
PathPrefix	string	"/config-ui"	URL path where the UI is served. Configurable to any path prefix you like (e.g. `"/admin/config"`, `"/settings"`, `"/configuration"` etc.)
AccessToken	string?	null	Simple bearer token. Pass via header `X-Config-Token` or query string `?token=`.
AuthorizationPolicy	string?	null	ASP.NET Core authorization policy name to enforce on the UI route.
AllowedEnvironments	string[]	["Development"]	Environments where the UI is accessible. Returns 404 in all others.
MaskSensitiveValues	bool	true	Masks keys containing password, secret, token, apikey in the UI.
ReadOnly	bool	false	Disables all write operations — UI becomes read-only.
EnableAutoToken	bool	false	Auto-generates an access token on first run and persists it to `launchSettings.json`.
EnableHotReloadDetection	bool	true	Shows a banner when a config file changes externally while the UI is open.
ConfigDirectory	string?	null	Root directory to scan for `appsettings*.json`. Defaults to current working directory.

IOptions Reload Guidance

Changes written by the Config UI take effect at runtime only when consuming code uses IOptionsSnapshot<T> (per-request) or IOptionsMonitor<T> (singleton-safe) — not IOptions<T>, which snapshots values at startup.

Stay safe

Security

Designed to be safe by default — the UI is invisible in production unless you explicitly open it up.

Security Best Practices

The middleware returns 404 outside allowed environments — it does not reveal its existence.
Always set AllowedEnvironments explicitly when enabling beyond Development.
Always set an AccessToken or AuthorizationPolicy for any non-local access.
Consider putting the path behind a VPN or internal network in staging environments.
Sensitive keys (password, secret, token, apikey) are automatically masked in the UI by default.
Token can be passed via Header X-Config-Token or Query string ?token=.

Release history

Versions

Published on NuGet. MIT licensed.

Version	Released	Highlights
1.1.5	Apr 5, 2026	Monaco editor, comment preservation, array support, hot reload detection, auto-token, ASP.NET Core auth policy, CSS/JS minification.
1.0.1	Apr 5, 2026	Initial release. Tree view editor, sensitive value masking, dark/light mode, development-only middleware.