# meta/astryx architecture

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

- Interactive diagram: https://gitdiagram.com/meta/astryx
- Repository: https://github.com/meta/astryx

## Overview

Astryx is a React design system for engineers and AI assistants: developers explore its documentation, use the CLI and component APIs to build interfaces, and customize them with themes. Its principal product layers are the Core component and theme runtime, CLI authoring tools, ready-made themes, and the documentation and sandbox experiences. The README documents the package capabilities; sampled source confirms selected runtime and route relationships. Other subsystem connections are left unverified rather than inferred.

Main entry points: [`packages/cli`](https://github.com/meta/astryx/tree/main/packages/cli) (CLI Commands), [`packages/core/src/List/listReorderEngine.tsx`](https://github.com/meta/astryx/blob/main/packages/core/src/List/listReorderEngine.tsx) (List Reordering), [`apps/docsite/src`](https://github.com/meta/astryx/tree/main/apps/docsite/src) (Documentation Site), [`packages/core/src`](https://github.com/meta/astryx/tree/main/packages/core/src) (Components And Hooks)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Core Design System"]
  node_core_api["Components And Hooks"]
  node_reorder["List Reordering"]
  node_layer["Layer Hook<br/>[useLayer.tsx]"]
  node_announce["Announcements<br/>[useAnnounce.ts]"]
  node_tokens["Theme Tokens<br/>[tokens.stylex.ts]"]
end

subgraph group_cli["CLI Authoring"]
  node_cli["CLI Commands"]
  node_doc_syntax["Doc Syntax<br/>[doc-syntax.mjs]"]
  node_doc_links["Doc Links<br/>[links.mjs]"]
  node_pm_detect["Package Manager Detection"]
end

subgraph group_themes["Themes"]
  node_themes["Ready-Made Themes"]
end

subgraph group_experiences["Docs And Sandbox"]
  node_docsite["Documentation Site"]
  node_search_api["Search Route<br/>[route.ts]"]
  node_mcp["MCP Search And Get<br/>[route.ts]"]
  node_playground["Code Playground"]
  node_preview_frame["Preview Frame"]
  node_sandbox["Interactive Sandbox"]
  node_sandbox_entry["Sandbox Entry<br/>[main.tsx]"]
end

node_developer(("Developer / Agent"))

node_developer -->|"explores docs"| node_docsite
node_developer -->|"runs commands"| node_cli
node_developer -->|"builds interfaces"| node_core_api
node_core_api -->|"accepts customization"| node_themes
node_cli -.->|"compiles docs"| node_doc_syntax
node_cli -.->|"resolves links"| node_doc_links
node_cli -->|"detects manager"| node_pm_detect
node_reorder -->|"uses layer hook"| node_layer
node_reorder -->|"announces changes"| node_announce
node_reorder -.->|"reads tokens"| node_tokens
node_search_api -.->|"serves search"| node_docsite
node_mcp -.->|"serves tools"| node_docsite
node_playground -.->|"manages preview"| node_preview_frame
node_sandbox_entry -->|"loads routes"| node_sandbox
node_developer -->|"explores components"| node_sandbox

click node_core_api "https://github.com/meta/astryx/tree/main/packages/core/src"
click node_reorder "https://github.com/meta/astryx/blob/main/packages/core/src/List/listReorderEngine.tsx"
click node_layer "https://github.com/meta/astryx/blob/main/packages/core/src/Layer/useLayer.tsx"
click node_announce "https://github.com/meta/astryx/blob/main/packages/core/src/hooks/useAnnounce.ts"
click node_tokens "https://github.com/meta/astryx/blob/main/packages/core/src/theme/tokens.stylex.ts"
click node_cli "https://github.com/meta/astryx/tree/main/packages/cli"
click node_doc_syntax "https://github.com/meta/astryx/blob/main/packages/cli/foundation/doc-compiler/doc-syntax.mjs"
click node_doc_links "https://github.com/meta/astryx/blob/main/packages/cli/foundation/doc-compiler/links.mjs"
click node_pm_detect "https://github.com/meta/astryx/blob/main/packages/cli/foundation/env/package-manager.mjs"
click node_themes "https://github.com/meta/astryx/tree/main/packages/themes"
click node_docsite "https://github.com/meta/astryx/tree/main/apps/docsite/src"
click node_search_api "https://github.com/meta/astryx/blob/main/apps/docsite/src/app/api/search/route.ts"
click node_mcp "https://github.com/meta/astryx/blob/main/apps/docsite/src/app/mcp/route.ts"
click node_playground "https://github.com/meta/astryx/tree/main/apps/docsite/src/app/playground"
click node_preview_frame "https://github.com/meta/astryx/blob/main/apps/docsite/src/app/playground/usePreviewFrame.tsx"
click node_sandbox "https://github.com/meta/astryx/tree/main/apps/sandbox/src"
click node_sandbox_entry "https://github.com/meta/astryx/blob/main/apps/sandbox/src/main.tsx"

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_core_api,node_reorder,node_layer,node_announce,node_tokens toneBlue
class node_cli,node_doc_syntax,node_doc_links,node_pm_detect toneAmber
class node_themes toneMint
class node_docsite,node_search_api,node_mcp,node_playground,node_preview_frame,node_sandbox,node_sandbox_entry toneRose
class node_developer toneIndigo
```

## Components

### Core Design System

- [Components And Hooks](https://github.com/meta/astryx/tree/main/packages/core/src): `packages/core/src`
- [List Reordering](https://github.com/meta/astryx/blob/main/packages/core/src/List/listReorderEngine.tsx): `packages/core/src/List/listReorderEngine.tsx`
- [Layer Hook](https://github.com/meta/astryx/blob/main/packages/core/src/Layer/useLayer.tsx): `packages/core/src/Layer/useLayer.tsx`
- [Announcements](https://github.com/meta/astryx/blob/main/packages/core/src/hooks/useAnnounce.ts): `packages/core/src/hooks/useAnnounce.ts`
- [Theme Tokens](https://github.com/meta/astryx/blob/main/packages/core/src/theme/tokens.stylex.ts): `packages/core/src/theme/tokens.stylex.ts`

### CLI Authoring

- [CLI Commands](https://github.com/meta/astryx/tree/main/packages/cli): `packages/cli`
- [Doc Syntax](https://github.com/meta/astryx/blob/main/packages/cli/foundation/doc-compiler/doc-syntax.mjs): `packages/cli/foundation/doc-compiler/doc-syntax.mjs`
- [Doc Links](https://github.com/meta/astryx/blob/main/packages/cli/foundation/doc-compiler/links.mjs): `packages/cli/foundation/doc-compiler/links.mjs`
- [Package Manager Detection](https://github.com/meta/astryx/blob/main/packages/cli/foundation/env/package-manager.mjs): `packages/cli/foundation/env/package-manager.mjs`

### Themes

- [Ready-Made Themes](https://github.com/meta/astryx/tree/main/packages/themes): `packages/themes`

### Docs And Sandbox

- [Documentation Site](https://github.com/meta/astryx/tree/main/apps/docsite/src): `apps/docsite/src`
- [Search Route](https://github.com/meta/astryx/blob/main/apps/docsite/src/app/api/search/route.ts): `apps/docsite/src/app/api/search/route.ts`
- [MCP Search And Get](https://github.com/meta/astryx/blob/main/apps/docsite/src/app/mcp/route.ts): `apps/docsite/src/app/mcp/route.ts`
- [Code Playground](https://github.com/meta/astryx/tree/main/apps/docsite/src/app/playground): `apps/docsite/src/app/playground`
- [Preview Frame](https://github.com/meta/astryx/blob/main/apps/docsite/src/app/playground/usePreviewFrame.tsx): `apps/docsite/src/app/playground/usePreviewFrame.tsx`
- [Interactive Sandbox](https://github.com/meta/astryx/tree/main/apps/sandbox/src): `apps/sandbox/src`
- [Sandbox Entry](https://github.com/meta/astryx/blob/main/apps/sandbox/src/main.tsx): `apps/sandbox/src/main.tsx`

### Other components

- **Developer / Agent**

## Connections

- Developer / Agent → Documentation Site: explores docs (evidence: `README.md`)
- Developer / Agent → CLI Commands: runs commands (evidence: `README.md`)
- Developer / Agent → Components And Hooks: builds interfaces (evidence: `README.md`)
- Components And Hooks → Ready-Made Themes: accepts customization (evidence: `README.md`)
- CLI Commands → Doc Syntax: compiles docs (evidence: `packages/cli/foundation/env/package-manager.mjs`)
- CLI Commands → Doc Links: resolves links (evidence: `packages/cli/api/search/_query.mjs`)
- CLI Commands → Package Manager Detection: detects manager (evidence: `packages/cli/foundation/env/package-manager.mjs`)
- List Reordering → Layer Hook: uses layer hook (evidence: `packages/core/src/List/listReorderEngine.tsx`)
- List Reordering → Announcements: announces changes (evidence: `packages/core/src/List/listReorderEngine.tsx`)
- List Reordering → Theme Tokens: reads tokens (evidence: `packages/core/src/List/listReorderEngine.tsx`)
- Search Route → Documentation Site: serves search (evidence: `apps/docsite/src/app/api/search/route.ts`)
- MCP Search And Get → Documentation Site: serves tools (evidence: `apps/docsite/src/app/mcp/route.ts`)
- Code Playground → Preview Frame: manages preview (evidence: `apps/docsite/src/app/playground/usePreviewFrame.tsx`)
- Sandbox Entry → Interactive Sandbox: loads routes (evidence: `apps/sandbox/src/main.tsx`)
- Developer / Agent → Interactive Sandbox: explores components (evidence: `README.md`)