@linkage-open/lib

The official SDK for building applications on Linkage.

Features

• 🎨 Flexible UI Components - Pre-built React components for workflows and nodes
• 🔄 Real-Time Collaboration - Built-in Liveblocks integration for collaborative features
• 🎯 Type-Safe - Full TypeScript support
• ⚡ Optimized - Performance-focused architecture
• 🔐 Secure - Built-in authentication and authorization
• 📊 Editor Component - All-in-one collaborative workflow editor with @xyflow/react

Installation

npm install @linkage-open/lib

Peer Dependencies

npm install react react-dom

For real-time collaboration:

npm install @liveblocks/client @liveblocks/react

For workflow editor:

npm install @xyflow/react

Quick Start

Basic Workflow Editor

import { Editor, ClientProvider } from "@linkage-open/lib/react";

function App() {
  return (
    <ClientProvider config={{ appId: "your-app-id", appSecret: "your-secret" }}>
      <Editor nodeTypes={customNodeTypes} />
    </ClientProvider>
  );
}

Collaborative Workflow Editor

import { Editor, ClientProvider } from "@linkage-open/lib/react";

function App() {
  return (
    <ClientProvider
      config={{ appId: "your-app-id", appSecret: "your-secret" }}
      liveblocks={{
        enabled: true,
        roomId: "my-workflow-room",
        publicKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_KEY
      }}
    >
      <Editor
        nodeTypes={customNodeTypes}
        enableCollaboration
        roomId="my-workflow-room"
        liveblocks={{
          publicKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_KEY
        }}
      />
    </ClientProvider>
  );
}

Real-Time Collaboration

Linkage provides out-of-the-box real-time collaboration powered by Liveblocks. See the Liveblocks Integration Guide for details.

Quick Example

import { createLiveblocksContext, Cursor } from "@linkage-open/lib/react";

const { RoomProvider, useMyPresence, useOthers } =
  createLiveblocksContext({
    publicKey: "pk_prod_r4T9Q4ZxehLDLoQOjlEBWBcJKLocfU2f2tVsjbabbCaefeHPBkC_m2_cYZubNiOx",
  });

function CollaborativeApp() {
  return (
    <RoomProvider id="my-room" initialPresence={{ cursor: null }}>
      <Canvas />
    </RoomProvider>
  );
}

Components

Editor

All-in-one workflow editor component with optional real-time collaboration.

Props:

• nodeTypes - Custom ReactFlow node types
• enableCollaboration - Enable real-time collaboration features
• roomId - Liveblocks room ID (required if collaboration is enabled)
• liveblocks - Liveblocks configuration (publicKey or authEndpoint)

ClientProvider

Root provider component with optional Liveblocks integration.

Props:

• config - Client configuration (appId, appSecret)
• liveblocks - Optional Liveblocks configuration for automatic room setup

Documentation

• Liveblocks Integration - Complete guide for real-time collaboration
• Examples - Working examples and demos
• API Reference

Examples

Check out the examples directory for complete working examples:

• Collaborative Cursor Tracking - Simple real-time cursor tracking
• Secure Collaboration - Production-ready with authentication

License

MIT