Component Library

Pre-built collaborative components ready to drop into your application

Rich Text Editor

stablereact, vue, svelte

Collaborative text editing with real-time sync, comments, and mentions

Features

Real-time collaboration
Comments & mentions
Rich formatting
Version history

Installation

npm install @cosync/rich-text

Use Case

Document collaboration, content management, note-taking apps

Quick Start

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

<RichTextEditor
  documentId="doc-123"
  apiKey="your-api-key"
  theme="dark"
  onReady={() => console.log('Editor ready')}
/>

Props

Name	Type	Required	Description
`documentId`	`string`	Yes	Unique document identifier
`apiKey`	`string`	Yes	Your CoSync API key
`theme`	`'light' \| 'dark'`	No	Editor theme
`readonly`	`boolean`	No	Disable editing
`onReady`	`() => void`	No	Callback when editor loads

Events

onChangeonPresenceonComment

Data Table

stablereact, vue, svelte

Collaborative spreadsheet with formulas, cell-level permissions, and real-time sync

Features

Real-time collaboration
Formula support
Cell permissions
Import/Export

Installation

npm install @cosync/data-table

Use Case

Financial data, inventory management, project tracking

Quick Start

import { DataTable } from '@cosync/data-table';

<DataTable
  documentId="table-123"
  apiKey="your-api-key"
  columns={[
    { id: 'name', type: 'text', label: 'Name' },
    { id: 'quantity', type: 'number', label: 'Quantity' },
    { id: 'price', type: 'currency', label: 'Price' },
  ]}
  onCellChange={(cell, value) => console.log(cell, value)}
/>

Props

Name	Type	Required	Description
`documentId`	`string`	Yes	Unique table identifier
`apiKey`	`string`	Yes	Your CoSync API key
`columns`	`Column[]`	Yes	Column definitions
`readonly`	`boolean`	No	Disable editing

Events

onCellChangeonRowAddonRowDelete

Whiteboard

betareact, vue

Infinite canvas with shapes, connectors, and freeform drawing

Features

Infinite canvas
Shapes & connectors
Freeform drawing
Multiplayer cursors

Installation

npm install @cosync/whiteboard

Use Case

Brainstorming, diagramming, wireframing, visual planning

Quick Start

import { Whiteboard } from '@cosync/whiteboard';

<Whiteboard
  documentId="wb-123"
  apiKey="your-api-key"
  tools={['select', 'rectangle', 'ellipse', 'arrow', 'pen', 'text']}
  onElementAdd={(element) => console.log('Added', element)}
/>

Props

Name	Type	Required	Description
`documentId`	`string`	Yes	Unique whiteboard identifier
`apiKey`	`string`	Yes	Your CoSync API key
`tools`	`Tool[]`	No	Available drawing tools
`gridEnabled`	`boolean`	No	Show background grid

Events

onElementAddonElementUpdateonSelectionChange

Form Builder

stablereact, vue

Collaborative form creation with real-time preview and submission tracking

Features

Drag & drop builder
Real-time preview
Submission tracking
Conditional logic

Installation

npm install @cosync/form-builder

Use Case

Surveys, feedback forms, applications, data collection

Quick Start

import { FormBuilder } from '@cosync/form-builder';

<FormBuilder
  documentId="form-123"
  apiKey="your-api-key"
  fields={[
    { type: 'text', label: 'Name', required: true },
    { type: 'email', label: 'Email', required: true },
    { type: 'textarea', label: 'Message' },
  ]}
  onSubmit={(data) => console.log('Submitted', data)}
/>

Props

Name	Type	Required	Description
`documentId`	`string`	Yes	Unique form identifier
`apiKey`	`string`	Yes	Your CoSync API key
`fields`	`Field[]`	Yes	Form field definitions
`readonly`	`boolean`	No	Disable editing

Events

onSubmitonFieldChange

Framework Integration Examples

React Integration

// components/CollaborativeEditor.tsx
'use client';

import { RichTextEditor } from '@cosync/rich-text';
import { useSession } from 'next-auth/react';

export function CollaborativeEditor() {
  const { data: session } = useSession();

  return (
    <RichTextEditor
      documentId="doc-123"
      apiKey={process.env.NEXT_PUBLIC_COSYNC_KEY}
      userId={session?.user?.id}
      userName={session?.user?.name}
      theme="dark"
      onChange={(content) => {
        // Handle content changes
        console.log('Content updated:', content);
      }}
    />
  );
}

Vue Integration

// components/CollaborativeEditor.vue
<script setup lang="ts">
import { RichTextEditor } from '@cosync/rich-text/vue';
import { useAuth } from '@/composables/useAuth';

const { user } = useAuth();

const handleChange = (content: string) => {
  console.log('Content updated:', content);
};
</script>

<template>
  <RichTextEditor
    document-id="doc-123"
    :api-key="$cosyncKey"
    :user-id="user?.id"
    :user-name="user?.name"
    theme="dark"
    @change="handleChange"
  />
</template>

Ready to integrate?

Get your API key and start building collaborative experiences in minutes.