Changelog

Real-Time Collaboration with Co-Create

Introducing live collaboration for the Uniform Builder - sales reps and customers can now design uniforms together in real-time with synchronized views, live cursors, and presence indicators.

Overview

The Co-Create feature enables real-time collaboration in the Uniform Builder, allowing sales representatives and customers to design uniforms together from anywhere. Powered by Liveblocks, this feature brings multiplayer capabilities to the design experience.

Features

Live Collaboration Sessions

  • Shareable Links - Generate a unique session link from Quick Actions to invite collaborators
  • Instant Sync - All design changes are synchronized in real-time across all participants
  • No Account Required - Guests can join sessions without creating an account

Presence Indicators

  • Live Badge - Green "Live" indicator shows when in a collaborative session
  • User Avatars - See who's currently in the session with profile pictures or initials
  • Overflow Count - "+N" indicator when more than 5 users are present

Real-Time Cursors

  • Live Cursor Tracking - See other users' mouse movements across the canvas in real-time
  • Named Cursors - Each cursor displays the user's name for easy identification
  • Color-Coded - Each collaborator gets a unique color for their cursor

Synchronized Steps

  • Step Following - When one user navigates to a different step, all participants follow automatically
  • Guided Experience - Sales reps can guide customers through the entire design process
  • Shared Context - Everyone sees the same step, colors, text, and design selections

Design State Sync

All builder data is synchronized in real-time:

  • Selected design template
  • Color zone selections
  • Text customizations (team name, player names)
  • Uploaded graphics and logos
  • Roster information

How to Use

  1. Open the Uniform Builder for any product
  2. Click "Co-Create" in the Quick Actions section
  3. Copy the generated session link
  4. Share the link with your customer or team member
  5. Start designing together in real-time!

Technical Details

  • Liveblocks Integration - Enterprise-grade real-time infrastructure
  • ID Token Authentication - Secure session management with Supabase integration
  • Presence API - Low-latency cursor and user presence tracking
  • Storage API - Conflict-free replicated data types (CRDTs) for state sync
  • Debounced Updates - Optimized sync frequency for smooth performance
Previous

Graphics Library Management & Builder Integration