Live demo

MerchForge

A merch configurator. Every control writes to one configuration, and the preview, the price and the JSON output are all read from it.

React StateJSON SyncDerived DataTyping Animation

How it works

  • One source of truth.

    Product, colour, size, text and quantity live in one object. Nothing else stores a copy.

  • Derived, not stored.

    The price and the output are computed from that object on every change, so they can't disagree with the preview.

  • The output types itself out.

    The JSON panel animates the new text in, so you can see what each change did.