1 files changed, 109 insertions, 0 deletions
diff --git a/.demo/EDITOR-README.md b/.demo/EDITOR-README.md
new file mode 100644
index 0000000..9195fe2
--- /dev/null
+++ b/.demo/EDITOR-README.md
@@ -0,0 +1,109 @@
+# Adelie Editor - Standalone Usage
+
+The Adelie Editor is a vim-enabled CodeMirror editor with a retro aesthetic, syntax highlighting, and theme support.
+
+## Quick Start
+
+### 1. Include the files
+
+```html
+<!-- CSS (required for styling) -->
+<link rel="stylesheet" href="https://beta.adelie.liz.coffee/bundle.css" />
+
+<!-- Editor JS -->
+<script src="https://beta.adelie.liz.coffee/adelie-editor.js"></script>
+```
+
+### 2. Add a container element
+
+```html
+<div id="my-editor"></div>
+```
+
+### 3. Initialize the editor
+
+```html
+<script>
+  adelieEditor.init('#my-editor', {
+    language: 'javascript',
+    initialCode: '// Your code here'
+  });
+</script>
+```
+
+## API Reference
+
+### `adelieEditor.init(element, options)`
+
+Initialize an editor in the specified element.
+
+**Parameters:**
+- `element` (string | HTMLElement) - Container element or CSS selector
+- `options` (optional):
+  - `language` ('javascript' | 'css' | 'html') - Programming language (default: 'javascript')
+  - `initialCode` (string) - Initial code content (default: '')
+  - `theme` ('light' | 'dark') - Color theme (default: auto-detected from `data-theme` attribute)
+
+**Returns:** EditorView instance
+
+**Example:**
+```javascript
+const editor = adelieEditor.init('#my-editor', {
+  language: 'css',
+  initialCode: '.my-class { color: red; }'
+});
+```
+
+### Theme Switching
+
+The editor automatically detects theme changes on the `<html>` element:
+
+```javascript
+// Switch to dark mode
+document.documentElement.setAttribute('data-theme', 'dark');
+
+// Switch to light mode
+document.documentElement.removeAttribute('data-theme');
+```
+
+The editor will automatically update its theme when the `data-theme` attribute changes.
+
+## Features
+
+- **Vim Mode**: Full vim keybindings (enabled by default)
+- **Relative Line Numbers**: Vim-style relative numbering
+- **Auto-closing Brackets**: Automatically closes `()`, `{}`, `[]`, `""`, `''`
+- **Whitespace Indicators**: Shows dots for spaces/tabs when text is selected
+- **Syntax Highlighting**: Matches Prism.js colors for consistency
+- **Theme Support**: Light and dark themes with retro styling
+
+## Complete Example
+
+See `example-editor.html` for a working example:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="dist/bundle.css" />
+</head>
+<body>
+    <div id="my-editor"></div>
+
+    <script src="dist/adelie-editor.js"></script>
+    <script>
+        adelieEditor.init('#my-editor', {
+            language: 'javascript',
+            initialCode: 'console.log("Hello World!");'
+        });
+    </script>
+</body>
+</html>
+```
+
+## File Size
+
+- **bundle.css**: ~23 KB (minified)
+- **adelie-editor.js**: ~596 KB (minified, includes CodeMirror + vim mode)
+
+The editor bundle is self-contained and includes all dependencies.