Serverless Relay Architecture

SyncingBoard is engineered as a stateless, zero-retention relay. It acts purely as a real-time communications conduit between design applications and whiteboards - never storing user design files, canvas assets, or personal data on a persistent database server.

1. System Architecture Topology

+------------------------------------+             +------------------------------------+
|   Design Source (Figma / Penpot)   |             |   Whiteboard Target (Miro/FigJam)  |
|   - REST API / Companion Extension |             |   - Web SDK v2 / Plugin API        |
+------------------------------------+             +------------------------------------+
                   \                                     /
                    \                                   /
                     v                                 v
            +---------------------------------------------------+
            |  Vercel Edge Relay (Next.js Node 24 Serverless)   |
            |  - /api/relay/* Vector Sanitization Pipeline      |
            +---------------------------------------------------+
                                      |
                      +---------------+---------------+
                      |                               |
           +---------------------+         +---------------------+
           |   Ably WebSockets   |         |    Upstash Redis    |
           | (Real-time Channels)|         | (180s Ephemeral TTL)|
           +---------------------+         +---------------------+

2. Infrastructure Stack Breakdown

1. Vercel Serverless Compute

Built on Next.js App Router (Node 24 runtime), SyncingBoard’s API routes (/api/relay/*, /api/figma/*, /api/oauth/*) execute statelessly on Vercel’s global edge network. Functions spin up instantly on HTTP triggers and scale to zero when idle, guaranteeing zero baseline infrastructure cost and sub-second response times.

2. Ably Realtime WebSockets

To avoid the latency, memory overhead, and battery drain of traditional HTTP polling, SyncingBoard uses Ably WebSocket channels (relayAbly.ts).

When a user initiates a sync session, token-cached WebSockets pair the design editor tab and whiteboard plugin in milliseconds, streaming SVG vector payloads across encrypted real-time channels:

// Ably realtime session pairing in relayAbly.ts
export async function createRelayChannel(sessionId: string) {
  const ably = new Ably.Realtime({ key: process.env.ABLY_API_KEY });
  const channel = ably.channels.get(`syncingboard:${sessionId}`);
  
  // Real-time sub-second payload dispatch
  await channel.publish('frame-payload', { payload, timestamp: Date.now() });
}

3. Upstash Serverless Redis (Single-Read Ephemeral Cache)

Heavy binary image renders (e.g. Penpot base64 exports) and session handshakes are managed in Upstash Redis (relayRedis.ts) under a strict 180-second time-to-live (SETEX):

// Ephemeral payload buffer in relayRedis.ts with strict 180s TTL
export async function setEphemeralResult(sessionId: string, data: string) {
  await redis.setex(`result:${sessionId}`, 180, data);
}

Once the whiteboard plugin reads the image via GET /api/relay/response, it fires an immediate DEL command to purge the record from memory. Zero design pixels or user assets persist on cloud storage.

3. The Stateless Innovation: The Board as the Database

Traditional sync platforms require a centralized relational database (PostgreSQL, Supabase) to map User -> Boards -> Widgets -> Figma Frames. If the database crashes or gets breached, sync links break and user data is exposed.

SyncingBoard inverts this model: the whiteboard canvas itself serves as the database.

+-----------------------------------------------------------------------------+
| THE BOARD AS THE DATABASE BENEFITS                                          |
| 1. Privacy First: Zero persistent data = zero breach surface area           |
| 2. Self-Describing: Canvas nodes carry their own design source identity     |
| 3. Resilient: Native whiteboard undo/redo restores sync state automatically |
| 4. Cross-Board Portability: Copy-pasting images retains live sync links     |
+-----------------------------------------------------------------------------+

Key Architectural Superpowers

• Self-Describing Canvas Nodes: Connection identity is stored directly in native item metadata (widget.setMetadata() in Miro, node.setPluginData() in FigJam) and in durable title signatures ([FigmaSync|fileKey|nodeId]).
• Zero Database Maintenance: When opening SyncingBoard, the plugin queries the board’s own scene graph to rebuild sync mappings on the fly.
• True Cross-Board Portability: When a designer copies and pastes a synced image from one whiteboard to another, the embedded metadata preserves the sync link with zero backend reconfiguration.
• Native Search Indexing in Miro: Because title signatures live directly in the visible Miro widget title, Miro’s native Cmd + F search bar indexes Figma and Penpot frame IDs, allowing stakeholders to search and jump to design frames directly on the board.
• Free Versioning & Rollbacks: Miro and Figma’s native version history and undo/redo stacks automatically version the sync bindings alongside the board layout.

Continue exploring: Security & Privacy Architecture or return to SyncingBoard Overview.