# What Programming Languages Does Astryx Use? A Complete Technical Breakdown

> Discover the programming languages powering Astryx. Learn about TypeScript, JavaScript, CSS, JSON, Markdown, and Shell scripts used in the facebook/astryx repository. Get the full technical details.

- Repository: [Meta/astryx](https://github.com/facebook/astryx)
- Tags: deep-dive
- Published: 2026-08-03

---

**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`](https://github.com/facebook/astryx/blob/main/packages/core/src/CheckboxInput/CheckboxInput.tsx)** — Core input component with full type safety
- **[`packages/charts/src/Chart.tsx`](https://github.com/facebook/astryx/blob/main/packages/charts/src/Chart.tsx)** — Complex data visualization component
- **[`packages/themes/y2k/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/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.

```tsx
// 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`](https://github.com/facebook/astryx/blob/main/packages/build/src/index.js)** — Vite-based build pipeline entry point
- **[`packages/charts/babel.config.js`](https://github.com/facebook/astryx/blob/main/packages/charts/babel.config.js)** — Babel transformation configuration
- CLI helpers and utility scripts

### JavaScript Usage Pattern

```js
// 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`](https://github.com/facebook/astryx/blob/main/packages/themes/y2k/theme.css.d.ts)** — Theme type definitions
- **[`packages/themes/y2k/src/y2kTheme.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/y2k/src/y2kTheme.ts)** — Theme token definitions

### StyleX Theme Definition

```tsx
// 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`](https://github.com/facebook/astryx/blob/main/package.json)** in every workspace package — dependencies, scripts, metadata
- **[`tsconfig.json`](https://github.com/facebook/astryx/blob/main/tsconfig.json)** — TypeScript compiler configuration
- **[`lerna.json`](https://github.com/facebook/astryx/blob/main/lerna.json)** — Monorepo management settings

The root [`package.json`](https://github.com/facebook/astryx/blob/main/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`](https://github.com/facebook/astryx/blob/main/README.md)** — Primary developer documentation
- **`docs/*.md`** — Extended guides and API references
- **[`CHANGELOG.md`](https://github.com/facebook/astryx/blob/main/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`](https://github.com/facebook/astryx/blob/main/scripts/prune-branches.sh)** — Removes stale Git branches

```bash
#!/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`](https://github.com/facebook/astryx/blob/main/packages/core/src/CheckboxInput/CheckboxInput.tsx) |
| **JavaScript** | `.js`, `.mjs` | Build scripts, configs | [`packages/build/src/index.js`](https://github.com/facebook/astryx/blob/main/packages/build/src/index.js) |
| **CSS/StyleX** | `.css`, [`.stylex.ts`](https://github.com/facebook/astryx/blob/main/.stylex.ts) | Visual styling | [`packages/themes/y2k/src/y2kTheme.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/y2k/src/y2kTheme.ts) |
| **JSON** | `.json` | Package manifests, configs | [`package.json`](https://github.com/facebook/astryx/blob/main/package.json) |
| **Markdown** | `.md` | Documentation | [`README.md`](https://github.com/facebook/astryx/blob/main/README.md) |
| **Shell** | `.sh` | Repository automation | [`scripts/prune-branches.sh`](https://github.com/facebook/astryx/blob/main/scripts/prune-branches.sh) |

## Language Version and Tooling Context

Astryx targets modern Node.js environments. The [`package.json`](https://github.com/facebook/astryx/blob/main/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`](https://github.com/facebook/astryx/blob/main/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`](https://github.com/facebook/astryx/blob/main/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`](https://github.com/facebook/astryx/blob/main/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`](https://github.com/facebook/astryx/blob/main/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.