# microsoft/rnx-kit architecture

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

- Interactive diagram: https://gitdiagram.com/microsoft/rnx-kit
- Repository: https://github.com/microsoft/rnx-kit

## Overview

rnx-kit is a monorepo of React Native developer tools, not one application with a single runtime pipeline. A typical workflow starts with a project developer invoking a CLI or package: dependency alignment checks project manifests against presets, while bundling and build tools help prepare and run apps. Other branches enhance Metro, configure Babel, and provide diagnostics. The README documents these capabilities, but sampled source is limited; connections between the broader CLI and individual tools are therefore not inferred.

Main entry points: [`packages/align-deps/src/commands/check.ts`](https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/commands/check.ts) (Compatibility checks), [`packages/align-deps/src/cli.ts`](https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/cli.ts) (align-deps CLI), [`packages/align-deps/src/index.ts`](https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/index.ts) (Dependency alignment), [`packages/cli/src/bundle.ts`](https://github.com/microsoft/rnx-kit/blob/main/packages/cli/src/bundle.ts) (Bundle workflow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Developer entry points"]
  node_cli["rnx CLI<br/>[rnx-cli.ts]"]
  node_aligncli["align-deps CLI<br/>[cli.ts]"]
end

subgraph group_dependencies["Dependency management"]
  node_align["Dependency alignment<br/>[index.ts]"]
  node_aligncheck["Compatibility checks<br/>[check.ts]"]
  node_alignpreset["Version presets<br/>[react-native.ts]"]
  node_manifests["Project manifests<br/>[manifest.ts]"]
end

subgraph group_build["Build and bundling"]
  node_nativebuild["Native build<br/>[build.ts]"]
  node_bundle["Bundle workflow<br/>[bundle.ts]"]
  node_metroservice["Metro service<br/>[index.ts]"]
  node_metroserver["Dev server<br/>[server.ts]"]
  node_babelpreset["Metro Babel preset<br/>[index.js]"]
end

subgraph group_extensions["Metro extensions"]
  node_serializer["Metro serializer<br/>[index.ts]"]
  node_typescriptplugin["TypeScript validation<br/>[index.ts]"]
  node_duplicates["Duplicate detection<br/>[index.ts]"]
  node_cycles["Cycle detection<br/>[index.ts]"]
  node_bundlecompare["Bundle comparison<br/>[index.ts]"]
end

node_developer(("Project developer"))

node_developer -->|"runs"| node_cli
node_developer -->|"runs"| node_aligncli
node_developer -->|"uses"| node_nativebuild
node_developer -->|"uses"| node_bundle
node_developer -->|"uses"| node_serializer
node_developer -->|"uses"| node_bundlecompare
node_aligncli -->|"invokes"| node_align
node_align -->|"runs checks"| node_aligncheck
node_aligncheck -->|"checks"| node_manifests
node_aligncheck -->|"uses preset"| node_alignpreset
node_bundle -->|"uses"| node_metroservice
node_metroservice -->|"starts"| node_metroserver
node_developer -->|"configures"| node_babelpreset
node_developer -->|"enables"| node_typescriptplugin
node_developer -->|"enables"| node_duplicates
node_developer -->|"enables"| node_cycles

click node_cli "https://github.com/microsoft/rnx-kit/blob/main/packages/cli/src/bin/rnx-cli.ts"
click node_aligncli "https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/cli.ts"
click node_align "https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/index.ts"
click node_aligncheck "https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/commands/check.ts"
click node_alignpreset "https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/presets/microsoft/react-native.ts"
click node_manifests "https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/manifest.ts"
click node_nativebuild "https://github.com/microsoft/rnx-kit/blob/main/packages/cli/src/build.ts"
click node_bundle "https://github.com/microsoft/rnx-kit/blob/main/packages/cli/src/bundle.ts"
click node_metroservice "https://github.com/microsoft/rnx-kit/blob/main/packages/metro-service/src/index.ts"
click node_metroserver "https://github.com/microsoft/rnx-kit/blob/main/packages/metro-service/src/server.ts"
click node_babelpreset "https://github.com/microsoft/rnx-kit/blob/main/packages/babel-preset-metro-react-native/src/index.js"
click node_serializer "https://github.com/microsoft/rnx-kit/blob/main/packages/metro-serializer/src/index.ts"
click node_typescriptplugin "https://github.com/microsoft/rnx-kit/blob/main/packages/metro-plugin-typescript/src/index.ts"
click node_duplicates "https://github.com/microsoft/rnx-kit/blob/main/packages/metro-plugin-duplicates-checker/src/index.ts"
click node_cycles "https://github.com/microsoft/rnx-kit/blob/main/packages/metro-plugin-cyclic-dependencies-detector/src/index.ts"
click node_bundlecompare "https://github.com/microsoft/rnx-kit/blob/main/packages/bundle-diff/src/index.ts"

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_cli,node_aligncli toneBlue
class node_align,node_aligncheck,node_alignpreset,node_manifests toneAmber
class node_nativebuild,node_bundle,node_metroservice,node_metroserver,node_babelpreset toneMint
class node_serializer,node_typescriptplugin,node_duplicates,node_cycles,node_bundlecompare toneRose
class node_developer toneIndigo
```

## Components

### Developer entry points

- [rnx CLI](https://github.com/microsoft/rnx-kit/blob/main/packages/cli/src/bin/rnx-cli.ts): `packages/cli/src/bin/rnx-cli.ts`
- [align-deps CLI](https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/cli.ts): `packages/align-deps/src/cli.ts`

### Dependency management

- [Dependency alignment](https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/index.ts): `packages/align-deps/src/index.ts`
- [Compatibility checks](https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/commands/check.ts): `packages/align-deps/src/commands/check.ts`
- [Version presets](https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/presets/microsoft/react-native.ts): `packages/align-deps/src/presets/microsoft/react-native.ts`
- [Project manifests](https://github.com/microsoft/rnx-kit/blob/main/packages/align-deps/src/manifest.ts): `packages/align-deps/src/manifest.ts`

### Build and bundling

- [Native build](https://github.com/microsoft/rnx-kit/blob/main/packages/cli/src/build.ts): `packages/cli/src/build.ts`
- [Bundle workflow](https://github.com/microsoft/rnx-kit/blob/main/packages/cli/src/bundle.ts): `packages/cli/src/bundle.ts`
- [Metro service](https://github.com/microsoft/rnx-kit/blob/main/packages/metro-service/src/index.ts): `packages/metro-service/src/index.ts`
- [Dev server](https://github.com/microsoft/rnx-kit/blob/main/packages/metro-service/src/server.ts): `packages/metro-service/src/server.ts`
- [Metro Babel preset](https://github.com/microsoft/rnx-kit/blob/main/packages/babel-preset-metro-react-native/src/index.js): `packages/babel-preset-metro-react-native/src/index.js`

### Metro extensions

- [Metro serializer](https://github.com/microsoft/rnx-kit/blob/main/packages/metro-serializer/src/index.ts): `packages/metro-serializer/src/index.ts`
- [TypeScript validation](https://github.com/microsoft/rnx-kit/blob/main/packages/metro-plugin-typescript/src/index.ts): `packages/metro-plugin-typescript/src/index.ts`
- [Duplicate detection](https://github.com/microsoft/rnx-kit/blob/main/packages/metro-plugin-duplicates-checker/src/index.ts): `packages/metro-plugin-duplicates-checker/src/index.ts`
- [Cycle detection](https://github.com/microsoft/rnx-kit/blob/main/packages/metro-plugin-cyclic-dependencies-detector/src/index.ts): `packages/metro-plugin-cyclic-dependencies-detector/src/index.ts`
- [Bundle comparison](https://github.com/microsoft/rnx-kit/blob/main/packages/bundle-diff/src/index.ts): `packages/bundle-diff/src/index.ts`

### Other components

- **Project developer**

## Connections

- Project developer → rnx CLI: runs
- Project developer → align-deps CLI: runs
- Project developer → Native build: uses
- Project developer → Bundle workflow: uses
- Project developer → Metro serializer: uses
- Project developer → Bundle comparison: uses
- align-deps CLI → Dependency alignment: invokes
- Dependency alignment → Compatibility checks: runs checks
- Compatibility checks → Project manifests: checks
- Compatibility checks → Version presets: uses preset
- Bundle workflow → Metro service: uses
- Metro service → Dev server: starts
- Project developer → Metro Babel preset: configures
- Project developer → TypeScript validation: enables
- Project developer → Duplicate detection: enables
- Project developer → Cycle detection: enables