# pmndrs/examples architecture

> Architecture diagram of the GitHub repository pmndrs/examples, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pmndrs/examples
- Repository: https://github.com/pmndrs/examples

## Overview

This repository is a gallery of React Three Fiber examples, presented as a searchable website and as static, agent-readable catalog documents. The main reader workflow is to browse or filter the gallery, open an example page, and view its demo; coding agents can instead consume the generated catalog index and per-example Markdown. The sampled sources support the website’s metadata loading, navigation, and catalog rendering. The example source directories themselves are absent from the supplied tree, so their internal demo behavior and wiring are not mapped.

Main entry points: [`apps/website/app/layout.tsx`](https://github.com/pmndrs/examples/blob/main/apps/website/app/layout.tsx) (Site layout), [`apps/website/components/Nav.tsx`](https://github.com/pmndrs/examples/blob/main/apps/website/components/Nav.tsx) (Search and filters), [`bin/build-catalog.mjs`](https://github.com/pmndrs/examples/blob/main/bin/build-catalog.mjs) (Catalog exporter), [`apps/website/app/page.tsx`](https://github.com/pmndrs/examples/blob/main/apps/website/app/page.tsx) (Gallery page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_gallery["Example gallery"]
  node_gallery_data["Gallery metadata<br/>[helper.ts]"]
  node_example_index["Gallery page<br/>[page.tsx]"]
  node_example_page["Example page"]
  node_navigation["Search and filters<br/>[Nav.tsx]"]
  node_filter_logic["Filter utilities<br/>[filters.ts]"]
  node_tag_filter["Tag filtering"]
  node_example_demo["Example demo"]
end

subgraph group_catalog["Agent catalog"]
  node_catalog_builder["Catalog exporter<br/>[build-catalog.mjs]"]
  node_catalog_renderer["Markdown renderer<br/>[render.mjs]"]
  node_catalog_files["Static catalog files"]
end

subgraph group_site["Website shell"]
  node_layout["Site layout<br/>[layout.tsx]"]
  node_sidebar["Sidebar UI<br/>[sidebar.tsx]"]
  node_website["Website"]
end

node_reader(("Reader"))
node_agent(("Coding agent"))

node_reader -->|"opens"| node_website
node_website -->|"renders"| node_layout
node_layout -->|"loads metadata"| node_gallery_data
node_layout -->|"renders"| node_navigation
node_layout -->|"provides UI"| node_sidebar
node_layout -->|"renders route"| node_example_index
node_navigation -->|"serializes filters"| node_filter_logic
node_navigation -->|"uses tags"| node_tag_filter
node_navigation -->|"links to examples"| node_example_index
node_example_index -->|"uses gallery data"| node_gallery_data
node_example_page -.->|"presents demo"| node_example_demo
node_agent -->|"reads"| node_catalog_files
node_catalog_builder -->|"renders documents"| node_catalog_renderer
node_catalog_builder -->|"writes"| node_catalog_files
node_catalog_builder -->|"reads metadata"| node_gallery_data

click node_gallery_data "https://github.com/pmndrs/examples/blob/main/apps/website/lib/helper.ts"
click node_example_index "https://github.com/pmndrs/examples/blob/main/apps/website/app/page.tsx"
click node_navigation "https://github.com/pmndrs/examples/blob/main/apps/website/components/Nav.tsx"
click node_filter_logic "https://github.com/pmndrs/examples/blob/main/apps/website/lib/filters.ts"
click node_tag_filter "https://github.com/pmndrs/examples/blob/main/apps/website/components/TagFilterProvider.tsx"
click node_catalog_builder "https://github.com/pmndrs/examples/blob/main/bin/build-catalog.mjs"
click node_catalog_renderer "https://github.com/pmndrs/examples/blob/main/bin/lib/render.mjs"
click node_catalog_files "https://github.com/pmndrs/examples/tree/main/apps/website/public"
click node_layout "https://github.com/pmndrs/examples/blob/main/apps/website/app/layout.tsx"
click node_sidebar "https://github.com/pmndrs/examples/blob/main/apps/website/components/ui/sidebar.tsx"
click node_website "https://github.com/pmndrs/examples/tree/main/apps/website/app"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_gallery_data,node_example_index,node_example_page,node_navigation,node_filter_logic,node_tag_filter,node_example_demo toneBlue
class node_catalog_builder,node_catalog_renderer,node_catalog_files toneAmber
class node_layout,node_sidebar,node_website toneMint
class node_reader,node_agent toneIndigo
```

## Components

### Example gallery

- [Gallery metadata](https://github.com/pmndrs/examples/blob/main/apps/website/lib/helper.ts): `apps/website/lib/helper.ts`
- [Gallery page](https://github.com/pmndrs/examples/blob/main/apps/website/app/page.tsx): `apps/website/app/page.tsx`
- **Example page**
- [Search and filters](https://github.com/pmndrs/examples/blob/main/apps/website/components/Nav.tsx): `apps/website/components/Nav.tsx`
- [Filter utilities](https://github.com/pmndrs/examples/blob/main/apps/website/lib/filters.ts): `apps/website/lib/filters.ts`
- [Tag filtering](https://github.com/pmndrs/examples/blob/main/apps/website/components/TagFilterProvider.tsx): `apps/website/components/TagFilterProvider.tsx`
- **Example demo**

### Agent catalog

- [Catalog exporter](https://github.com/pmndrs/examples/blob/main/bin/build-catalog.mjs): `bin/build-catalog.mjs`
- [Markdown renderer](https://github.com/pmndrs/examples/blob/main/bin/lib/render.mjs): `bin/lib/render.mjs`
- [Static catalog files](https://github.com/pmndrs/examples/tree/main/apps/website/public): `apps/website/public`

### Website shell

- [Site layout](https://github.com/pmndrs/examples/blob/main/apps/website/app/layout.tsx): `apps/website/app/layout.tsx`
- [Sidebar UI](https://github.com/pmndrs/examples/blob/main/apps/website/components/ui/sidebar.tsx): `apps/website/components/ui/sidebar.tsx`
- [Website](https://github.com/pmndrs/examples/tree/main/apps/website/app): `apps/website/app`

### Other components

- **Reader**
- **Coding agent**

## Connections

- Reader → Website: opens
- Website → Site layout: renders
- Site layout → Gallery metadata: loads metadata
- Site layout → Search and filters: renders
- Site layout → Sidebar UI: provides UI
- Site layout → Gallery page: renders route
- Search and filters → Filter utilities: serializes filters
- Search and filters → Tag filtering: uses tags
- Search and filters → Gallery page: links to examples
- Gallery page → Gallery metadata: uses gallery data
- Example page → Example demo: presents demo
- Coding agent → Static catalog files: reads
- Catalog exporter → Markdown renderer: renders documents
- Catalog exporter → Static catalog files: writes
- Catalog exporter → Gallery metadata: reads metadata