Namibia — web‑native code editor

A modern, framework‑friendly, web‑native code editor built as a Custom Element. Starts simple, grows as you need.

Features (initial)

• Web Component (<namibia-editor>) with Shadow DOM
• Contenteditable surface + line numbers
• Value property and change event
• Vite library build + demo playground
• Theming via CSS variables, Shadow Parts, and presets

Install

npm i namibia-code-editor

Usage (Vanilla)

<script type="module">
  import { defineNamibiaEditor } from 'namibia-code-editor';
  defineNamibiaEditor();
</script>

<namibia-editor value="// hello"></namibia-editor>

Usage (React)

A lightweight React wrapper will be included. For now, use the Custom Element directly:

import { useEffect, useRef } from 'react';
import { defineNamibiaEditor } from 'namibia-code-editor';

defineNamibiaEditor();

export default function App() {
  const ref = useRef<any>(null);
  useEffect(() => {
    const el = ref.current!;
    const onChange = (e: CustomEvent) => console.log('value', el.value);
    el.addEventListener('change', onChange as any);
    return () => el.removeEventListener('change', onChange as any);
  }, []);
  return <namibia-editor ref={ref} value={`function x() {}`}></namibia-editor>;
}

Dev

• npm run dev — playground at /demo
• npm run test — unit tests
• npm run build — library build in dist/

Docs

• See docs/ for in-depth guides.
• Theming reference and presets: docs/theming.md.

Extensions (plugins)

Register an extension once at app startup. It activates per editor instance and gets a context to register commands, keybindings, and language features.

import { registerExtension } from 'namibia-code-editor';

registerExtension('sample.hello', (ctx) => {
  ctx.registerCommand('hello.say', () => console.log('Hello from Namibia!'));
  ctx.registerKeybinding({ key: 'k', ctrl: true, command: 'hello.say' });
});

Language features

Provide completions and hover for a language:

import { registerCompletionProvider, registerHoverProvider } from 'namibia-code-editor';

registerCompletionProvider('json', {
  provideCompletions(text, offset) {
    return [{ label: '"name"' }, { label: '"version"' }];
  }
});

registerHoverProvider('json', {
  provideHover(text, offset) {
    return 'JSON document';
  }
});

License

MIT