# nervjs/taro architecture

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

- Interactive diagram: https://gitdiagram.com/nervjs/taro
- Repository: https://github.com/nervjs/taro

## Overview

Taro is an open cross-platform, cross-framework application solution. Developers create or configure an app, then compile it for web, mini-program, HarmonyOS, or React Native and run it with target-specific runtimes and APIs. The tree also shows JSX/CSS transforms, shared components, and project-graph analysis as distinct capabilities. The README establishes the broad multi-target workflow; sampled files confirm selected runtime and compiler behavior. Several platform adapters and compiler internals are unsampled, so their connections are marked unverified rather than asserted.

Main entry points: [`packages/taro-vite-runner/src/mini/pipeline.ts`](https://github.com/nervjs/taro/blob/main/packages/taro-vite-runner/src/mini/pipeline.ts) (Vite Mini Pipeline), [`packages/taro-cli/src/cli.ts`](https://github.com/nervjs/taro/blob/main/packages/taro-cli/src/cli.ts) (Taro CLI), [`packages/babel-preset-taro/index.js`](https://github.com/nervjs/taro/blob/main/packages/babel-preset-taro/index.js) (Babel Preset), [`packages/project-graph/src/schema.ts`](https://github.com/nervjs/taro/blob/main/packages/project-graph/src/schema.ts) (Project Graph)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_project["Project Setup"]
  node_cli["Taro CLI<br/>[cli.ts]"]
  node_create["Project Creation"]
  node_config["App Configuration<br/>[index.ts]"]
end

subgraph group_compile["Compilation"]
  node_preset["Babel Preset<br/>[index.js]"]
  node_jsx["JSX Transforms<br/>[index.js]"]
  node_style["CSS Transforms<br/>[index.js]"]
  node_viteh5["Vite H5 Pipeline<br/>[pipeline.ts]"]
  node_vitemini["Vite Mini Pipeline<br/>[pipeline.ts]"]
  node_viteharmony["Vite Harmony Pipeline<br/>[pipeline.ts]"]
  node_loader["Webpack App Loader<br/>[app.ts]"]
  node_alipay["Alipay Adapter<br/>[program.ts]"]
  node_weapp["WeChat Adapter<br/>[program.ts]"]
  node_ascf["ASCF Adapter<br/>[program.ts]"]
end

subgraph group_runtime["Runtime"]
  node_h5api["H5 APIs<br/>[handler.ts]"]
  node_h5audio["Background Audio"]
  node_harmonyfiles["Harmony Files<br/>[manager.ts]"]
  node_cppfiles["Harmony C++ Files<br/>[manager.ts]"]
  node_storage["Harmony Storage Cache"]
  node_rnapp["React Native App<br/>[app.tsx]"]
  node_components["Advanced Components"]
end

subgraph group_analysis["Project Analysis"]
  node_projectgraph["Project Graph<br/>[schema.ts]"]
  node_graphquery["Graph Query API<br/>[query.ts]"]
end

node_developer(("Developer"))

node_developer -.->|"creates app"| node_cli
node_cli -.->|"offers creation"| node_create
node_cli -.->|"configures project"| node_config
node_developer -.->|"authors source"| node_preset
node_preset -.->|"configures transforms"| node_jsx
node_developer -.->|"writes styles"| node_style
node_developer -.->|"builds for web"| node_viteh5
node_developer -.->|"builds mini-app"| node_vitemini
node_developer -.->|"builds Harmony app"| node_viteharmony
node_developer -.->|"builds app"| node_loader
node_vitemini -.->|"targets platform"| node_alipay
node_vitemini -.->|"targets platform"| node_weapp
node_vitemini -.->|"targets platform"| node_ascf
node_h5audio -->|"uses callbacks"| node_h5api
node_developer -.->|"uses APIs"| node_h5api
node_developer -.->|"uses APIs"| node_harmonyfiles
node_developer -.->|"uses APIs"| node_cppfiles
node_developer -.->|"uses APIs"| node_storage
node_developer -.->|"runs app"| node_rnapp
node_developer -.->|"uses components"| node_components
node_developer -.->|"analyzes project"| node_projectgraph
node_projectgraph -->|"defines query types"| node_graphquery

click node_cli "https://github.com/nervjs/taro/blob/main/packages/taro-cli/src/cli.ts"
click node_create "https://github.com/nervjs/taro/tree/main/packages/taro-cli/src/create"
click node_config "https://github.com/nervjs/taro/blob/main/packages/taro-cli/src/config/index.ts"
click node_preset "https://github.com/nervjs/taro/blob/main/packages/babel-preset-taro/index.js"
click node_jsx "https://github.com/nervjs/taro/blob/main/packages/babel-plugin-transform-solid-jsx/src/index.js"
click node_style "https://github.com/nervjs/taro/blob/main/packages/css-to-react-native/src/index.js"
click node_viteh5 "https://github.com/nervjs/taro/blob/main/packages/taro-vite-runner/src/h5/pipeline.ts"
click node_vitemini "https://github.com/nervjs/taro/blob/main/packages/taro-vite-runner/src/mini/pipeline.ts"
click node_viteharmony "https://github.com/nervjs/taro/blob/main/packages/taro-vite-runner/src/harmony/pipeline.ts"
click node_loader "https://github.com/nervjs/taro/blob/main/packages/taro-loader/src/app.ts"
click node_alipay "https://github.com/nervjs/taro/blob/main/packages/taro-platform-alipay/src/program.ts"
click node_weapp "https://github.com/nervjs/taro/blob/main/packages/taro-platform-weapp/src/program.ts"
click node_ascf "https://github.com/nervjs/taro/blob/main/packages/taro-platform-ascf/src/program.ts"
click node_h5api "https://github.com/nervjs/taro/blob/main/packages/taro-h5/src/utils/handler.ts"
click node_h5audio "https://github.com/nervjs/taro/blob/main/packages/taro-h5/src/api/media/background-audio/BackgroundAudioManager.ts"
click node_harmonyfiles "https://github.com/nervjs/taro/blob/main/packages/taro-platform-harmony/src/apis/files/manager.ts"
click node_cppfiles "https://github.com/nervjs/taro/blob/main/packages/taro-platform-harmony-cpp/src/runtime/apis/files/manager.ts"
click node_storage "https://github.com/nervjs/taro/blob/main/packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/StorageCacheAndSyncProxy.ts"
click node_rnapp "https://github.com/nervjs/taro/blob/main/packages/taro-runtime-rn/src/app.tsx"
click node_components "https://github.com/nervjs/taro/tree/main/packages/taro-components-advanced/src/components"
click node_projectgraph "https://github.com/nervjs/taro/blob/main/packages/project-graph/src/schema.ts"
click node_graphquery "https://github.com/nervjs/taro/blob/main/packages/project-graph/src/query.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_create,node_config toneBlue
class node_preset,node_jsx,node_style,node_viteh5,node_vitemini,node_viteharmony,node_loader,node_alipay,node_weapp,node_ascf toneAmber
class node_h5api,node_h5audio,node_harmonyfiles,node_cppfiles,node_storage,node_rnapp,node_components toneMint
class node_projectgraph,node_graphquery toneRose
class node_developer toneIndigo
```

## Components

### Project Setup

- [Taro CLI](https://github.com/nervjs/taro/blob/main/packages/taro-cli/src/cli.ts): `packages/taro-cli/src/cli.ts`
- [Project Creation](https://github.com/nervjs/taro/tree/main/packages/taro-cli/src/create): `packages/taro-cli/src/create`
- [App Configuration](https://github.com/nervjs/taro/blob/main/packages/taro-cli/src/config/index.ts): `packages/taro-cli/src/config/index.ts`

### Compilation

- [Babel Preset](https://github.com/nervjs/taro/blob/main/packages/babel-preset-taro/index.js): `packages/babel-preset-taro/index.js`
- [JSX Transforms](https://github.com/nervjs/taro/blob/main/packages/babel-plugin-transform-solid-jsx/src/index.js): `packages/babel-plugin-transform-solid-jsx/src/index.js`
- [CSS Transforms](https://github.com/nervjs/taro/blob/main/packages/css-to-react-native/src/index.js): `packages/css-to-react-native/src/index.js`
- [Vite H5 Pipeline](https://github.com/nervjs/taro/blob/main/packages/taro-vite-runner/src/h5/pipeline.ts): `packages/taro-vite-runner/src/h5/pipeline.ts`
- [Vite Mini Pipeline](https://github.com/nervjs/taro/blob/main/packages/taro-vite-runner/src/mini/pipeline.ts): `packages/taro-vite-runner/src/mini/pipeline.ts`
- [Vite Harmony Pipeline](https://github.com/nervjs/taro/blob/main/packages/taro-vite-runner/src/harmony/pipeline.ts): `packages/taro-vite-runner/src/harmony/pipeline.ts`
- [Webpack App Loader](https://github.com/nervjs/taro/blob/main/packages/taro-loader/src/app.ts): `packages/taro-loader/src/app.ts`
- [Alipay Adapter](https://github.com/nervjs/taro/blob/main/packages/taro-platform-alipay/src/program.ts): `packages/taro-platform-alipay/src/program.ts`
- [WeChat Adapter](https://github.com/nervjs/taro/blob/main/packages/taro-platform-weapp/src/program.ts): `packages/taro-platform-weapp/src/program.ts`
- [ASCF Adapter](https://github.com/nervjs/taro/blob/main/packages/taro-platform-ascf/src/program.ts): `packages/taro-platform-ascf/src/program.ts`

### Runtime

- [H5 APIs](https://github.com/nervjs/taro/blob/main/packages/taro-h5/src/utils/handler.ts): `packages/taro-h5/src/utils/handler.ts`
- [Background Audio](https://github.com/nervjs/taro/blob/main/packages/taro-h5/src/api/media/background-audio/BackgroundAudioManager.ts): `packages/taro-h5/src/api/media/background-audio/BackgroundAudioManager.ts`
- [Harmony Files](https://github.com/nervjs/taro/blob/main/packages/taro-platform-harmony/src/apis/files/manager.ts): `packages/taro-platform-harmony/src/apis/files/manager.ts`
- [Harmony C++ Files](https://github.com/nervjs/taro/blob/main/packages/taro-platform-harmony-cpp/src/runtime/apis/files/manager.ts): `packages/taro-platform-harmony-cpp/src/runtime/apis/files/manager.ts`
- [Harmony Storage Cache](https://github.com/nervjs/taro/blob/main/packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/StorageCacheAndSyncProxy.ts): `packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/StorageCacheAndSyncProxy.ts`
- [React Native App](https://github.com/nervjs/taro/blob/main/packages/taro-runtime-rn/src/app.tsx): `packages/taro-runtime-rn/src/app.tsx`
- [Advanced Components](https://github.com/nervjs/taro/tree/main/packages/taro-components-advanced/src/components): `packages/taro-components-advanced/src/components`

### Project Analysis

- [Project Graph](https://github.com/nervjs/taro/blob/main/packages/project-graph/src/schema.ts): `packages/project-graph/src/schema.ts`
- [Graph Query API](https://github.com/nervjs/taro/blob/main/packages/project-graph/src/query.ts): `packages/project-graph/src/query.ts`

### Other components

- **Developer**

## Connections

- Developer → Taro CLI: creates app (evidence: `README.md`)
- Taro CLI → Project Creation: offers creation
- Taro CLI → App Configuration: configures project
- Developer → Babel Preset: authors source (evidence: `README.md`)
- Babel Preset → JSX Transforms: configures transforms
- Developer → CSS Transforms: writes styles (evidence: `README.md`)
- Developer → Vite H5 Pipeline: builds for web (evidence: `README.md`)
- Developer → Vite Mini Pipeline: builds mini-app (evidence: `README.md`)
- Developer → Vite Harmony Pipeline: builds Harmony app (evidence: `README.md`)
- Developer → Webpack App Loader: builds app (evidence: `README.md`)
- Vite Mini Pipeline → Alipay Adapter: targets platform
- Vite Mini Pipeline → WeChat Adapter: targets platform
- Vite Mini Pipeline → ASCF Adapter: targets platform
- Background Audio → H5 APIs: uses callbacks (evidence: `packages/taro-h5/src/api/media/background-audio/BackgroundAudioManager.ts`)
- Developer → H5 APIs: uses APIs (evidence: `README.md`)
- Developer → Harmony Files: uses APIs (evidence: `README.md`)
- Developer → Harmony C++ Files: uses APIs (evidence: `README.md`)
- Developer → Harmony Storage Cache: uses APIs (evidence: `README.md`)
- Developer → React Native App: runs app (evidence: `README.md`)
- Developer → Advanced Components: uses components (evidence: `README.md`)
- Developer → Project Graph: analyzes project
- Project Graph → Graph Query API: defines query types (evidence: `packages/project-graph/src/query.ts`)