@editora/light-code-editor
Advanced tools
Lightweight, extensible code editor for the web — syntax highlighting, line numbers, code folding, and a plugin-friendly API. Ideal for embedding in docs, demos, and web apps.
A lightweight, modular code editor library inspired by CodeMirror, optimized for embedding inside rich text editors.
✅ Self-Contained Library - Everything needed (including CSS) is bundled within the library ✅ Modular Architecture - Extension-based system for maximum flexibility ✅ Syntax Highlighting - HTML syntax highlighting with VS Code-style colors ✅ Themes - Light and dark theme support ✅ Line Numbers - Optional line number gutter ✅ Search - Find and highlight functionality ✅ Bracket Matching - Automatic bracket pair highlighting ✅ Code Folding - Collapse/expand code sections ✅ Read-Only Mode - Prevent text modifications ✅ TypeScript Support - Full TypeScript definitions ✅ Zero Dependencies - Pure JavaScript implementation
npm install @editora/light-code-editor
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/@editora/light-code-editor/dist/light-code-editor.css">
</head>
<body>
<div id="editor"></div>
<script type="module">
import { createEditor, LineNumbersExtension, SyntaxHighlightingExtension } from '@editora/light-code-editor';
const editor = createEditor(document.getElementById('editor'), {
value: '<div class="hello">Hello World</div>',
theme: 'dark',
extensions: [
new LineNumbersExtension(),
new SyntaxHighlightingExtension()
]
});
// Get current content
console.log(editor.getValue());
// Listen for changes
editor.on('change', (changes) => {
console.log('Content changed:', changes);
});
</script>
</body>
</html>
createEditor(container, config)Factory function to create a new editor instance.
container: HTMLElement - The DOM element to attach the editor toconfig: EditorConfig - Configuration optionsinterface EditorConfig {
value?: string; // Initial content
theme?: 'light' | 'dark'; // Theme
readOnly?: boolean; // Read-only mode
extensions?: EditorExtension[]; // Extensions to load
keymap?: Record<string, string>; // Custom key bindings
}
interface EditorAPI {
// Content
getValue(): string;
setValue(value: string): void;
// Focus & Selection
focus(): void;
hasFocus(): boolean;
// Theme & Appearance
setTheme(theme: 'light' | 'dark'): void;
// Read-only mode
setReadOnly(readOnly: boolean): void;
// Extensions
registerCommand(name: string, handler: Function): void;
// Events
on(event: string, handler: Function): void;
off(event: string, handler: Function): void;
}
LineNumbersExtensionAdds line numbers to the left gutter.
import { LineNumbersExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new LineNumbersExtension()]
});
SyntaxHighlightingExtensionProvides HTML syntax highlighting.
import { SyntaxHighlightingExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new SyntaxHighlightingExtension()]
});
ThemeExtensionEnables theme switching.
import { ThemeExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new ThemeExtension()]
});
ReadOnlyExtensionAdds read-only mode functionality.
import { ReadOnlyExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new ReadOnlyExtension()]
});
SearchExtensionProvides search and replace functionality.
import { SearchExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [
new SearchExtension({
// Replace mode defaults to true and advances to the next match
// after each Enter press in the replace field.
replaceAndFindNext: true
})
]
});
Advanced find/replace UI supports:
Aa for case-sensitive searchWhole for whole-word-only matching.* for regular-expression searchIf regex input is invalid, the status shows Invalid regular expression and matching is skipped until the pattern is fixed.
BracketMatchingExtensionHighlights matching brackets.
import { BracketMatchingExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new BracketMatchingExtension()]
});
CodeFoldingExtensionEnables code folding functionality.
import { CodeFoldingExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new CodeFoldingExtension()]
});
Create your own extensions by implementing the EditorExtension interface:
import { EditorExtension, EditorAPI } from '@editora/light-code-editor';
class MyExtension implements EditorExtension {
public readonly name = 'my-extension';
setup(editor: EditorAPI): void {
// Initialize your extension
editor.registerCommand('my-command', () => {
console.log('My command executed!');
});
}
destroy(): void {
// Cleanup
}
}
The library includes its own CSS file that provides complete styling. Include it in your HTML:
<link rel="stylesheet" href="dist/light-code-editor.css">
.rte-light-editor - Main editor container.rte-light-editor-content - Textarea element.rte-light-editor-gutter - Line numbers gutter.rte-syntax-highlight-overlay - Syntax highlighting overlay.rte-light-editor.dark - Dark theme.rte-light-editor.light - Light themeThe editor follows a modular, extension-first architecture:
EditorCore
├── TextModel (content management)
├── View (DOM rendering)
├── Extension Registry
├── Command System
└── Event System
This library follows the CodeMirror architecture principles and is designed to be maintainable and extensible. When adding features:
MIT License - see LICENSE file for details.
Ajay Kumar ajaykr089@gmail.com
FAQs
Lightweight code editor for React and web apps with syntax highlighting, search/replace, extensions, and enterprise SaaS integration patterns.
The npm package @editora/light-code-editor receives a total of 38 weekly downloads. As such, @editora/light-code-editor popularity was classified as not popular.
We found that @editora/light-code-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Newer packages in this compromise use native extensions and .pth loaders to execute JavaScript stealers in developer environments.
Research
Socket found 37 malicious PyPI wheels that abuse Python startup hooks to launch a Bun-powered credential stealer tied to Mini Shai-Hulud/Miasma.
Security News
RubyGems and Bundler 4.0.13 introduced an opt-in cooldown feature that delays newly published gems during dependency resolution.