Explorer

The Protokit Explorer is a web-based interface for browsing and inspecting your app-chain in real time. It allows you to view blocks, batches, transactions, and settlement data through a simple UI.

Features

The Explorer provides comprehensive views of your app-chain data:

Dashboard: Overview with real-time statistics and recent activity
Blocks: Browse and search blocks with detailed information
Batches: View batches informations and contained blocks
Transactions: Explore transactions details, status, and execution results
Settlements: Track settlements transactions and their status

Starting the Explorer

The easiest way to run the Explorer is using the Protokit CLI, which handles Docker image pulling and container management automatically.

pnpm protokit explorer start

This will:

Pull the latest Explorer Docker image (ghcr.io/proto-kit/explorer:latest)
Start the Explorer on port 5003
Connect to the indexer at http://localhost:8081/graphql (default)

The Explorer will be available at http://localhost:5003.

Configuration Options

You can customize the Explorer using CLI flags:

pnpm protokit explorer start \
  --port 3000 \
  --indexer-url http://localhost:8081/graphql \
  --dashboard-title "My App-Chain Explorer" \
  --dashboard-slogan "Explore the blockchain" \
  --explorer-image ghcr.io/proto-kit/explorer:latest

Option	Default	Description
`--port`	`5003`	Port to run the Explorer on
`--indexer-url`	`http://localhost:8081/graphql`	GraphQL endpoint URL for the indexer
`--dashboard-title`	`Protokit Explorer`	Title displayed in the Explorer dashboard
`--dashboard-slogan`	`Explore your Protokit AppChain`	Slogan displayed in the Explorer
`--explorer-image`	`ghcr.io/proto-kit/explorer:latest`	Docker image used for the Explorer UI

Prerequisites

Docker: The CLI runs the Explorer in a Docker container.
Indexer: A running indexer service reachable at the URL provided via --indexer-url (or the default http://localhost:8081/graphql).

You can include the Explorer in your Docker Compose setup:

services:
  explorer:
    image: ghcr.io/proto-kit/explorer:latest
    ports:
      - "5003:3000"
    environment:
      - NEXT_PUBLIC_INDEXER_URL=http://indexer:8080/graphql
      - NEXT_PUBLIC_DASHBOARD_TITLE=My App-Chain Explorer
      - NEXT_PUBLIC_DASHBOARD_SLOGAN=Explore the blockchain

The Explorer will be available at http://localhost:5003.

Prerequisites

Docker: Docker and Docker Compose installed
Indexer: Set NEXT_PUBLIC_INDEXER_URL to a reachable indexer GraphQL endpoint.

If you want to develop or customize the Explorer, you can run it from source:

# Clone the repository
git clone https://github.com/proto-kit/explorer.git
cd explorer
 
# Install dependencies
npm install
 
# Run in development mode
npm run dev
 
# Or build for production
npm run build
npm start

The Explorer will be available at http://localhost:3000 by default.

Configuration Options

You can customize the Explorer using environment variables:

Variable	Default	Description
`NEXT_PUBLIC_INDEXER_URL`	`http://localhost:8081/graphql`	GraphQL endpoint URL for the indexer
`NEXT_PUBLIC_DASHBOARD_TITLE`	`Explorer`	Title displayed in the Explorer dashboard
`NEXT_PUBLIC_DASHBOARD_SLOGAN`	`Explore the blockchain. Search in real-time.`	Slogan displayed in the Explorer

Prerequisites

Indexer: Set NEXT_PUBLIC_INDEXER_URL to a reachable indexer GraphQL endpoint.

Customization

The Explorer is built with Next.js and can be customized:

Branding: Modify the title and slogan via environment variables
Styling: The Explorer uses Tailwind CSS and can be themed
Components: Built with Radix UI primitives and shadcn/ui components

For advanced customization, clone the Explorer repository and modify the source code.

Monitoring Remote caching