Example Client for JRD

What is this?

This is an example target application that demonstrates how to integrate with JRD using the Client SDK. When loaded inside the builder's iframe, this app:

  • Connects to the builder via postMessage
  • Registers its component catalog with the builder
  • Renders the UI tree received from the builder
  • Reports click and hover events back to the builder
  • Displays selection and hover overlays
  • Detects drop zones during drag operations

Available Components

Container

Flex container for layout

Heading

H1-H6 heading elements

Text

Paragraph text

Button

Clickable buttons

Card

Card with shadow

Image

Image element

Spacer

Empty space

How to Use

  1. Start this example client:pnpm --filter @jrd/example-client dev
  2. Start the builder with iframe mode:pnpm dev
  3. Open the builder at:http://localhost:3000/designer?iframe=http://localhost:3001/preview
  4. Drag components from the palette into the canvas to design your UI.

Preview Route

The preview route at /preview is the iframe target. It uses the Client SDK to communicate with the builder.

View Preview Route