Component Playground

Test and configure CoSync components interactively

Configuration

Customize component settings

Component Type

Theme

Permission Level

Read-only modeShow presence indicatorsEnable version history

Quick Actions

Live Preview

Interactive component preview

Connected

Rich Text Editor Preview

This is a preview of the configured component

See code below

Generated Code

Copy this code to use the component

import { RichTextEditor } from '@cosync/rich-text';

export default function CollaborativeRichTextEditor() {
  return (
    <RichTextEditor
      documentId="doc-1767760084517"
      apiKey="cosync_sk_your_api_key_here"
      theme="dark"
      readonly={false}
      permission="editor"
      showPresence
      
      onReady={() => console.log('Component ready')}
      onChange={(content) => console.log('Content changed:', content)}
    />
  );
}

Installation

1. Install the package

npm install @cosync/rich-text

2. Get your API key

Visit Settings to generate your API key.

3. Add to your app

Copy the generated code above and paste it into your component.