READ-ONLY · NO KEYS

Explorer

The XE block explorer

The XE block explorer is a SvelteKit 2 / Svelte 5 web application that provides a real-time view of the XE network. It connects to a node's HTTP API to display accounts, blocks, leases, conflicts, state chain data, and network statistics.

#Design

The explorer uses a TUI-inspired monospace aesthetic with a light-on-dark slate color scheme. Typography is built around Berkeley Mono, IBM Plex Mono, and JetBrains Mono as fallbacks.

All data is read-only -- the explorer does not hold any keys or sign transactions.

#Features

  • Real-time network dashboard with live statistics (accounts, blocks, leases, peers, conflicts)
  • Account explorer with full block chain history and multi-asset balances
  • Block search by hash with complete field display
  • Pending transaction tracking across all accounts
  • Conflict visualization showing competing blocks and resolution state
  • Lease management view with status, resources, cost, and duration
  • Provider dashboard with capacity metrics and earnings
  • State chain inspector with block history and KV browser
  • Responsive design that works on desktop and mobile
  • Sortable tables for accounts, leases, and other list views
  • Copy-to-clipboard utilities for addresses, hashes, and other values

#Tech stack

ComponentVersionPurpose
SvelteKit2Application framework
Svelte5 (runes)Reactivity and components
TailwindCSSv4Styling
tweetnacl--Ed25519 (for address validation)
blakejs--Blake2b (utility)
Vite6Build tooling
adapter-static--SPA output

#API integration

The explorer fetches all data from the node's HTTP API. In development, requests go to a local node. In production, Caddy proxies /api/* requests to the node container.

diagram
Browser → Caddy → /api/* → Node (port 8080)         ↓         /* → Static files (explorer SPA)

#Deployment

The explorer is built as static files by CI (npm ci && npm run build) and rsynced to /opt/xe/web/explorer/ on each host. Caddy serves the files directly from disk.

See Deployment for full details.

#See also