Charm Editor Documentation

Welcome to the official documentation for Charm Editor ✨
This documentation describes the system architecture, core concepts, and internal modules of the project.

---

What is Charm Editor?

Charm Editor is a modular, extensible shader-oriented code editor designed with a strong architectural foundation:

• Strict separation between Core / UI / Infrastructure
• Support for multiple Editor Engines (Monaco, CodeMirror)
• First-class LSP integration
• Multi-runtime support: Web and Desktop (Electron)

The project prioritizes long-term maintainability and scalability over short-term convenience.

---

Tech Stack

Charm Editor is built with a modern, high-performance stack:

• Frontend: React + TypeScript + Tailwind CSS
• Core Logic: Pure TypeScript (Domain-Driven Design)
• Runtimes: Electron (Desktop) & Browser (Web)
• Editor Engines: Monaco & CodeMirror 6
• Language Intelligence: Zig (for glsl_analyzer)
• Graphics: WebGPU & WebGL

---

Documentation Structure

The documentation is organized into clear, focused sections:

🧭 Architecture

• System Overview
• Data Flows
• Design Decisions

🧱 Core & Internals

• Domain Model
• Editor Engine Abstraction
• File System Layer
• LSP Integration

🔌 Platform

• Electron & IPC
• Security Model

🗺️ Roadmap

• Execution Phases
• Long-term Vision

📘 Glossary

• Terminology and Definitions

---

Where to Start

• New to the project? Start with the Architecture Blueprint.
• Working on UI/React? Check out the UI Category.
• Implementing Core Logic? See Modules Overview.
• Desktop-specific work? Read about IPC and Electron.

---

Notes

• This documentation targets developers, not end users
• All diagrams are authored using Mermaid
• All major architectural decisions are documented in DECISIONS

---

The purpose of this documentation is not only to explain what exists,
but also why the system is designed this way.