# mdn/content architecture

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

- Interactive diagram: https://gitdiagram.com/mdn/content
- Repository: https://github.com/mdn/content

## Overview

MDN Web Docs is a collaborative documentation project: readers use its articles and learning resources to understand web technologies, while contributors create and update that content. The tree shows reference material, a glossary, game-development guidance, and structured web-development lessons. The package scripts configure Fred to serve the content for local preview and Rari to process it, establishing a basic content-to-preview/build workflow. The README describes broader reference and learning goals; the supplied tree is a partial view, and the content files themselves were not sampled.

Main entry points: [`files/en-us`](https://github.com/mdn/content/tree/main/files/en-us) (Web reference), [`files/en-us/games`](https://github.com/mdn/content/tree/main/files/en-us/games) (Game development), [`files/en-us/learn_web_development/core`](https://github.com/mdn/content/tree/main/files/en-us/learn_web_development/core) (Core learning modules), [`files/en-us/learn_web_development`](https://github.com/mdn/content/tree/main/files/en-us/learn_web_development) (Web development learning)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Documentation content"]
  node_reference["Web reference"]
  node_glossary["Technology glossary"]
  node_games["Game development"]
  node_game_techniques["Game techniques"]
  node_game_publishing["Game publishing"]
end

subgraph group_learning["Learning resources"]
  node_learning_root["Web development learning"]
  node_learning_core["Core learning modules"]
  node_accessibility["Accessibility lessons"]
  node_css_layout["CSS layout lessons"]
end

subgraph group_delivery["Content delivery"]
  node_fred["Fred preview server<br/>[package.json]"]
  node_rari["Rari content processor<br/>[package.json]"]
end

node_reader(("Reader"))
node_contributor(("Contributor"))

node_contributor -->|"authors content"| node_reference
node_contributor -->|"authors lessons"| node_learning_root
node_reader -->|"requests preview"| node_fred
node_fred -->|"serves content"| node_reference
node_rari -->|"processes content"| node_reference
node_reference -->|"includes terms"| node_glossary
node_reference -->|"includes guidance"| node_games
node_games -->|"covers techniques"| node_game_techniques
node_games -->|"covers publishing"| node_game_publishing
node_learning_root -->|"organizes lessons"| node_learning_core
node_learning_core -->|"includes lessons"| node_accessibility
node_learning_core -->|"includes lessons"| node_css_layout

click node_reference "https://github.com/mdn/content/tree/main/files/en-us"
click node_glossary "https://github.com/mdn/content/tree/main/files/en-us/glossary"
click node_games "https://github.com/mdn/content/tree/main/files/en-us/games"
click node_game_techniques "https://github.com/mdn/content/tree/main/files/en-us/games/techniques"
click node_game_publishing "https://github.com/mdn/content/tree/main/files/en-us/games/publishing_games"
click node_learning_root "https://github.com/mdn/content/tree/main/files/en-us/learn_web_development"
click node_learning_core "https://github.com/mdn/content/tree/main/files/en-us/learn_web_development/core"
click node_accessibility "https://github.com/mdn/content/tree/main/files/en-us/learn_web_development/core/accessibility"
click node_css_layout "https://github.com/mdn/content/tree/main/files/en-us/learn_web_development/core/css_layout"
click node_fred "https://github.com/mdn/content/blob/main/package.json"
click node_rari "https://github.com/mdn/content/blob/main/package.json"

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_reference,node_glossary,node_games,node_game_techniques,node_game_publishing toneBlue
class node_learning_root,node_learning_core,node_accessibility,node_css_layout toneAmber
class node_fred,node_rari toneMint
class node_reader,node_contributor toneIndigo
```

## Components

### Documentation content

- [Web reference](https://github.com/mdn/content/tree/main/files/en-us): `files/en-us`
- [Technology glossary](https://github.com/mdn/content/tree/main/files/en-us/glossary): `files/en-us/glossary`
- [Game development](https://github.com/mdn/content/tree/main/files/en-us/games): `files/en-us/games`
- [Game techniques](https://github.com/mdn/content/tree/main/files/en-us/games/techniques): `files/en-us/games/techniques`
- [Game publishing](https://github.com/mdn/content/tree/main/files/en-us/games/publishing_games): `files/en-us/games/publishing_games`

### Learning resources

- [Web development learning](https://github.com/mdn/content/tree/main/files/en-us/learn_web_development): `files/en-us/learn_web_development`
- [Core learning modules](https://github.com/mdn/content/tree/main/files/en-us/learn_web_development/core): `files/en-us/learn_web_development/core`
- [Accessibility lessons](https://github.com/mdn/content/tree/main/files/en-us/learn_web_development/core/accessibility): `files/en-us/learn_web_development/core/accessibility`
- [CSS layout lessons](https://github.com/mdn/content/tree/main/files/en-us/learn_web_development/core/css_layout): `files/en-us/learn_web_development/core/css_layout`

### Content delivery

- [Fred preview server](https://github.com/mdn/content/blob/main/package.json): `package.json`
- [Rari content processor](https://github.com/mdn/content/blob/main/package.json): `package.json`

### Other components

- **Reader**
- **Contributor**

## Connections

- Contributor → Web reference: authors content
- Contributor → Web development learning: authors lessons
- Reader → Fred preview server: requests preview
- Fred preview server → Web reference: serves content
- Rari content processor → Web reference: processes content
- Web reference → Technology glossary: includes terms
- Web reference → Game development: includes guidance
- Game development → Game techniques: covers techniques
- Game development → Game publishing: covers publishing
- Web development learning → Core learning modules: organizes lessons
- Core learning modules → Accessibility lessons: includes lessons
- Core learning modules → CSS layout lessons: includes lessons