A Notion-like block editor, built as a framework-agnostic core with adapters
for Vue 3 and React. Two editing styles come built in — a classic
sticky format toolbar, or a Notion-like floating bubble toolbar with a
/ slash-command menu — switchable with a single prop.
paragraphs · headings · bulleted & numbered lists · to-dos · toggles
quotes · callouts · code (with syntax highlighting) · dividers · buttons
images · video · audio · file attachments · tables
undo/redo · markdown shortcuts · multi-block selection · rich clipboard
light & dark themes · RTL · read-only document renderer
| Package | Description |
|---|---|
@xproeditor/core |
Framework-agnostic engine: block model, selection, clipboard, HTML/table ops |
@xproeditor/vue |
Vue 3 components |
@xproeditor/react |
React components |
No Tailwind/Radix/shadcn dependency leaks into your app — each adapter ships its own precompiled stylesheet, themeable via CSS variables.
Vue
npm install @xproeditor/vue<script setup lang="ts">
import { ProEditor, createBlock } from '@xproeditor/vue'
import '@xproeditor/vue/style.css'
const blocks = ref([createBlock('paragraph', { content: [{ text: 'Hello!' }] })])
</script>
<template>
<ProEditor :model-value="blocks" toolbar="floating" />
</template>React
npm install @xproeditor/reactimport { ProEditor, createBlock } from '@xproeditor/react'
import '@xproeditor/react/style.css'
const initialBlocks = [createBlock('paragraph', { content: [{ text: 'Hello!' }] })]
export default () => <ProEditor defaultValue={initialBlocks} toolbar="floating" />See each package's README for the full API, and examples/ for
runnable demo apps (toggle between fixed-toolbar and Notion-like modes).
xproeditor/
├── packages/
│ ├── core/ @xproeditor/core — block model, ops, selection, clipboard, table, html (pure TS)
│ ├── vue/ @xproeditor/vue — Vue 3 adapter
│ └── react/ @xproeditor/react — React adapter
├── examples/
│ ├── vue-demo/ runnable Vite + Vue demo
│ └── react-demo/ runnable Vite + React demo
├── site/ marketing/docs page with a live embedded demo, deployed to GitHub Pages
└── docs/ architecture, theming, block model, releasing
The Vue and React adapters share zero UI code but implement the same
behavior on top of @xproeditor/core — see docs/architecture.md
for why, and what a future Svelte (or other) adapter would need.
- Getting started
- Block model — the persisted JSON shape
- Theming
- Architecture
- Releasing
npm install
npm run build # builds core → vue → react in order
npm run dev:vue # run the Vue demo
npm run dev:react # run the React demo
npm run dev:site # run the landing page / live demo site
npm testPublishing to npm is automated (Changesets bot opens a "Version Packages" PR;
merging it publishes) — see docs/releasing.md. The
site/ page redeploys to GitHub Pages automatically on every push to
main.
MIT © XofDev