Sync colors live
between any tools

import { SourceSession, createCollection } from 'token-beam';

const session = new SourceSession({
  serverUrl: 'wss://tokenbeam.dev',
  clientType: 'web',
  origin: 'My App',
});

const payload = createCollection('brand', {
  'primary':   '#0066cc',
  'secondary': '#cc6600',
  'surface':   '#f5f5f5',
});

session.on('peer-connected', () => session.sync(payload));
session.connect();

import { TargetSession, extractColorTokens } from 'token-beam';

const session = new TargetSession({
  serverUrl: 'wss://tokenbeam.dev',
  clientType: 'my-app',
  // token pasted or entered by the user
  sessionToken: 'beam://A1B2C3D4E5F6',
});

session.on('sync', ({ payload }) => {
  const colors = extractColorTokens(payload);
  colors.forEach(({ name, hex }) => {
    console.log(name, hex); // "primary" "#0066cc"
  });
});

session.connect();