CyteEditor Examples

Official integration examples for CyteEditor — the full-featured, full-framework rich text editor SDK.
Website · Live Demo · Documentation · Pricing

---

What is CyteEditor?

CyteEditor is a professional-grade rich text editor SDK that solves the hardest problems in document editing:

• Office-grade paste fidelity — Word, Excel, WPS, Google Docs content preserves fonts, colors, tables, images, and document structure
• 6 official framework adapters — Vue 3, Vue 2, React, Svelte, Angular, and Vanilla JS (not community wrappers)
• Built-in snapshot & version compare — block-level diff with scroll-synced two-column view
• Document import/export — Word (.docx), Markdown, HTML file I/O
• Dual-format delivery — ESM for modern bundlers + IIFE for legacy pages

Try it now — no signup required

---

Examples in This Repo

Each example is a minimal, runnable project you can clone and start immediately.

Example	Framework	Description
vue3-basic/	Vue 3	Basic editor integration with v-model binding
vue2-basic/	Vue 2	Options API integration with event binding
react-basic/	React	Functional component with useState hook
svelte-basic/	Svelte	Svelte component with reactive binding
angular-basic/	Angular	Standalone component with ngModel
vanilla-basic/	Vanilla JS	No framework, no build tool — just HTML + JS

---

Quick Start

Pick your framework and run:

# Vue 3
cd vue3-basic && npm install && npm run dev

# Vue 2
cd vue2-basic && npm install && npm run dev

# React
cd react-basic && npm install && npm run dev

# Svelte
cd svelte-basic && npm install && npm run dev

# Angular
cd angular-basic && npm install && npm run dev

# Vanilla JS — open index.html in browser (or use any static server)
cd vanilla-basic && npx serve .

---

Minimum Integration (3 lines)

Vue 3

<script setup>
import { CyteEditor } from '@cyte-editor/vue3'
import '@cyte-editor/vue3/style.css'
</script>

<template>
  <CyteEditor v-model="content" placeholder="Start writing..." />
</template>

React

import { CyteEditor } from '@cyte-editor/react'
import '@cyte-editor/react/style.css'

function App() {
  return <CyteEditor html="<p>Hello!</p>" onChange={({ html }) => console.log(html)} />
}

Angular

import { CyteEditorComponent } from '@cyte-editor/angular'

@Component({
  template: `<cyte-editor [(ngModel)]="content" [config]="editorConfig"></cyte-editor>`,
  imports: [CyteEditorComponent],
})
export class AppComponent {
  content = '<p>Hello!</p>'
  editorConfig = { placeholder: 'Start writing...' }
}

Svelte

<script>
  import { CyteEditor } from '@cyte-editor/svelte'
  import '@cyte-editor/svelte/style.css'
</script>

<CyteEditor html="<p>Hello!</p>" onChange={(e) => content = e.html} />

Vanilla JS

<div id="toolbar"></div>
<div id="editor"></div>
<script type="module">
  import { EditorManager } from '@cyte-editor/core'
  import { renderToolbar } from '@cyte-editor/vanilla'
  import '@cyte-editor/core/style.css'
  import '@cyte-editor/vanilla/style.css'

  const toolbar = renderToolbar(document.querySelector('#toolbar'))
  const manager = EditorManager.create(document.querySelector('#editor'))
  toolbar.attachEditor(manager.getEditor(), manager)
</script>

---

Packages

Package	Framework	npm
@cyte-editor/vue3	Vue 3
@cyte-editor/vue2	Vue 2
@cyte-editor/react	React
@cyte-editor/svelte	Svelte
@cyte-editor/angular	Angular
@cyte-editor/vanilla	Vanilla JS
@cyte-editor/core	Framework-agnostic

Pro Extensions

Package	Capability
@cyte-editor/pro-paste	Office document semantic paste — Word, Excel, WPS fidelity
@cyte-editor/pro-export	Document import/export — Markdown, Word (.docx), HTML
@cyte-editor/pro-revision	Version snapshots, rich-text diff, scroll-sync compare

---

Licensing

CyteEditor offers a free Community Edition and a commercial Pro license:

• Community Edition — Free for any use, including commercial projects
• Pro License — Perpetual (one-time purchase) option available: Single $1,299 / Business $5,199

See Pricing for details.

---

Links

• Live Demo (Playground)
• Documentation
• API Reference
• Pricing
• Website

---

Discussions

Have questions or want to share your integration experience? Head to GitHub Discussions (enable after repo creation).