Jawwad A. Ayyubi

Posted on Apr 6

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

#csharp #productivity #dotnet #webdev

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 is one of those tasks that never gets easier. You're manually editing JSON, hunting for the right key across multiple files, or copy-pasting values between environments while hoping you don't break anything.

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

Setup is Genuinely One Line

Install the package:

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. CorsSettings, AllowedHosts, feature flags — all editable.
✏️ 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 Save Raw operation via positional string surgery.
⇄ 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 — see what's different, what's identical, and what's missing.
🔄 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 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 = ["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 snapshots at startup and ignores file changes.

Security

The middleware returns 404 when accessed outside an allowed environment — it does not leak its existence. For non-development use:

Set AllowedEnvironments explicitly
Always set an AccessToken or AuthorizationPolicy
Host behind a VPN or internal network for Staging

Platform-Specific Tips for Sharing This Post

Platform	Tip
Reddit	Lead with the problem. Keep it conversational. Link GitHub first. Add a screenshot or demo GIF at the top. Post to r/dotnet and r/csharp.
Dev.to	Use the post as-is. Add a cover image. Tags: dotnet, csharp, webdev, productivity.
Medium	Add a hero image, expand the Problem section slightly. Use the canonical link back to your GitHub.
LinkedIn	Cut to 3 short paragraphs. Remove code blocks. End with a question: "What other .NET tooling pain points are worth solving?"
Twitter / X	"One NuGet package, one line of middleware. Browser-based appsettings.json editor for .NET. Preserves comments, supports arrays, Monaco editor. #dotnet #csharp"

NuGet Package Details

Target	Notes
net8.0	Full ASP.NET Core FrameworkRef. Supports Identity Authorization.
netstandard2.1	Compatible with any ASP.NET Core 3.0+ host.

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 goes a long way with discoverability. Feedback and bug reports welcome — this is v1.1 and edge cases are expected.

Codekali.Net.Config.UI — github.com/Codekali
nuget.org/packages/Codekali.Net.Config.UI github.com/Codekali

DEV Community