Astryx Roadmap: Development Plans for Meta's Open-Source Design System

The Astryx roadmap outlines a quarterly release strategy focused on expanding the component library with 50+ new elements, introducing AI-powered prompt-to-component generation, stabilizing charting packages, and delivering a visual theme authoring interface.

The Astryx repository (facebook/astryx) provides a styling-agnostic, open-source design system that prioritizes open internals and AI-fluent tooling. According to the source code and planning documents, the project maintains a public roadmap targeting significant enhancements across core components, theming, CLI workflows, and artificial intelligence integration. The following sections detail the technical milestones planned for upcoming releases.

Core Component Expansion

The roadmap targets adding approximately 50 new components to the existing library, including complex elements like data grids and rich-text editors. These additions follow the established open-internals architecture located in packages/core/src/.

Component Architecture

New components automatically integrate with the existing CLI infrastructure. As implemented in facebook/astryx, components reside under packages/core/src/ and expose themselves through commands like astryx component --list. The open-internals convention ensures every component remains customizable at the implementation level.

Accessibility Automation

Future releases will introduce automated a11y-manifest generation and expanded accessibility test coverage. This automation ensures that new components meet accessibility standards without manual documentation overhead, maintaining parity with the existing component-doc-mjs format used throughout the repository.

Theme System Evolution

Visual Theme Authoring

The roadmap includes a theme authoring UI that allows designers to tweak design tokens without writing code. This tool builds upon the existing static token bundles found in packages/themes/*, such as neutral, butter, and gothic. The UI will generate valid token configurations compatible with the current ThemeProvider API.

Runtime Dynamic Theming

Support for dynamic runtime theming is planned, enabling features like instant dark-mode switching. The implementation will utilize a lightweight provider pattern already partially described in the core README, allowing applications to switch themes without page reloads by updating CSS custom properties defined in the token bundles.

CLI and Developer Experience Enhancements

Interactive Scaffolding

The CLI located in packages/cli/ will expand beyond its current command set (component, template, swizzle) to support interactive scaffolding. This feature will prompt developers for component variants and automatically generate complete example pages, reducing boilerplate setup time.

Automated Upgrade Migrations

Future versions will enhance the astryx upgrade command with additional codemods for handling breaking changes. These automated migrations will help teams transition between major versions by transforming existing component usage patterns to match updated APIs.

AI-Fluent Tooling

Prompt-to-Component Generation

A flagship roadmap feature includes natural-language component generation. Developers will run commands like npm run astryx -- generate "a searchable dropdown with keyboard shortcuts" to receive fully typed TypeScript components complete with StyleX styling and accessibility attributes. This functionality parses plain English UI specifications and outputs production-ready code to src/components/.

Vibe-Tests Validation

The internal/vibe-tests/ directory contains a testing harness that will validate AI-generated output. According to the source analysis, this framework continuously evaluates AI-generated components to ensure they meet quality standards before integration. The roadmap extends this harness to support prompt-to-component benchmarking.

Data Visualization Stability

The roadmap promotes @astryxdesign/charts and @astryxdesign/vega from experimental @canary distribution tags to stable releases. Located in packages/charts/ and packages/vega/, these packages will receive higher-level chart composition APIs and full TypeScript typings. The stabilization ensures data visualization components meet the same AI-fluent standards as core elements.

Documentation and Testing Infrastructure

Component Documentation Automation

The project will automate migration of component documentation into the component-doc-mjs format (*.doc.mjs files). This automation extracts JSDoc comments from component source code to generate living documentation, ensuring API references remain synchronized with implementation details.

Vitest Coverage Expansion

Quality milestones target 90%+ Vitest coverage across all packages. This includes unit tests for the CLI, theme utilities, and the vibe-tests harness itself, ensuring reliability as the toolchain expands.

Release Cadence and Public Roadmap

Astryx will adopt a quarterly release schedule (Q1, Q2, Q3, Q4) with visible planning documents. The CLI template at packages/cli/templates/pages/shell-side-nav/page.tsx already contains a placeholder entry for "Q3 roadmap draft" (line 74), indicating that roadmap visibility will integrate directly into the CLI's navigational interface and help output.

Summary

• Component Growth: Approximately 50 new components targeting data grids and rich-text editors, located in packages/core/src/.
• AI Integration: Prompt-to-component generation utilizing the internal/vibe-tests/ harness for validation.
• Theming Tools: Visual token editor and runtime theme switching via ThemeProvider.
• Stabilization: Promotion of packages/charts/ and packages/vega/ from @canary to stable releases.
• Developer Experience: Enhanced astryx upgrade migrations and interactive scaffolding in packages/cli/.
• Release Schedule: Quarterly cycles with public roadmap visibility through CLI templates.

Frequently Asked Questions

What is the Astryx release schedule?

Astryx follows a quarterly release cycle (Q1, Q2, Q3, Q4). The project maintains a public roadmap draft that will be kept up-to-date, with references already appearing in the CLI template at packages/cli/templates/pages/shell-side-nav/page.tsx.

How does Astryx plan to support AI-assisted development?

The roadmap includes prompt-to-component generation that converts natural language descriptions into TypeScript components with StyleX styling. These AI-generated components are validated against the internal/vibe-tests/ framework to ensure quality and consistency with the design system's standards.

Which packages are moving from experimental to stable?

The @astryxdesign/charts and @astryxdesign/vega packages, currently located in packages/charts/ and packages/vega/ under the @canary distribution tag, will be promoted to stable releases. They will receive full TypeScript support and higher-level composition APIs.

Where can I find the public roadmap documentation?

The roadmap is referenced within the CLI template system at packages/cli/templates/pages/shell-side-nav/page.tsx, which contains a stub for "Q3 roadmap draft." Future updates will render the roadmap directly within the CLI's navigational UI, making version planning visible to all contributors.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}