# tencent/libpag architecture

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

- Interactive diagram: https://gitdiagram.com/tencent/libpag
- Repository: https://github.com/tencent/libpag

## Overview

libpag is a cross-platform animation runtime and toolchain for Portable Animated Graphics. The documented workflow begins with an After Effects designer exporting a PAG file, continues with an application loading and rendering it through the SDK, and supports runtime edits such as replacing text or images. PAGViewer previews files and reports performance; the repository also exposes PAGX document APIs and command-line tooling. The graph combines README-documented flows with source-index relationships and sampled calls; unsampled implementation details are not inferred.

Main entry points: [`include/pag/pag.h`](https://github.com/tencent/libpag/blob/main/include/pag/pag.h) (PAG SDK), [`viewer/src/main.cpp`](https://github.com/tencent/libpag/blob/main/viewer/src/main.cpp) (PAGViewer), [`exporter/src/export/PAGExport.cpp`](https://github.com/tencent/libpag/blob/main/exporter/src/export/PAGExport.cpp) (PAGExporter), [`include/pag/file.h`](https://github.com/tencent/libpag/blob/main/include/pag/file.h) (PAG file model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Authoring and export"]
  node_exporter["PAGExporter<br/>[PAGExport.cpp]"]
  node_export_ui["Exporter UI<br/>[WindowManager.cpp]"]
end

subgraph group_runtime["PAG runtime"]
  node_runtime_api["PAG SDK<br/>[pag.h]"]
  node_pag_file["PAG file model<br/>[file.h]"]
  node_renderer["Layer renderer<br/>[LayerBuilder.cpp]"]
  node_font_manager["Font manager<br/>[FontManager.cpp]"]
end

subgraph group_formats["PAGX and CLI"]
  node_pagx_document["PAGX document<br/>[PAGXDocument.h]"]
  node_pagx_cli["PAGX CLI<br/>[main.cpp]"]
  node_image_storage["Image storage<br/>[ImageStorage.cpp]"]
end

subgraph group_viewer["Preview applications"]
  node_viewer_app["PAGViewer<br/>[main.cpp]"]
  node_pag_view["PAG view<br/>[PAGView.h]"]
  node_pagx_view["PAGX view<br/>[PAGXView.h]"]
  node_profiling["Performance monitor"]
end

subgraph group_platforms["Platform integrations"]
  node_android_sdk["Android SDK<br/>[PAGView.java]"]
  node_web_sdk["Web SDK<br/>[backend-context.ts]"]
  node_web_video["Web video manager"]
  node_openharmony["OpenHarmony adapter"]
end

node_designer(("AE designer"))

node_designer -->|"authors animation"| node_exporter
node_exporter -->|"exports PAG"| node_pag_file
node_export_ui -.->|"opens export"| node_exporter
node_pag_file -->|"loaded by"| node_runtime_api
node_runtime_api -.->|"renders animation"| node_renderer
node_runtime_api -.->|"registers fonts"| node_font_manager
node_runtime_api -.->|"supports editing"| node_pagx_document
node_pagx_cli -->|"normalizes images"| node_image_storage
node_viewer_app -->|"registers view"| node_pag_view
node_viewer_app -->|"registers view"| node_pagx_view
node_viewer_app -->|"registers model"| node_profiling
node_viewer_app -->|"previews PAG"| node_pag_file
node_android_sdk -.->|"exposes SDK"| node_runtime_api
node_web_sdk -.->|"exposes SDK"| node_runtime_api
node_web_video -->|"reads video metadata"| node_runtime_api
node_openharmony -.->|"integrates runtime"| node_runtime_api

click node_exporter "https://github.com/tencent/libpag/blob/main/exporter/src/export/PAGExport.cpp"
click node_export_ui "https://github.com/tencent/libpag/blob/main/exporter/src/ui/WindowManager.cpp"
click node_runtime_api "https://github.com/tencent/libpag/blob/main/include/pag/pag.h"
click node_pag_file "https://github.com/tencent/libpag/blob/main/include/pag/file.h"
click node_renderer "https://github.com/tencent/libpag/blob/main/src/renderer/LayerBuilder.cpp"
click node_font_manager "https://github.com/tencent/libpag/blob/main/src/rendering/FontManager.cpp"
click node_pagx_document "https://github.com/tencent/libpag/blob/main/include/pagx/PAGXDocument.h"
click node_pagx_cli "https://github.com/tencent/libpag/blob/main/src/cli/main.cpp"
click node_image_storage "https://github.com/tencent/libpag/blob/main/src/cli/ImageStorage.cpp"
click node_viewer_app "https://github.com/tencent/libpag/blob/main/viewer/src/main.cpp"
click node_pag_view "https://github.com/tencent/libpag/blob/main/viewer/src/rendering/pag/PAGView.h"
click node_pagx_view "https://github.com/tencent/libpag/blob/main/viewer/src/rendering/pagx/PAGXView.h"
click node_profiling "https://github.com/tencent/libpag/blob/main/viewer/src/profiling/PAGRunTimeDataModel.h"
click node_android_sdk "https://github.com/tencent/libpag/blob/main/android/libpag/src/main/java/org/libpag/PAGView.java"
click node_web_sdk "https://github.com/tencent/libpag/blob/main/web/src/core/backend-context.ts"
click node_web_video "https://github.com/tencent/libpag/blob/main/web/src/video-reader-manager.ts"
click node_openharmony "https://github.com/tencent/libpag/blob/main/src/platform/ohos/XComponentHandler.cpp"

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_exporter,node_export_ui toneBlue
class node_runtime_api,node_pag_file,node_renderer,node_font_manager toneAmber
class node_pagx_document,node_pagx_cli,node_image_storage toneMint
class node_viewer_app,node_pag_view,node_pagx_view,node_profiling toneRose
class node_android_sdk,node_web_sdk,node_web_video,node_openharmony,node_designer toneIndigo
```

## Components

### Authoring and export

- [PAGExporter](https://github.com/tencent/libpag/blob/main/exporter/src/export/PAGExport.cpp): `exporter/src/export/PAGExport.cpp`
- [Exporter UI](https://github.com/tencent/libpag/blob/main/exporter/src/ui/WindowManager.cpp): `exporter/src/ui/WindowManager.cpp`

### PAG runtime

- [PAG SDK](https://github.com/tencent/libpag/blob/main/include/pag/pag.h): `include/pag/pag.h`
- [PAG file model](https://github.com/tencent/libpag/blob/main/include/pag/file.h): `include/pag/file.h`
- [Layer renderer](https://github.com/tencent/libpag/blob/main/src/renderer/LayerBuilder.cpp): `src/renderer/LayerBuilder.cpp`
- [Font manager](https://github.com/tencent/libpag/blob/main/src/rendering/FontManager.cpp): `src/rendering/FontManager.cpp`

### PAGX and CLI

- [PAGX document](https://github.com/tencent/libpag/blob/main/include/pagx/PAGXDocument.h): `include/pagx/PAGXDocument.h`
- [PAGX CLI](https://github.com/tencent/libpag/blob/main/src/cli/main.cpp): `src/cli/main.cpp`
- [Image storage](https://github.com/tencent/libpag/blob/main/src/cli/ImageStorage.cpp): `src/cli/ImageStorage.cpp`

### Preview applications

- [PAGViewer](https://github.com/tencent/libpag/blob/main/viewer/src/main.cpp): `viewer/src/main.cpp`
- [PAG view](https://github.com/tencent/libpag/blob/main/viewer/src/rendering/pag/PAGView.h): `viewer/src/rendering/pag/PAGView.h`
- [PAGX view](https://github.com/tencent/libpag/blob/main/viewer/src/rendering/pagx/PAGXView.h): `viewer/src/rendering/pagx/PAGXView.h`
- [Performance monitor](https://github.com/tencent/libpag/blob/main/viewer/src/profiling/PAGRunTimeDataModel.h): `viewer/src/profiling/PAGRunTimeDataModel.h`

### Platform integrations

- [Android SDK](https://github.com/tencent/libpag/blob/main/android/libpag/src/main/java/org/libpag/PAGView.java): `android/libpag/src/main/java/org/libpag/PAGView.java`
- [Web SDK](https://github.com/tencent/libpag/blob/main/web/src/core/backend-context.ts): `web/src/core/backend-context.ts`
- [Web video manager](https://github.com/tencent/libpag/blob/main/web/src/video-reader-manager.ts): `web/src/video-reader-manager.ts`
- [OpenHarmony adapter](https://github.com/tencent/libpag/blob/main/src/platform/ohos/XComponentHandler.cpp): `src/platform/ohos/XComponentHandler.cpp`

### Other components

- **AE designer**

## Connections

- AE designer → PAGExporter: authors animation (evidence: `README.md`)
- PAGExporter → PAG file model: exports PAG (evidence: `README.md`)
- Exporter UI → PAGExporter: opens export
- PAG file model → PAG SDK: loaded by (evidence: `README.md`)
- PAG SDK → Layer renderer: renders animation
- PAG SDK → Font manager: registers fonts
- PAG SDK → PAGX document: supports editing
- PAGX CLI → Image storage: normalizes images (evidence: `src/cli/ImageStorage.cpp`)
- PAGViewer → PAG view: registers view (evidence: `viewer/src/main.cpp`)
- PAGViewer → PAGX view: registers view (evidence: `viewer/src/main.cpp`)
- PAGViewer → Performance monitor: registers model (evidence: `viewer/src/main.cpp`)
- PAGViewer → PAG file model: previews PAG (evidence: `README.md`)
- Android SDK → PAG SDK: exposes SDK (evidence: `README.md`)
- Web SDK → PAG SDK: exposes SDK (evidence: `README.md`)
- Web video manager → PAG SDK: reads video metadata
- OpenHarmony adapter → PAG SDK: integrates runtime (evidence: `README.md`)