Skip to main content

​
Quickstart Guide

This guide will walk you through running Code Editor Thing for the first time, opening a project, editing files, and customizing your theme.
Make sure you’ve completed the installation steps before continuing.

​
Running the Application

1

Start Development Mode

From your project directory, run:
npm run electron:dev
This command does three things:
  1. Builds the Electron main process (electron/main.ts → dist-electron/main.cjs)
  2. Starts the Vite development server on http://localhost:5173
  3. Launches the Electron window
The first launch may take a few seconds while Vite optimizes dependencies.
You should see a window appear with the Code Editor Thing interface.
2

Verify Electron is Running

If you see this message in the window:
Please run this app in Electron to use all features.
The app detected it’s not running in Electron. Make sure you used npm run electron:dev instead of npm run dev.

​
Opening Your First Folder

1

Open the Folder Dialog

Use either method to open a folder:Method 1: Menu Bar
  • Click File → Open Folder
Method 2: Keyboard Shortcut
  • Press Cmd+O (macOS) or Ctrl+O (Windows/Linux)
A native file picker dialog will appear.
2

Select a Folder

Navigate to any folder containing code files and click Open.
Try opening the Code Editor Thing project itself to explore the source code!
The sidebar will populate with your folder structure. Hidden files (starting with .) are automatically filtered out.

​
Editing Files

Once you have a folder open, you can start editing files:
1

Open a File

In the sidebar, click on any file to open it. For example, click package.json.The file will:
  • Open in a new tab at the top of the editor
  • Display with syntax highlighting based on the file extension
  • Show line numbers and code folding
{
  "name": "code-editor-thing",
  "version": "1.0.0",
  "private": true,
  "main": "dist-electron/main.cjs"
}
2

Make Changes

Click in the editor and start typing. The editor supports:
  • Syntax highlighting for JavaScript, TypeScript, Python, Rust, C++, HTML, CSS, JSON, and Markdown
  • Autocomplete with Ctrl+Space
  • Multiple cursors with Cmd+Click
  • Undo/Redo with Cmd+Z / Cmd+Shift+Z
Modified files show a dot indicator in their tab to indicate unsaved changes.
3

Save Your Changes

Save the file using:Keyboard Shortcut (Recommended)
Cmd+S (macOS) or Ctrl+S (Windows/Linux)
The code that handles saving is in src/App.tsx:10-18:
useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if ((e.ctrlKey || e.metaKey) && e.key === "s") {
      e.preventDefault();
      handleSave();
    }
  };
  window.addEventListener("keydown", handleKeyDown);
  return () => window.removeEventListener("keydown", handleKeyDown);
}, [handleSave]);
The dot indicator disappears once the file is saved.
4

Work with Multiple Files

Open multiple files to work with tabs:
  1. Click another file in the sidebar (e.g., README.md)
  2. Switch between tabs by clicking them
  3. Close tabs by clicking the × button
Active tabs are highlighted, and you can have as many files open as you need.

​
Changing Themes

Code Editor Thing includes 9 beautiful themes: 
Light - Classic VS Code light theme
GitHub Light - GitHub's light theme
1

Open Theme Selector

Look for the paintbrush icon in the bottom-left info bar. Click the dropdown next to it.
2

Select a Theme

Choose from the 9 available themes:
  • Light - White background, classic syntax colors
  • Dark - Dark gray background, VS Code colors
  • GitHub Dark - True black background, GitHub colors
  • GitHub Light - Clean white with GitHub palette
  • Dracula - Purple and pink accents on dark
  • Monokai - Iconic green and yellow on dark
  • Nord - Cool blue and teal tones
  • One Dark Pro - Balanced pastels on dark
  • Tokyo Night - Vibrant blues and purples
The theme selector is implemented in src/components/theme-selector.tsx:5-23.
3

Instant Theme Switch

The entire UI updates immediately:
  • Editor background and text colors change
  • Sidebar adapts to the theme
  • Syntax highlighting updates with theme-specific colors
  • Status bar changes accent color
  • Tab backgrounds match the theme
Each theme has carefully matched colors defined in src/lib/themes.ts covering editor, sidebar, syntax highlighting, and UI elements.

​
Using Keyboard Shortcuts

Boost your productivity with these built-in shortcuts:
ShortcutActionPlatform
Cmd/Ctrl+OOpen folderAll
Cmd/Ctrl+SSave current fileAll
Cmd+BToggle sidebarmacOS
Cmd+Shift+TToggle terminalmacOS
The keyboard shortcuts are registered in electron/main.ts:39-45 using Electron’s global shortcuts API.

​
Real-World Workflow Example

Here’s a complete workflow from start to finish:
1

Launch & Open Project

npm run electron:dev
Press Cmd+O and select your project folder.
2

Browse Files

Use the sidebar to navigate. Click on src/App.tsx to open it.
3

Edit Code

Make changes to the file:
// Before
<h1 className="text-2xl mb-4">Code Editor</h1>

// After
<h1 className="text-2xl mb-4">My Custom Editor</h1>
4

Save & View

Press Cmd+S to save. Since you’re running in development mode, Vite will hot-reload your changes instantly!
5

Customize Appearance

Switch to the Tokyo Night theme for a vibrant blue color scheme, or Dracula for purple accents.
6

Open Multiple Files

Open package.json, README.md, and tsconfig.json to compare them side-by-side using tabs.

​
Understanding the Architecture

As you use Code Editor Thing, here’s what’s happening under the hood:

​
File Operations

When you open or save files, the React frontend communicates with Electron’s main process: 
// Reading a file (src/lib/editor-context.tsx:72)
const content = await window.electronAPI.readFile(item.path);

// Saving a file (src/lib/editor-context.tsx:102)
window.electronAPI.saveFile(activeFilePath, file.content);
The Electron main process handles actual file system operations in electron/main.ts:123-138: 
ipcMain.handle('read-file', async (_event, filePath: string) => {
  try {
    return fs.readFileSync(filePath, 'utf-8');
  } catch {
    return '';
  }
});

ipcMain.handle('save-file', async (_event, filePath: string, content: string) => {
  try {
    fs.writeFileSync(filePath, content, 'utf-8');
    return true;
  } catch {
    return false;
  }
});

​
Syntax Highlighting

CodeMirror 6 provides syntax highlighting using language extensions imported in src/components/Editor.tsx:1:
  • JavaScript/TypeScript: @codemirror/lang-javascript
  • Python: @codemirror/lang-python
  • Rust: @codemirror/lang-rust
  • C++: @codemirror/lang-cpp
  • HTML: @codemirror/lang-html
  • CSS: @codemirror/lang-css
  • JSON: @codemirror/lang-json
  • Markdown: @codemirror/lang-markdown

​
Next Steps

Explore Themes

Try all 9 themes and find your favorite. Each theme has unique syntax colors!

Customize the Code

Code Editor Thing is open source. Modify src/lib/themes.ts to create your own theme.

Build for Production

Ready to distribute? Run npm run electron:build to create a distributable app.

Extend Functionality

Add new features by exploring the React components in src/components/.
The entire source code is well-structured and commented. Start in src/App.tsx to understand the component hierarchy!

Build docs developers (and LLMs) love

Get started for freeTalk to us