@raazkhnl/rk-editor-ui

Drop-in Word-style UI for the web. Toolbar, menubar, modals, find-and-replace, document outline, status bar, dark mode, page layout dialog — and a <rk-word-editor> web component. Built on top of @raazkhnl/rk-editor-core.

The polished default UI for RK Word Editor — a free, fully open-source Microsoft Word / Google Docs alternative for the web. MIT-licensed. No paywall. No telemetry.

Install

npm install @raazkhnl/rk-editor-core @raazkhnl/rk-editor-ui

Quick start (one line, any framework)

import { EditorShell } from '@raazkhnl/rk-editor-ui';
import '@raazkhnl/rk-editor-ui/styles.css';

new EditorShell({
  container: document.getElementById('app')!,
  initialContent: '',
  placeholder: 'Start typing here…',
  outline: true,
  theme: 'light',           // 'light' | 'dark' | 'auto'
});

That gives you:

• ✅ A4 / Letter / Legal / A3 / A5 / Tabloid page surface
• ✅ Word-style menubar (File / Edit / Insert / Format / View / Help)
• ✅ Two-row formatting toolbar with all the SVG icons
• ✅ Dark mode toggle (auto from system preference)
• ✅ Find & replace (Ctrl/⌘+F, Ctrl/⌘+H) — draggable popup, regex / whole-word / case
• ✅ Document outline sidebar with click-to-jump
• ✅ Status bar with page count, word count, reading time, zoom (Ctrl/⌘++/-/0)
• ✅ Themed dialogs for table, image, link, math, footnote, citation, page layout
• ✅ Insert: image, table, draggable text box, math, footnote, citation, table of contents, page break

As a Web Component

<script type="module" src="https://unpkg.com/@raazkhnl/rk-editor-ui"></script>
<link rel="stylesheet" href="https://unpkg.com/@raazkhnl/rk-editor-ui/dist/style.css" />

<rk-word-editor placeholder="Type here…" theme="auto" outline></rk-word-editor>

React example

import { useEffect, useRef } from 'react';
import { EditorShell } from '@raazkhnl/rk-editor-ui';
import '@raazkhnl/rk-editor-ui/styles.css';

export default function MyEditor() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!ref.current) return;
    const shell = new EditorShell({ container: ref.current, initialContent: '<p>Hello!</p>' });
    return () => shell.destroy();
  }, []);
  return <div ref={ref} style={{ height: '100vh' }} />;
}

(Vue, Svelte, Angular and Next.js patterns are in the main README.)

Theming

Override CSS variables on .rk-word-editor:

.rk-word-editor {
  --rk-primary: #6d28d9;
  --rk-primary-hover: #5b21b6;
  --rk-radius: 8px;
}
.rk-word-editor[data-rk-theme='dark'] {
  --rk-bg: #18181b;
  --rk-surface: #27272a;
}

Exports

• EditorShell — bundled editor + toolbar in one constructor (recommended)
• WordToolbar — toolbar/menubar standalone
• Modal, FindReplaceBar, StatusBar, Outline — individual building blocks
• Icons, icon(name) — the SVG icon set used internally
• Dialog helpers: showLinkDialog, showImageDialog, showTableDialog, showMathDialog, showFootnoteDialog, showCitationDialog, showPageLayoutDialog, showShortcutsDialog, showAboutDialog
• <rk-word-editor> custom element (auto-registered on import)

Documentation

Full docs, recipes & API reference on GitHub →

License

MIT © RaaZ Khanal