A high-performance, WYSIWYG markdown editor built with Qwik.

• Block-based editing: Content organized as sequential blocks (paragraphs, headings).
• Inline Formatting: Support for Bold, Italic, and Links with a floating toolbar.
• Keyboard Shortcuts: Common shortcuts like Ctrl+B (Bold) and Ctrl+I (Italic).
• Markdown-first: Bidirectional conversion between editor state and CommonMark.
• High performance: Fine-grained reactivity ensures fast keystroke response even with many blocks.
• SSR-friendly: Built for Qwik's resumability and server-side rendering.

import { component$, useSignal } from "@builder.io/qwik";
import { Editor } from "qwik-editor";

export default component$(() => {
  const markdown = useSignal("# Hello Editor\n\nStart typing here...");

  return (
    <Editor
      initialMarkdown={markdown.value}
      onChange$={(md) => {
        markdown.value = md;
      }}
      placeholder="Write something..."
    />
  );
});

• Framework: Qwik
• Language: TypeScript (Strict Mode)
• Tooling:
  • Oxlint: Rust-based high-performance linting.
  • Oxfmt: Rust-based high-performance formatting.
  • Vite: Build tool and development server.

├── src/
│   ├── components/  # Editor and block components
│   ├── models/      # Data structures (EditorDocument, Block)
│   ├── services/    # Markdown parsing and serialization
│   └── index.ts     # Library entry point

pnpm install

Runs Vite's development server with SSR enabled.

pnpm dev

Generates the library in ./lib and TypeScript definitions in ./lib-types.

pnpm build

MIT