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.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗