What Programming Languages Does Astryx Use? A Complete Technical Breakdown

Astryx uses TypeScript as its primary language for component development, supplemented by JavaScript for build tooling, CSS/StyleX for styling, JSON for configuration, Markdown for documentation, and Shell scripts for repository maintenance.

Astryx is Facebook's modern design system built on the Node.js ecosystem. Understanding what programming languages Astryx uses helps developers contribute effectively and integrate the library into their own projects. This guide breaks down each language's role with direct references to the source code in the facebook/astryx repository.

Primary Language: TypeScript

TypeScript dominates the Astryx codebase. Every UI component, utility, and type definition is written in .ts or .tsx files.

Where TypeScript Appears

• packages/core/src/CheckboxInput/CheckboxInput.tsx — Core input component with full type safety
• packages/charts/src/Chart.tsx — Complex data visualization component
• packages/themes/y2k/theme.css.d.ts — Type definitions for CSS themes

Why Astryx Uses TypeScript

TypeScript provides static typing, improved IDE support, and clear API contracts for component consumers. The facebook/astryx source enforces strict typing across all public interfaces.

// packages/core/src/CheckboxInput/CheckboxInput.tsx pattern
import { stylex } from '@stylexjs/stylex';
import { Button } from '@astryxdesign/core';

export function PrimaryButton() {
  const classes = stylex.create({
    root: { padding: '8px 16px', backgroundColor: 'var(--color-primary)' },
  });

  return <Button className={classes.root}>Click me</Button>;
}

Supporting Language: JavaScript

JavaScript handles runtime scripts where TypeScript compilation adds unnecessary overhead.

Where JavaScript Appears

• packages/build/src/index.js — Vite-based build pipeline entry point
• packages/charts/babel.config.js — Babel transformation configuration
• CLI helpers and utility scripts

JavaScript Usage Pattern

// packages/build/src/index.js
const { build } = require('vite');
const path = require('path');

build({
  root: path.resolve(__dirname, '../../packages/core'),
  outDir: 'dist',
});

Astryx uses plain JavaScript for Node.js tooling to avoid the build-step bootstrapping problem.

Styling Languages: CSS and StyleX

Astryx implements its visual layer through a combination of standard CSS and StyleX, Facebook's CSS-in-JS solution.

CSS and StyleX Locations

• packages/themes/y2k/theme.css.d.ts — Theme type definitions
• packages/themes/y2k/src/y2kTheme.ts — Theme token definitions

StyleX Theme Definition

// packages/themes/y2k/src/y2kTheme.ts
import { stylex } from '@stylexjs/stylex';

export const y2kTheme = stylex.defineTheme({
  colors: {
    primary: '#ff3e00',
    background: '#fff',
  },
});

StyleX compiles to native CSS at build time, eliminating runtime style injection overhead.

Configuration and Data: JSON

JSON files appear throughout Astryx for package management and tool configuration.

Key JSON Files

• package.json in every workspace package — dependencies, scripts, metadata
• tsconfig.json — TypeScript compiler configuration
• lerna.json — Monorepo management settings

The root package.json ties together all workspace packages in the monorepo structure.

Documentation: Markdown

Markdown powers all human-readable documentation in Astryx.

Markdown Locations

• README.md — Primary developer documentation
• docs/*.md — Extended guides and API references
• CHANGELOG.md — Version history

Automation: Shell Scripts

Shell scripts handle repository maintenance tasks that don't require Node.js.

Shell Script Example

• scripts/prune-branches.sh — Removes stale Git branches

#!/bin/bash

# scripts/prune-branches.sh

git fetch --prune
git branch -vv | grep ': gone]' | awk '{print $1}' | xargs -r git branch -d

Language Distribution Summary

Language	File Extensions	Primary Purpose	Example Path
TypeScript	.ts, .tsx	Components, utilities, types	packages/core/src/CheckboxInput/CheckboxInput.tsx
JavaScript	.js, .mjs	Build scripts, configs	packages/build/src/index.js
CSS/StyleX	.css, .stylex.ts	Visual styling	packages/themes/y2k/src/y2kTheme.ts
JSON	.json	Package manifests, configs	package.json
Markdown	.md	Documentation	README.md
Shell	.sh	Repository automation	scripts/prune-branches.sh

Language Version and Tooling Context

Astryx targets modern Node.js environments. The package.json files specify:

• TypeScript: Strict mode enabled with comprehensive compiler checks
• JavaScript: ES2020+ features in source, transpiled for compatibility
• StyleX: Compiled to static CSS bundles at build time

The build pipeline in packages/build/src/index.js uses Vite for fast development and optimized production builds.

Summary

• TypeScript is the primary language for all component and utility code in Astryx
• JavaScript handles build tooling and scripts where compilation overhead is undesirable
• CSS/StyleX provides the styling layer with compile-time optimization
• JSON configures packages and tools across the monorepo
• Markdown documents the system for developers
• Shell automates repository maintenance tasks

This language stack gives Astryx type safety and developer experience without sacrificing runtime performance or ecosystem compatibility.

Frequently Asked Questions

Is Astryx written entirely in TypeScript?

No. While TypeScript is the dominant language for components and utilities, Astryx uses JavaScript for build scripts, CSS/StyleX for styling, JSON for configuration, Markdown for documentation, and Shell for automation. The split follows practical concerns: TypeScript where type safety matters most, other languages where simplicity suffices.

What is StyleX and how does Astryx use it?

StyleX is Facebook's CSS-in-JS library that Astryx uses for component styling. Unlike runtime CSS-in-JS solutions, StyleX compiles to static CSS files. In Astryx, themes are defined in TypeScript files like packages/themes/y2k/src/y2kTheme.ts and processed into native CSS at build time.

Can I use Astryx components in a JavaScript project?

Yes. Astryx publishes compiled JavaScript outputs from its TypeScript source. Consumers receive fully-typed declarations but can integrate components into any JavaScript or TypeScript project. The package.json in each published package points to pre-built dist/ artifacts.

Why does Astryx use JavaScript for build scripts instead of TypeScript?

JavaScript avoids the bootstrapping problem. Build scripts must run without prior compilation. Using JavaScript for packages/build/src/index.js and similar tooling eliminates the need to compile the compiler before use, simplifying the development workflow and CI/CD pipelines.

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