Trace UI · Free developer tool

Make the journey yours.

Shape a shipment experience, test the awkward states, and leave with working React. Everything you paste stays in this page’s memory.

Component & quickstart

Live component preview

Illustrative sample · React

Example carrier

Shipment journey

DEMO-1042

Delivered

Demo data · This is an illustrative shipment, not a live tracking result.

  1. Label created
  2. On the way
  3. Out for delivery
  4. Delivered

Scan history

4 events

  1. Delivered to the recipient

    Latest reported event

    Example destination

  2. Out for delivery

    Example delivery depot

  3. Arrived at the sorting facility

    Example sorting hub

  4. Shipping label created

    Example origin

Local exampleEvents in supplied order · Times shown in UTC
Your component. Your code.
TrackingView.tsx

Install: npm install https://traceapi.dev/downloads/traceapi-timeline-0.2.0.tgz

import { ShipmentTimeline, type TimelineShipment, type ShipmentTimelineProps } from "@traceapi/timeline";
import "@traceapi/timeline/styles.css";

const shipment = {
  "reference": "DEMO-1042",
  "carrier": "Example carrier",
  "freshness": "simulated",
  "status": "delivered",
  "events": [
    {
      "description": "Delivered to the recipient",
      "location": "Example destination",
      "status": "delivered",
      "timestamp": "2026-03-18T14:20:00Z"
    },
    {
      "description": "Out for delivery",
      "location": "Example delivery depot",
      "status": "out_for_delivery",
      "timestamp": "2026-03-18T08:10:00Z"
    },
    {
      "description": "Arrived at the sorting facility",
      "location": "Example sorting hub",
      "status": "in_transit",
      "timestamp": "2026-03-17T19:35:00Z"
    },
    {
      "description": "Shipping label created",
      "location": "Example origin",
      "status": "pending",
      "timestamp": "2026-03-16T10:00:00Z"
    }
  ]
} satisfies TimelineShipment;

const presentation = {
  "theme": "dark",
  "density": "comfortable",
  "layout": "full",
  "locale": "en",
  "timeZone": "UTC"
} satisfies Omit<ShipmentTimelineProps, "shipment">;

export default function TrackingView() {
  return <ShipmentTimeline shipment={shipment} {...presentation} />;
}

Bring your own events.

Paste sanitized example data. Never paste customer details, tokens, or private tracking numbers.

✓ Valid shipment · 4 events

Any provider can map to this model. Extra fields are omitted from the export. Trace mode accepts the tracking result object returned by /v1/track or the sandbox.