Realtime Mockup

WebSocket-based real-time mockup generation with live preview updates using useRealtimeMockup.

Interactive Demo

Try the interactive playground below - draw on the canvas and watch the product mockup update in real-time via WebSocket:

Loading playground...

Overview

The useRealtimeMockup hook connects to a WebSocket server for instant mockup generation as users make changes. Perfect for real-time product configurators and interactive design tools.

✨ Features

  • • WebSocket connection with auto-reconnect
  • • Real-time mockup generation (sub-second updates)
  • • Multi-placement support (image + color placements)
  • • Session management and debug logging
  • • Automatic cleanup on unmount
This example uses MerchifyCanvas from @merch/canvas. You can use any canvas library or drawing tool that can export image blobs. The hook only requires a blob to send via the sendCanvasBlob method.

useRealtimeMockup Options

wsUrlstring
WebSocket server URL for real-time mockup generation.

Hook Return Values

isConnectedboolean
Whether the WebSocket connection is active.
sessionIdstring | null
Current WebSocket session ID.
isConfiguredboolean
Whether the server has received and acknowledged the config.
mockupResultsMockupResult[]
Array of generated mockup results with imageUrl and mockupId.
statusstring
Connection status: "disconnected", "connecting", "connected", etc.
sendConfig(config: WebSocketConfig) => void
Send product configuration to server.
sendCanvasBlob(placement: string, blob: Blob, version: number, updateMs: number) => void
Send canvas artwork blob for a specific placement.

Installation

npx merchify-cli init

This CLI will guide you through setting up Merchify components in your project

Canvas Drawing: The MerchifyCanvas component used in the example is from @merch/canvas. You can use any canvas library that exports blobs - the key is implementing the onExport callback.