I built a browser-based GUI for managing appsettings.json in .NET — now on NuGet

Source: Dev.to

Introducing Codekali.Net.Config.UI

v1.1.6 — Now on NuGet
A browser‑based GUI for managing appsettings.json in any .NET solution.

The Problem

Managing appsettings.json files across Development, Staging, and Production environments often involves manual JSON edits, hunting for keys across multiple files, and copy‑pasting values—all prone to errors.

Codekali.Net.Config.UI solves this with a plug‑and‑play .NET middleware library that provides a browser‑based configuration editor directly inside your running app. One NuGet package, one line of middleware, no extra infrastructure.

Setup – One Line Installation

dotnet add package Codekali.Net.Config.UI

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

// Open your browser:
https://localhost:5001/config-ui

What It Does

• 🌳 Tree view editor – Entire appsettings rendered as an expandable tree; double‑click any value to edit inline.
• 🔢 Full array support – Expand arrays, append items, remove by index (e.g., CorsSettings, AllowedHosts, feature flags).
• ✏️ Monaco raw editor – VS Code engine with syntax highlighting, bracket matching, JSON validation, and Ctrl+S to save.
• 💬 Comment preservation – // and /* */ comments survive every add, update, delete, and raw‑save operation.
• ⇄ Move / Copy keys – Select keys from Development and copy or move them to Production in one click; includes conflict detection.
• ⊞ Side‑by‑side diff – Compare any two appsettings files to see differences, similarities, and missing entries.
• 🔄 Hot reload detection – Banner notification when a file changes on disk externally; tree view reloads automatically.
• 🙈 Sensitive value masking – Keys containing password, secret, token, apikey are masked by default; reveal with one click.
• 🔐 Security guards – Returns 404 outside allowed environments; optional access token or full ASP.NET Core authorization policy.
• 🌙 Dark / Light mode – Full theme toggle; Monaco editor syncs with the page theme.

Configuration

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

Authorization Policy Example

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

app.UseConfigUI(options => options.AuthorizationPolicy = "ConfigUIAccess");

IOptions Reload Guidance

⚠ Changes take effect at runtime only when consuming code uses IOptionsSnapshot or IOptionsMonitor. Plain IOptions captures values at startup and ignores file changes.

Security

• The middleware returns 404 when accessed outside an allowed environment, preventing discovery.
• For non‑development use:
  • Set AllowedEnvironments explicitly.
  • Always configure an AccessToken or AuthorizationPolicy.
  • Host behind a VPN or internal network for Staging.

Platform‑Specific Tips for Sharing This Post

NuGet Package Details

Links

• NuGet:
• GitHub:
• Docs:

What’s Next

• v1.2 – Versioned backup system with one‑click restore, full backup history panel, and change audit log.
• v1.3 – JSON Schema validation engine with inline error markers in tree view and Monaco editor.
• v2.0 – AI‑assisted value suggestions — context‑aware LLM recommendations based on key name and config hierarchy.
• v3.0 – Global CLI tool: dotnet tool install -g codekali-config — manage any project directory without installing the NuGet package.

If this is useful to you, a GitHub star helps with discoverability. Feedback and bug reports are welcome—this is v1.1 and edge cases are expected.