Studio Editor
New in beta.12: track changes, restricted editing, live cursors, page view, Mermaid diagrams, dark theme, crash recovery, offline workspace, AI streaming, a <studio-editor> web component and a lite build.
New: native HTML form, slider and accordion builders with drag ordering and no published widget runtime. Try the UI playground.
New: native HTML form integration with mountStudioEditor, Vue v-model, and external content stylesheet settings. Setup, configurable features and examples: CMS integration guide · Live HTML example.
Also available: opt-in CMS autosave/version history, command feature switches, AI/grammar adapter UI, sandboxed page embeds, responsive preview and inline CSS snapshots. Advanced integration guide · CMS integration lab. Service-backed tools require your own backend adapters.
New: context-aware search, section organization and exportable review reports. Navigation and review guide.
New: calculated table cells, conditional template fields and reusable writing profiles. Usage and limits.
New writing tools: previewed Markdown import/export, personal autocorrection and multiline text shortcuts, plus a configurable permanent pen. Usage and limits.
An open-source rich-text editor and local writing workspace, built with Vue 3.
Website · Live demo · Türkçe belge · Vue component API
Studio combines a standalone writing app with an embeddable Vue component. The editor engine is implemented in this repository using browser editing primitives; it does not wrap TinyMCE, TipTap, ProseMirror or Lexical. It uses libraries including Vue, Pinia, CodeMirror, DOMPurify and Yjs for other parts of the application.
Status: beta. Core editing is covered by Chromium, Firefox and WebKit tests. Collaboration is experimental; see the limitations below before adopting it.
Features
- Rich text, headings, lists, links, colors, alignment and undo/redo.
- Word import, footnotes, anchors and merge fields, plus selection tools, view guides, zoom and detailed word counts.
- Preview galleries for bullet/numbered list styles, numbering properties, line spacing and text direction.
- Grouped menus, keyboard-accessible submenus, command search, special characters, emoji, dates and page breaks. See Menus and lists.
- Math and chemistry: LaTeX equations, chemical reactions and an editable molecule sketcher.
- Task lists, mentions, slash commands, Markdown shortcuts and a live heading outline.
- Multi-cell table selection, merged cells, column resizing, sorting and bulk formatting.
- Word/Docs HTML and Excel/Sheets table paste with keep-formatting, clean and plain-text modes.
- Media library with image cropping, rotation, color adjustments and PNG/JPEG/WebP output.
- Comments, replies, selected-text suggestions, templates and basic accessibility checks.
- Track changes with accept/reject, restricted editing regions and live collaborator cursors.
- Page view, Mermaid diagrams, dark theme and crash recovery.
- HTML source editing, sandboxed previews, HTML/DOCX export and browser PDF printing.
- Local documents, favorites, tags, full-text search, persistent versions and workspace backups.
- Vue
v-model, a form-associated <studio-editor> web component, a lite build, HTML/JSON APIs, configurable toolbars, plugin commands and media adapters.
- Installable offline workspace (PWA) and streamed AI responses through your own adapter.
- English by default, with a persistent English/Türkçe selector and localized built-in templates.
Quick start
Use Node.js 22.12+ or 24+.
git clone https://github.com/metinweb/studio-editor.git
cd studio-editor
npm ci
npm run dev
For a production build:
npm run build
npm run preview
Deploy dist/ to a static HTTP server. Assets use relative paths, so subdirectory hosting works. Use HTTP or HTTPS rather than opening index.html through file://.
Vue component
The source package is under packages/editor. Build it with npm run build:library. Version 0.1.0-beta.12 is published on GitHub Packages as @metinweb/studio-editor (install instructions); it is not yet on npmjs.org, so do not assume a studio-editor package there belongs to this project.
Create a local installable tarball with npm run package:release. See the package API and integration guide and working Vue example for v-model, events, options and adapters. The component's save event must be connected to your own persistence layer.
Languages
The website, standalone workspace and Vue component default to English. Choose Interface language → Türkçe in the workspace sidebar to switch; the preference is saved in this browser. Language changes preserve existing document content and undo history. New documents and built-in templates use the selected language.
The Turkish website and Turkish README remain available. Component integrations can set locale="tr". See localization for translation contributions.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
