PDA Explorer

Interactive visualization tool for Solana Program Derived Address (PDA) hierarchies.

Why?

Solana's PDA model can be challenging to reason about:

• PDAs form hierarchical trees where child addresses depend on parent data
• Relationships are implicit in seed derivation patterns
• Discovery requires knowing the exact seed structure

PDA Explorer makes these relationships visual and interactive, helping developers understand their program's account model.

Installation

npm install @pda-explorer/react

Usage

import { PdaExplorer } from "@pda-explorer/react";
import "@pda-explorer/react/styles.css";

// Define your program's PDA schema
const mySchema = {
  programName: "My Program",
  programId: "MyProgram111111111111111111111111111111111",
  accounts: {
    UserAccount: {
      id: "UserAccount",
      name: "User Account",
      seeds: [
        { name: "prefix", type: "literal", value: "user" },
        { name: "authority", type: "pubkey", source: "User's wallet" },
      ],
      parent: null,
      children: ["UserData"],
      description: "Main user account",
      color: "#8B5CF6",
    },
    UserData: {
      id: "UserData",
      name: "User Data",
      seeds: [
        { name: "prefix", type: "literal", value: "data" },
        { name: "user", type: "pubkey", source: "UserAccount PDA" },
        { name: "index", type: "u64", source: "Data index" },
      ],
      parent: "UserAccount",
      children: [],
      description: "User's data entries",
      color: "#10B981",
    },
  },
};

function App() {
  return (
    <PdaExplorer
      schema={mySchema}
      height={600}
      showLegend={true}
      showPanel={true}
    />
  );
}

Schema Format

PdaSchema

| Field | Type | Description | | ------------- | ------------------------------- | ------------------------------ | | programName | string | Display name of your program | | programId | string? | Base58 program ID | | description | string? | Program description | | accounts | Record<string, PdaAccountType> | Account type definitions |

PdaAccountType

| Field | Type | Description | | ------------------- | ----------------- | ---------------------------------------- | | id | string | Unique identifier | | name | string | Display name | | seeds | SeedComponent[] | Seed derivation pattern | | parent | string \| null | Parent account ID (null for root) | | children | string[] | Child account IDs | | description | string | What this account stores | | color | string | Hex color for visualization | | deriveFunctionName| string? | Name of derive function (for reference) |

SeedComponent

| Field | Type | Description | | -------- | ---------- | ---------------------------------------- | | name | string | Seed name (for display) | | type | SeedType | literal, pubkey, u8-u64 | | value | string? | For literal seeds: the string value | | source | string? | Human-readable description of data source|

Component Props

PdaExplorer

| Prop | Type | Default | Description | | ------------- | ------------------- | -------------------------- | ------------------------------- | | schema | PdaSchema | required | The PDA schema to visualize | | title | string? | {programName} PDA Explorer| Custom title | | description | string? | Schema description | Custom description | | showLegend | boolean | true | Show quick-select legend | | showPanel | boolean | true | Show seed details panel | | panelWidth | number \| string | 320 | Panel width | | height | number \| string | 600 | Component height | | className | string | "" | Additional CSS classes |

Exports

Components

• PdaExplorer - Main visualization component
• PdaGraph - Graph canvas (for custom layouts)
• SeedPanel - Seed details panel (for custom layouts)
• AccountNode - Individual node component

Types

• PdaSchema, PdaAccountType, SeedComponent, SeedType
• PdaNode, PdaNodeData, PdaEdge, PdaEdgeData

Helpers

• getRootAccounts(schema) - Get root-level accounts
• getChildren(schema, id) - Get children of an account
• getParent(schema, id) - Get parent of an account
• formatSeedPattern(account) - Format seeds as ["prefix", pubkey, u64_le]
• validateSchema(schema) - Validate schema for errors

Development

# Install dependencies
npm install

# Run demo app
npm run dev

# Build library
npm run build

License

MIT