prosekit · ocavue · Jan 14, 2026 · Jan 14, 2026 · Jan 14, 2026 · Jan 14, 2026
diff --git a/.scripts/fetch-examples.ts b/.scripts/fetch-examples.ts
@@ -66,6 +66,36 @@ export default function Editor() {
   return <EditorLazy />
 }
 `
+
+const litEntry = (
+  story: string,
+) => `import { registerLitEditor } from './components/editor/examples/${story}'
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+registerLitEditor()
+
+@customElement('my-editor')
+export class MyEditor extends LitElement {
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    return html\`<lit-editor-example-${story}></lit-editor-example-${story}>\`
+  }
+}
+`
+
+const vanillaEntry = (
+  story: string,
+) => `import { setupVanillaEditor } from './components/editor/examples/${story}'
+
+export function renderEditor() {
+  return setupVanillaEditor().render()
+}
+`
+
 const createSvelteEntry =
   (componentsPath: string) => (story: string) => `<script lang=\"ts\">
 import { ExampleEditor } from '${componentsPath}/${story}'
@@ -119,6 +149,18 @@ const FRAMEWORK_CONFIG = {
     entryFile: 'src/App.vue',
     createEntryContent: vueEntry,
   },
+  lit: {
+    template: 'lit',
+    destDir: 'src',
+    entryFile: 'src/editor.ts',
+    createEntryContent: litEntry,
+  },
+  vanilla: {
+    template: 'vanilla',
+    destDir: 'src',
+    entryFile: 'src/editor.ts',
+    createEntryContent: vanillaEntry,
+  },
   next: {
     template: 'next',
     destDir: '.',

diff --git a/.templates/template-lit/src/app.ts b/.templates/template-lit/src/app.ts
@@ -6,6 +6,10 @@ import { customElement } from 'lit/decorators.js'
 
 @customElement('my-app')
 export class MyApp extends LitElement {
+  createRenderRoot() {
+    return this
+  }
+
   render() {
     return html`
       <my-editor></my-editor>

diff --git a/.templates/template-lit/src/editor.ts b/.templates/template-lit/src/editor.ts
@@ -3,6 +3,10 @@ import { customElement } from 'lit/decorators.js'
 
 @customElement('my-editor')
 export class MyEditor extends LitElement {
+  createRenderRoot() {
+    return this
+  }
+
   render() {
     return html`
       <div></div>

diff --git a/.templates/template-vanilla/index.html b/.templates/template-vanilla/index.html
@@ -3,10 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ProseKit + Vanilla JS</title>
+    <title>ProseKit + Vanilla TypeScript</title>
   </head>
   <body>
-    <main></main>
-    <script type="module" src="/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/.templates/template-vanilla/main.js b/.templates/template-vanilla/main.js
diff --git a/.templates/template-vanilla/package.json b/.templates/template-vanilla/package.json
@@ -16,6 +16,7 @@
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
     "vite": "7.3.1"
   }
 }
diff --git a/.templates/template-vanilla/src/editor.ts b/.templates/template-vanilla/src/editor.ts
@@ -0,0 +1,3 @@
+export function renderEditor() {
+  return document.createElement('div')
+}
diff --git a/.templates/template-vanilla/src/index.js b/.templates/template-vanilla/src/index.js
diff --git a/.templates/template-vanilla/src/main.ts b/.templates/template-vanilla/src/main.ts
@@ -0,0 +1,11 @@
+import './app.css'
+import { renderEditor } from './editor'
+
+let container = document.querySelector('#app')
+if (!container) {
+  container = document.createElement('div')
+  container.id = 'app'
+  document.body.appendChild(container)
+}
+
+container.replaceChildren(renderEditor())
diff --git a/.templates/template-vanilla/tsconfig.json b/.templates/template-vanilla/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/lit-minimal/.gitignore b/lit-minimal/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.next
+.svelte-kit
diff --git a/lit-minimal/README.md b/lit-minimal/README.md
@@ -0,0 +1,15 @@
+# lit-minimal
+
+A [ProseKit](https://prosekit.dev) example.
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/prosekit/examples/tree/master/lit-minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/prosekit/examples/tree/master/lit-minimal)
+
+Run the example locally with:
+
+```bash
+npx degit prosekit/examples/lit-minimal lit-minimal
+cd lit-minimal
+npm install
+npm run dev
+```
diff --git a/lit-minimal/index.html b/lit-minimal/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ProseKit + Lit</title>
+    <script type="module" src="/src/app.ts"></script>
+  </head>
+
+  <body>
+    <my-app></my-app>
+  </body>
+</html>
diff --git a/lit-minimal/package.json b/lit-minimal/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "example-lit-minimal",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lit": "^3.3.2",
+    "prosekit": "^0.17.1"
+  },
+  "devDependencies": {
+    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@iconify-json/lucide": "^1.2.84",
+    "@tailwindcss/vite": "^4.1.18",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "5.9.3",
+    "vite": "7.3.1"
+  }
+}
diff --git a/lit-minimal/src/app.css b/lit-minimal/src/app.css
@@ -0,0 +1,13 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@plugin "@egoist/tailwindcss-icons";
+
+body {
+  height: 100svh;
+  display: grid;
+  max-width: 900px;
+  padding: 16px;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/lit-minimal/src/app.ts b/lit-minimal/src/app.ts
@@ -0,0 +1,18 @@
+import './app.css'
+import './editor'
+
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('my-app')
+export class MyApp extends LitElement {
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    return html`
+      <my-editor></my-editor>
+    `
+  }
+}
diff --git a/lit-minimal/src/components/editor/examples/minimal/editor.ts b/lit-minimal/src/components/editor/examples/minimal/editor.ts
@@ -0,0 +1,59 @@
+import 'prosekit/basic/style.css'
+import 'prosekit/basic/typography.css'
+
+import {
+  html,
+  LitElement,
+  type PropertyDeclaration,
+  type PropertyValues,
+} from 'lit'
+import { createRef, ref, type Ref } from 'lit/directives/ref.js'
+import { defineBasicExtension } from 'prosekit/basic'
+import type { Editor } from 'prosekit/core'
+import { createEditor } from 'prosekit/core'
+
+export class LitEditor extends LitElement {
+  static override properties = {
+    editor: {
+      state: true,
+      attribute: false,
+    } satisfies PropertyDeclaration<Editor>,
+  }
+
+  private editor: Editor
+  private ref: Ref<HTMLDivElement>
+
+  constructor() {
+    super()
+
+    const extension = defineBasicExtension()
+    this.editor = createEditor({ extension })
+    this.ref = createRef<HTMLDivElement>()
+  }
+
+  override createRenderRoot() {
+    return this
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties)
+    this.editor.mount(this.ref.value)
+  }
+
+  override render() {
+    return html`
+      <div class="outline-solid p-4" ${ref(this.ref)}></div>
+    `
+  }
+}
+
+export function registerLitEditor() {
+  if (customElements.get('lit-editor-example-minimal')) return
+  customElements.define('lit-editor-example-minimal', LitEditor)
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lit-editor-example-minimal': LitEditor
+  }
+}
diff --git a/lit-minimal/src/components/editor/examples/minimal/index.ts b/lit-minimal/src/components/editor/examples/minimal/index.ts
@@ -0,0 +1 @@
+export { LitEditor as ExampleEditor, registerLitEditor } from './editor'
diff --git a/lit-minimal/src/editor.ts b/lit-minimal/src/editor.ts
@@ -0,0 +1,18 @@
+import { registerLitEditor } from './components/editor/examples/minimal'
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+registerLitEditor()
+
+@customElement('my-editor')
+export class MyEditor extends LitElement {
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    return html`
+      <lit-editor-example-minimal></lit-editor-example-minimal>
+    `
+  }
+}
diff --git a/lit-minimal/tsconfig.json b/lit-minimal/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/lit-minimal/vite.config.ts b/lit-minimal/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [tailwindcss()],
+})
diff --git a/lit-slash-menu/.gitignore b/lit-slash-menu/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.next
+.svelte-kit
diff --git a/lit-slash-menu/README.md b/lit-slash-menu/README.md
@@ -0,0 +1,15 @@
+# lit-slash-menu
+
+A [ProseKit](https://prosekit.dev) example.
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/prosekit/examples/tree/master/lit-slash-menu)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/prosekit/examples/tree/master/lit-slash-menu)
+
+Run the example locally with:
+
+```bash
+npx degit prosekit/examples/lit-slash-menu lit-slash-menu
+cd lit-slash-menu
+npm install
+npm run dev
+```
diff --git a/lit-slash-menu/index.html b/lit-slash-menu/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ProseKit + Lit</title>
+    <script type="module" src="/src/app.ts"></script>
+  </head>
+
+  <body>
+    <my-app></my-app>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { LitEditor as ExampleEditor, registerLitEditor } from './editor'