SDK API Reference

The BoardAPI SDK provides 21 powerful APIs to build interactive, collaborative components.

Philosophy

The SDK follows a simple principle: You write business logic, SDK handles synchronization.

• 10 lines of your code = fully synced, collaborative component
• TypeScript types included
• Automatic preview generation
• Built-in offline support
• Permission management

Quick Reference

API	Description	Use Cases
board.storage	Shared state sync	Counter, voting, forms
board.props	Component configuration	Title, colors, settings
board.participants	User info & events	Avatars, permissions
board.lifecycle	Component events	Init, focus, destroy
board.ui	UI controls	Toast, resize, preview
board.offline	Offline queue	Network resilience
board.connection	Connection status	Online/offline indicator

Installation

npm install @boardapi/sdk

Basic Usage

import { BoardAPI } from '@boardapi/sdk';

// Initialize
const board = new BoardAPI();

// Shared state
await board.storage.set('count', 0);

// Subscribe to changes
board.storage.subscribe('count', (newValue) => {
  console.log('Count updated:', newValue);
});

// Lifecycle events
board.on('ready', () => {
  console.log('Component ready!');
});

Architecture

┌─────────────────┐       ┌─────────────────┐       ┌─────────────┐
│   Component     │       │    Platform     │       │   Server    │
│   (iframe)      │◄─────►│   (parent)      │◄─────►│  WebSocket  │
│                 │postMsg│                 │  WS   │             │
│  @boardapi/sdk  │       │ ExternalComponent│       │   Gateway   │
└─────────────────┘       └─────────────────┘       └─────────────┘

The SDK abstracts away:

• PostMessage protocol
• WebSocket connection
• Conflict resolution
• State persistence
• Preview generation

TypeScript Support

Full type safety out of the box:

interface MyComponentStorage {
  count: number;
  lastClicker: string;
}

interface MyComponentProps {
  title: string;
  maxClicks: number;
}

const board = new BoardAPI<MyComponentStorage, MyComponentProps>();

// Now everything is typed!
const count = board.storage.get('count'); // number | undefined
const title = board.props.get('title');   // string

What's Next?

• Storage API - Learn how to sync state
• Lifecycle Events - Handle component lifecycle
• UI Controls - Control component appearance
• Participants API - Work with users

Advanced APIs (Coming Soon)

The following APIs are documented in the full specification but not yet implemented:

• board.undoManager - Undo/Redo integration
• board.global - Inter-component communication
• board.presence - Inner cursors
• board.context - Frames/rooms support
• board.backend - Secure backend proxy
• board.webhooks - External events (Jira/GitHub)
• board.export - Data export (CSV/Excel)
• board.connectors - Diagram arrows
• board.a11y - Accessibility helpers
• board.i18n - Localization
• board.assets - File uploads

Check the full SDK specification for details.