Security News
RubyGems Adds Cooldown Feature to Bundler for Newly Published Gems
RubyGems and Bundler 4.0.13 introduced an opt-in cooldown feature that delays newly published gems during dependency resolution.
By Sarah Gooding - Jun 05, 2026
Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
@editora/light-code-editor
Advanced tools
@editora/light-code-editor
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.
Light Code Editor
A lightweight, modular code editor library inspired by CodeMirror, optimized for embedding inside rich text editors.
Features
✅ 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
Installation
npm install @editora/light-code-editor
Quick Start
<!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>
API
createEditor(container, config)
Factory function to create a new editor instance.
Parameters
container: HTMLElement - The DOM element to attach the editor toconfig: EditorConfig - Configuration options
EditorConfig
interface 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
}
Editor Methods
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;
}
Extensions
Core Extensions
LineNumbersExtension
Adds line numbers to the left gutter.
import { LineNumbersExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new LineNumbersExtension()]
});
SyntaxHighlightingExtension
Provides HTML syntax highlighting.
import { SyntaxHighlightingExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new SyntaxHighlightingExtension()]
});
ThemeExtension
Enables theme switching.
import { ThemeExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new ThemeExtension()]
});
ReadOnlyExtension
Adds read-only mode functionality.
import { ReadOnlyExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new ReadOnlyExtension()]
});
SearchExtension
Provides 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:
Aafor case-sensitive searchWholefor whole-word-only matching.*for regular-expression search
If regex input is invalid, the status shows Invalid regular expression and matching is skipped until the pattern is fixed.
BracketMatchingExtension
Highlights matching brackets.
import { BracketMatchingExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new BracketMatchingExtension()]
});
CodeFoldingExtension
Enables code folding functionality.
import { CodeFoldingExtension } from '@editora/light-code-editor';
const editor = createEditor(container, {
extensions: [new CodeFoldingExtension()]
});
Custom Extensions
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
}
}
Styling
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">
CSS Classes
.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 theme
Architecture
The editor follows a modular, extension-first architecture:
EditorCore
├── TextModel (content management)
├── View (DOM rendering)
├── Extension Registry
├── Command System
└── Event System
Design Principles
- Self-Contained - Everything needed is included
- Extension-First - All features are extensions
- Zero Dependencies - Pure JavaScript
- Type-Safe - Full TypeScript support
- Performant - Optimized for large documents
Browser Support
- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
Contributing
This library follows the CodeMirror architecture principles and is designed to be maintainable and extensible. When adding features:
- Implement as extensions, not core modifications
- Maintain TypeScript types
- Include comprehensive tests
- Update documentation
License
MIT License - see LICENSE file for details.
Author
Ajay Kumar ajaykr089@gmail.com
Keywords
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.
Package last updated on 02 Mar 2026
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.
Related posts
Security News
pnpm 11.5 Adds Support for Recognizing npm Staged Publishes
pnpm 11.5 now recognizes npm staged publish approvals in release metadata, preventing those releases from being mistaken for lower-trust package publishes.
By Sarah Gooding - Jun 04, 2026
Security News
Federal Audit Finds NIST Wasted Funds With No Plan to Clear NVD Backlog
Federal audit finds NIST lacked a plan to clear the NVD backlog, wasted funds on duplicate work, and delayed use of CISA data.
By Sarah Gooding - Jun 03, 2026