ASN.1 Explorer

Web app for exploring ASN.1-encoded data (BER / DER / PER).

Built with React 19, TypeScript, and Vite.

Features

• Schema-less BER/DER decoding — paste hex, Base64, or PEM and get a full TLV tree
• Optional JSON schema — name fields in the tree for easier reading
• PER mode — UI ready; full PER decode needs a schema-driven codec (documented in the UI)
• Interactive tree with expand/collapse
• Hex dump with selection highlighting (tag/length vs value)
• Detail panel for the selected node (offset, lengths, raw value)

One component per file

src/
  App.tsx
  components/
    Header.tsx
    EncodingSelector.tsx
    InputPanel.tsx
    SchemaPanel.tsx
    TreeView.tsx
    TreeNode.tsx
    HexDump.tsx
    DetailsPanel.tsx
  lib/
    types.ts
    utils.ts
    berDecoder.ts

Run

cd asn1-explorer
npm install
npm run dev

Open the URL Vite prints (usually http://localhost:5173).

Usage

1. Paste ASN.1 data (hex / Base64 / PEM) or click Example.
2. Choose encoding (BER or DER for schema-less exploration).
3. Optionally paste a JSON schema to name nodes.
4. Click Decode.
5. Click tree nodes to inspect details and highlight bytes in the hex dump.

PER note

Packed Encoding Rules depend on type constraints (size ranges, optional bitmaps, etc.). Without a schema there is no meaningful generic tree. For production PER support, integrate a library such as asn1-per-ts and drive it from the schema panel.

License

MIT