mrspot-dev

Claude Settings Editor — Design skill for Claude Code

Design community

GUI-based editor for Claude Code settings.json — standalone HTML with Alpine.js + Tailwind CSS.

How to install Claude Settings Editor

This entry records only its repository, not the path inside it, so there is no exact command to give. Open mrspot-dev/claude-settings-editor and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Settings Editor does

GUI-based editor for Claude Code settings.json — standalone HTML with Alpine.js + Tailwind CSS.

Alternatives in Design

  • Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
  • Guitar — by soramimi - Serves as development guide for Guitar Git GUI Client with build commands for various platforms 1.7k ★
  • Drawbridge — Design editor for Claude Code and Cursor 960 ★

README

Claude Settings Editor Logo

Claude Settings Editor

A visual GUI editor for Claude Code settings.json files.
Single standalone HTML file — no build step, no server, no dependencies to install. Just open and edit.

HTML Tailwind CSS Alpine.js i18n License

Quick Start

**Try it online:** [mrspot-dev.github.io/claude-settings-editor](https://mrspot-dev.github.io/claude-settings-editor/)

The hosted version runs entirely in your browser. Your `settings.json` is read and written directly on your own machine through the File System Access API — nothing is uploaded. It saves you the download when you just want a look.

For regular use, prefer a local copy. A file you downloaded changes only when you replace it, while a hosted page always serves whatever is currently deployed — worth keeping in mind for a file that may contain API keys.

**Option A — Manual:**

  1. Download claude-settings-editor.html
  2. Open in any Chromium browser (Chrome, Edge, Arc)
  3. Click Open to load your settings.json
  4. Edit visually, then Save back to disk

**Option B — Auto-Detect (recommended):**

  1. Download the repo (or just claude-settings-editor.html + open-editor.py)
  2. Run the companion script:
    python open-editor.py
  3. The script finds all your settings.json files, lets you pick one, and opens the editor pre-loaded
  Claude Settings Editor — Auto-Detect
  ========================================

  Found 3 settings f