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

420.00ms

60.00ms

290.00ms

270.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.

Last updated: June 25, 2026

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

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.

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.

Frequently Asked Questions

What is OTel Trace Viewer?

OTel Trace Viewer renders an OpenTelemetry trace as an interactive waterfall flame graph with per-service breakdowns, span attributes, error highlighting, and a click-to-zoom timeline.

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.

Does it send my data to a server?

No. The viewer is fully client-side. There is no upload step and no background fetch of the trace contents to any backend service.

OTel Trace Viewer