# xrplf/xrpl-dev-portal architecture

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

- Interactive diagram: https://gitdiagram.com/xrplf/xrpl-dev-portal
- Repository: https://github.com/xrplf/xrpl-dev-portal

## Overview

The repository is the XRP Ledger Dev Portal: a documentation website with tutorials, reference material, and runnable code examples. A reader’s main workflow is to navigate documentation, follow a tutorial or select a language-specific example, and use that guidance with XRP Ledger software or networks. The tree supports the portal’s theme components, Markdoc integration, content plugins, blog template, and broad sample corpus. Most page content and component implementations were not sampled, so the graph shows documented capabilities and only conservative, evident connections.

Main entry points: [`@theme/components/Navbar/Navbar.tsx`](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/Navbar/Navbar.tsx) (Navigation bar), [`@theme/markdoc/components.tsx`](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/markdoc/components.tsx) (Markdoc integration), [`_code-samples`](https://github.com/xrplf/xrpl-dev-portal/tree/master/_code-samples) (Code sample corpus), [`_code-samples/quickstart`](https://github.com/xrplf/xrpl-dev-portal/tree/master/_code-samples/quickstart) (Tutorial examples)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Site navigation"]
  node_navbar["Navigation bar<br/>[Navbar.tsx]"]
  node_nav_items["Navigation items<br/>[NavItems.tsx]"]
  node_mobile_menu["Mobile menu<br/>[MobileMenu.tsx]"]
  node_submenus["Topic submenus<br/>[index.ts]"]
end

subgraph group_content["Documentation experience"]
  node_docs_content["Documentation pages"]
  node_markdown_links["Documentation links<br/>[MarkdownLink.tsx]"]
  node_language_picker["Language picker<br/>[LanguagePicker.tsx]"]
  node_interactive_code["Interactive examples"]
  node_synced_tabs["Synced tabs<br/>[SyncedTabs.tsx]"]
end

subgraph group_content_processing["Content processing"]
  node_markdoc["Markdoc integration<br/>[components.tsx]"]
  node_markdoc_schema["Markdoc schema<br/>[schema.ts]"]
  node_theme_plugin["Theme plugin<br/>[plugin.js]"]
  node_code_samples_plugin["Code sample plugin<br/>[code-samples.js]"]
  node_tutorial_plugins["Tutorial metadata"]
  node_blog_plugin["Blog posts plugin<br/>[blog-posts.js]"]
  node_blog_template["Blog template<br/>[blogpost.tsx]"]
end

subgraph group_examples["Tutorials and examples"]
  node_sample_corpus["Code sample corpus"]
  node_tutorial_samples["Tutorial examples"]
end

node_reader(("Reader"))
node_xrpl_network{{"XRP Ledger network"}}

node_reader -->|"uses"| node_navbar
node_reader -->|"reads"| node_docs_content
node_navbar -->|"renders"| node_nav_items
node_navbar -->|"offers"| node_mobile_menu
node_navbar -->|"renders"| node_submenus
node_docs_content -->|"renders links"| node_markdown_links
node_docs_content -->|"offers language choice"| node_language_picker
node_docs_content -->|"offers examples"| node_interactive_code
node_docs_content -->|"offers tabs"| node_synced_tabs
node_theme_plugin -->|"integrates"| node_markdoc
node_markdoc -->|"uses schema"| node_markdoc_schema
node_code_samples_plugin -->|"processes samples"| node_sample_corpus
node_tutorial_plugins -->|"supports tutorials"| node_tutorial_samples
node_blog_plugin -->|"provides posts"| node_blog_template
node_tutorial_samples -.->|"demonstrate interactions"| node_xrpl_network
node_sample_corpus -.->|"demonstrates usage"| node_xrpl_network

click node_navbar "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/Navbar/Navbar.tsx"
click node_nav_items "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/Navbar/components/NavItems.tsx"
click node_mobile_menu "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/Navbar/mobile-menu/MobileMenu.tsx"
click node_submenus "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/Navbar/submenus/index.ts"
click node_markdown_links "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/MarkdownLink.tsx"
click node_language_picker "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/LanguagePicker/LanguagePicker.tsx"
click node_interactive_code "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/InteractiveBlock.tsx"
click node_synced_tabs "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/SyncedTabs.tsx"
click node_markdoc "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/markdoc/components.tsx"
click node_markdoc_schema "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/markdoc/schema.ts"
click node_theme_plugin "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/plugin.js"
click node_code_samples_plugin "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/plugins/code-samples.js"
click node_tutorial_plugins "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/plugins/tutorial-metadata.js"
click node_blog_plugin "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/plugins/blog-posts.js"
click node_blog_template "https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/templates/blogpost.tsx"
click node_sample_corpus "https://github.com/xrplf/xrpl-dev-portal/tree/master/_code-samples"
click node_tutorial_samples "https://github.com/xrplf/xrpl-dev-portal/tree/master/_code-samples/quickstart"

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_navbar,node_nav_items,node_mobile_menu,node_submenus toneBlue
class node_docs_content,node_markdown_links,node_language_picker,node_interactive_code,node_synced_tabs toneAmber
class node_markdoc,node_markdoc_schema,node_theme_plugin,node_code_samples_plugin,node_tutorial_plugins,node_blog_plugin,node_blog_template toneMint
class node_sample_corpus,node_tutorial_samples toneRose
class node_reader,node_xrpl_network toneIndigo
```

## Components

### Site navigation

- [Navigation bar](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/Navbar/Navbar.tsx): `@theme/components/Navbar/Navbar.tsx`
- [Navigation items](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/Navbar/components/NavItems.tsx): `@theme/components/Navbar/components/NavItems.tsx`
- [Mobile menu](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/Navbar/mobile-menu/MobileMenu.tsx): `@theme/components/Navbar/mobile-menu/MobileMenu.tsx`
- [Topic submenus](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/Navbar/submenus/index.ts): `@theme/components/Navbar/submenus/index.ts`

### Documentation experience

- **Documentation pages**
- [Documentation links](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/MarkdownLink.tsx): `@theme/components/MarkdownLink.tsx`
- [Language picker](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/LanguagePicker/LanguagePicker.tsx): `@theme/components/LanguagePicker/LanguagePicker.tsx`
- [Interactive examples](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/InteractiveBlock.tsx): `@theme/components/InteractiveBlock.tsx`
- [Synced tabs](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/components/SyncedTabs.tsx): `@theme/components/SyncedTabs.tsx`

### Content processing

- [Markdoc integration](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/markdoc/components.tsx): `@theme/markdoc/components.tsx`
- [Markdoc schema](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/markdoc/schema.ts): `@theme/markdoc/schema.ts`
- [Theme plugin](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/plugin.js): `@theme/plugin.js`
- [Code sample plugin](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/plugins/code-samples.js): `@theme/plugins/code-samples.js`
- [Tutorial metadata](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/plugins/tutorial-metadata.js): `@theme/plugins/tutorial-metadata.js`
- [Blog posts plugin](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/plugins/blog-posts.js): `@theme/plugins/blog-posts.js`
- [Blog template](https://github.com/xrplf/xrpl-dev-portal/blob/master/%40theme/templates/blogpost.tsx): `@theme/templates/blogpost.tsx`

### Tutorials and examples

- [Code sample corpus](https://github.com/xrplf/xrpl-dev-portal/tree/master/_code-samples): `_code-samples`
- [Tutorial examples](https://github.com/xrplf/xrpl-dev-portal/tree/master/_code-samples/quickstart): `_code-samples/quickstart`

### Other components

- **Reader**
- **XRP Ledger network**

## Connections

- Reader → Navigation bar: uses
- Reader → Documentation pages: reads
- Navigation bar → Navigation items: renders
- Navigation bar → Mobile menu: offers
- Navigation bar → Topic submenus: renders
- Documentation pages → Documentation links: renders links
- Documentation pages → Language picker: offers language choice
- Documentation pages → Interactive examples: offers examples
- Documentation pages → Synced tabs: offers tabs
- Theme plugin → Markdoc integration: integrates
- Markdoc integration → Markdoc schema: uses schema
- Code sample plugin → Code sample corpus: processes samples
- Tutorial metadata → Tutorial examples: supports tutorials
- Blog posts plugin → Blog template: provides posts
- Tutorial examples → XRP Ledger network: demonstrate interactions
- Code sample corpus → XRP Ledger network: demonstrates usage