Code Editor X

A modern, browser-based code editor built with React 19, TypeScript, CodeMirror 6, Tailwind CSS 4, and Radix UI. VS Code-inspired interface that runs entirely in your browser.

Features

• Multi-file editing with tabbed interface and dirty state tracking
• Hierarchical file tree with create, rename, and delete operations
• Syntax highlighting for JavaScript, TypeScript, HTML, CSS, JSON, Markdown, Python, Rust, Go
• Resizable panels that persist layout preferences
• AI chat assistant for code help and explanations
• Project dashboard with search, filters, and quick actions
• Theme support — Light, Dark, and System preference
• Persistent storage using IndexedDB (offline-first)
• Customizable settings — Font, tab size, line numbers, word wrap, auto-save

Tech Stack

Technology	Purpose
React 19	UI framework with concurrent rendering
TypeScript 5.9	Type safety
Vite 7.2	Build tool and dev server
CodeMirror 6	Code editor engine
Tailwind CSS 4	Utility-first styling
Radix UI	Accessible UI primitives
react-resizable-panels	Draggable panel layout
IndexedDB	Local persistence
Tabler Icons + Lucide	Icon sets

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

git clone https://github.com/<!-- TODO: username -->/code-editor-x.git
cd code-editor-x
npm install

Development

npm run dev

Open http://localhost:5173

Build

npm run build    # Type-check and build for production
npm run preview  # Preview production build

Linting & Formatting

npm run lint       # Run ESLint
npm run lint:fix   # Fix linting issues
npm run format     # Format with Prettier

Project Structure

src/
├── components/
│   ├── layout/              # EditorShell (main IDE layout)
│   ├── dashboard-page/      # Project listing and management
│   ├── editor-page/         # Editor-specific components
│   │   ├── ai-chat-panel/   # AI assistant chat interface
│   │   ├── bottom-panel/    # Terminal/output tabs
│   │   ├── editor-panel/    # CodeMirror editor + tabs + status bar
│   │   ├── file-tree/       # Collapsible file/folder tree
│   │   ├── header/          # Top header bar
│   │   └── sidebar/         # Left sidebar with widgets
│   ├── settings-page/       # Settings UI
│   └── ui/                  # Shared UI primitives
├── lib/
│   ├── theme-provider.tsx   # Theme context (light/dark/system)
│   ├── settings-provider.tsx # Editor settings context
│   ├── project-provider.tsx # Project and file management
│   ├── storage/             # IndexedDB persistence layer
│   └── utils.ts             # Utility functions
├── types/
│   └── index.ts             # TypeScript definitions
└── App.tsx                  # Routes and providers

Architecture

Layout

The editor uses react-resizable-panels for a VS Code-like layout:

• Header — Project name, search, command palette
• Left Sidebar — File tree and widget navigation (collapsible)
• Center — Tabs, breadcrumbs, CodeMirror editor, status bar
• Bottom Panel — Output, terminal, problems (collapsible)
• Right Panel — AI chat (collapsible)

State Management

Three React Context providers:

1. ThemeProvider — Light/dark/system theme with localStorage persistence
2. SettingsProvider — Editor settings (font, tabs, auto-save, etc.)
3. ProjectProvider — Projects, files, and file tree operations

Persistence

All data persists locally in IndexedDB. No backend required.

Configuration

Editor Settings

Setting	Options
Theme	Light, Dark, System
Font Family	5 options (monospace fonts)
Font Size	10-24px
Tab Size	2, 4, 8 spaces
Line Numbers	On/Off
Word Wrap	On/Off
Minimap	On/Off
Auto-save	On/Off with delay (500ms - 5s)

Adding Language Support

1. Add to FileLanguage union in src/types/index.ts
2. Import extension from @codemirror/lang-*
3. Add case in getLanguageExtension() in editor-panel.tsx

Scripts

Command	Description
npm run dev	Start dev server
npm run build	Type-check + production build
npm run preview	Preview production build
npm run lint	Run ESLint
npm run lint:fix	Fix linting issues
npm run format	Format with Prettier

License

MIT