OTel Trace Viewer

Visualize OpenTelemetry traces (OTLP JSON or Jaeger) as a waterfall flame graph with span attributes, errors, and per-service summaries.

Trace JSON (OTLP or Jaeger)

Format:otlp4 spans

{
  "resourceSpans": [
    {
      "resource": {
        "attributes": [
          {
            "key": "service.name",
            "value": {
              "stringValue": "frontend"
            }
          }
        ]
      },
      "scopeSpans": [
        {
          "spans": [
            {
              "traceId": "5b8aa5a2d2c872e8321cf37308d69df2",
              "spanId": "051581bf3cb55c13",
              "name": "GET /checkout",
              "kind": 2,
              "startTimeUnixNano": "1717000000000000000",
              "endTimeUnixNano": "1717000000420000000",
              "status": {
                "code": 1
              },
              "attributes": [
                {
                  "key": "http.method",
                  "value": {
                    "stringValue": "GET"
                  }
                },
                {
                  "key": "http.status_code",
                  "value": {
                    "intValue": 200
                  }
                }
              ]
            },
            {
              "traceId": "5b8aa5a2d2c872e8321cf37308d69df2",
              "spanId": "a1b2c3d4e5f60718",
              "parentSpanId": "051581bf3cb55c13",
              "name": "auth.verify",
              "startTimeUnixNano": "1717000000020000000",
              "endTimeUnixNano": "1717000000080000000",
              "status": {
                "code": 1
              }
            }
          ]
        }
      ]
    },
    {
      "resource": {
        "attributes": [
          {
            "key": "service.name",
            "value": {
              "stringValue": "checkout"
            }
          }
        ]
      },
      "scopeSpans": [
        {
          "spans": [
            {
              "traceId": "5b8aa5a2d2c872e8321cf37308d69df2",
              "spanId": "deadbeefcafef00d",
              "parentSpanId": "051581bf3cb55c13",
              "name": "POST /charge",
              "startTimeUnixNano": "1717000000090000000",
              "endTimeUnixNano": "1717000000380000000",
              "status": {
                "code": 1
              },
              "attributes": [
                {
                  "key": "http.method",
                  "value": {
                    "stringValue": "POST"
                  }
                },
                {
                  "key": "http.status_code",
                  "value": {
                    "intValue": 200
                  }
                }
              ]
            },
            {
              "traceId": "5b8aa5a2d2c872e8321cf37308d69df2",
              "spanId": "0011223344556677",
              "parentSpanId": "deadbeefcafef00d",
              "name": "stripe.api.charges.create",
              "startTimeUnixNano": "1717000000100000000",
              "endTimeUnixNano": "1717000000370000000",
              "status": {
                "code": 2
              },
              "attributes": [
                {
                  "key": "error",
                  "value": {
                    "boolValue": true
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Spans

Services

Errors

Total span time

420.00ms

Waterfall

window: 420.00ms

Click a bar to zoom in. Double-click to reset.

Per-service summary

Service	Spans	Total time	Errors
checkout	2	560.00ms	1
frontend	2	480.00ms	0

Span detail

Click a span name to inspect attributes and events.

Updated October 2, 2026. Provided as is. Check the output before you rely on it in production.

How to use OTel Trace Viewer

1

Paste a trace

Drop in OTLP JSON (resourceSpans / scopeSpans) or Jaeger query output (data array). The format badge confirms which parser was applied.
2

Read the waterfall

Spans render as colored bars indented by parent. Color encodes service. A red border marks spans whose status code is ERROR so failures stand out at a glance.
3

Zoom into a span

Click any waterfall bar to zoom the timeline around that span with 20% padding. Double-click the timeline to reset to the full trace window.
4

Inspect attributes and per-service totals

Click a span name to see attributes and events in the side panel. The per-service summary lists span counts, total time, and error counts ranked by impact.

Questions and answers

What is OTel Trace Viewer?

An OpenTelemetry trace records one request as a tree of timed spans, each from a service, with attributes and a status. This viewer reads an OTLP JSON or Jaeger export and draws it as a waterfall with per-service totals, span attributes and error highlighting, and zooms the timeline when you click a span.

Which trace formats are supported?

Two formats are accepted: OTLP JSON exports with resourceSpans and scopeSpans, and Jaeger query output with a top-level data array. The active format is shown above the input.

How does the zoom work?

Clicking a waterfall bar zooms the timeline window around that span with 20% padding on each side. Double-clicking the timeline resets to the full trace; the active window is shown next to the title.

Are my traces sent anywhere?

No. Parsing, layout, and rendering all run in your browser. The trace JSON, span attributes, and any embedded metadata never leave the tab.

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/otel-trace-viewer/

For automation planning, fetch the canonical contract at /api/tool/otel-trace-viewer.json.

OTel Trace Viewer