Logo Neiki's Code Editor

A lightweight embeddable code editor Web Component. No frameworks, no build tools, just one script tag.

1. JavaScript — Dark Theme

The default editor with syntax highlighting, line numbers, and auto-closing brackets.

// A simple JavaScript example async function fetchUserData(userId) { const API_URL = `https://api.example.com/users/${userId}`; try { const response = await fetch(API_URL, { method: 'GET', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + getToken() } }); if (!response.ok) { throw new Error(`HTTP ${response.status}`); } const data = await response.json(); console.log('User:', data.name); return data; } catch (error) { console.error('Failed to fetch user:', error.message); return null; } } // Arrow function with array methods const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const evenSquares = numbers .filter(n => n % 2 === 0) .map(n => n ** 2); console.log(evenSquares); // [4, 16, 36, 64, 100]

API Demo

Interact with the editor programmatically using getValue(), setValue(), focus().

Click a button above...

2. HTML — Light Theme

HTML syntax highlighting with the light Catppuccin Latte theme.

My Page

Welcome

This is a demo page.

Feature 1

Fast

Blazing fast performance.

3. CSS — Dark Theme

/* Modern CSS with custom properties */ :root { --primary: #6c5ce7; --surface: #1e1e2e; --text: #cdd6f4; --radius: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: var(--surface); color: var(--text); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; } .card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); padding: 1.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } @media (max-width: 768px) { .container { padding: 1rem; } .card { padding: 1rem; } }

4. JSON — Dark Theme (with Format button)

{"name":"neiki-code-editor","version":"1.0.0","description":"A lightweight embeddable code editor","keywords":["editor","code","web-component","syntax-highlighting"],"author":{"name":"Neiki","url":"https://example.com"},"features":["syntax-highlighting","line-numbers","themes","search","minimap","fullscreen"],"languages":["javascript","html","css","json","markdown"],"config":{"tabSize":2,"autoCloseBrackets":true,"lineNumbers":true}}

5. Markdown — Light Theme

# Neiki's Code Editor A **lightweight** embeddable code editor built as a Web Component. ## Features - *Syntax highlighting* for multiple languages - Line numbers with active line indicator - Dark and light themes - Search functionality (`Ctrl+F`) - Auto-closing brackets - Tab indentation ## Quick Start ```html ``` Then use it in your HTML: ```html console.log("Hello world"); ``` ## API | Method | Description | |--------|-------------| | `getValue()` | Returns current code | | `setValue(v)` | Sets the code | | `focus()` | Focuses the editor | | `format()` | Formats JSON content | > Built with love, zero dependencies. [View on GitHub](https://github.com/example/neiki-code-editor)

6. Readonly Mode

The editor is not editable — useful for code snippets and documentation.

// This editor is readonly — you can't edit this code const greeting = "Hello from Neiki's Code Editor!"; console.log(greeting);

7. Programmatic Creation

Created via window.NeikiCodeEditor.create():