How meta/astryx works
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: cli CLI Commands · listReorderEngine.tsx List Reordering · docsite/src Documentation Site · core/src Components And Hooks
Components 18
Core Design System
- Components And Hooks
packages/core/src - List Reordering
packages/core/src/List/listReorderEngine.tsx - Layer Hook
packages/core/src/Layer/useLayer.tsx - Announcements
packages/core/src/hooks/useAnnounce.ts - Theme Tokens
packages/core/src/theme/tokens.stylex.ts
CLI Authoring
- CLI Commands
packages/cli - Doc Syntax
packages/cli/foundation/doc-compiler/doc-syntax.mjs - Doc Links
packages/cli/foundation/doc-compiler/links.mjs - Package Manager Detection
packages/cli/foundation/env/package-manager.mjs
Themes
- Ready-Made Themes
packages/themes
Docs And Sandbox
- Documentation Site
apps/docsite/src - Search Route
apps/docsite/src/app/api/search/route.ts - MCP Search And Get
apps/docsite/src/app/mcp/route.ts - Code Playground
apps/docsite/src/app/playground - Preview Frame
apps/docsite/src/app/playground/usePreviewFrame.tsx - Interactive Sandbox
apps/sandbox/src - Sandbox Entry
apps/sandbox/src/main.tsx
Other components
- Developer / Agent
Connections 15
- Developer / Agent → Documentation Site: explores docs
README.md - Developer / Agent → CLI Commands: runs commands
README.md - Developer / Agent → Components And Hooks: builds interfaces
README.md - Components And Hooks → Ready-Made Themes: accepts customization
README.md - CLI Commands → Doc Syntax: compiles docs
packages/cli/foundation/env/package-manager.mjs - CLI Commands → Doc Links: resolves links
packages/cli/api/search/_query.mjs - CLI Commands → Package Manager Detection: detects manager
packages/cli/foundation/env/package-manager.mjs - List Reordering → Layer Hook: uses layer hook
packages/core/src/List/listReorderEngine.tsx - List Reordering → Announcements: announces changes
packages/core/src/List/listReorderEngine.tsx - List Reordering → Theme Tokens: reads tokens
packages/core/src/List/listReorderEngine.tsx - Search Route → Documentation Site: serves search
apps/docsite/src/app/api/search/route.ts - MCP Search And Get → Documentation Site: serves tools
apps/docsite/src/app/mcp/route.ts - Code Playground → Preview Frame: manages preview
apps/docsite/src/app/playground/usePreviewFrame.tsx - Sandbox Entry → Interactive Sandbox: loads routes
apps/sandbox/src/main.tsx - Developer / Agent → Interactive Sandbox: explores components
README.md