# lynx-family/lynx architecture

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

- Interactive diagram: https://gitdiagram.com/lynx-family/lynx
- Repository: https://github.com/lynx-family/lynx

## Overview

Lynx is a cross-platform UI engine: an embedding application loads a template, the engine updates and lays out the page, and a rendering backend produces native UI. The README also describes native Android/iOS/web targets and a custom renderer; this tree samples Clay rendering and some platform adapters, but not the full template/runtime or web implementations. The graph therefore includes documented capabilities while limiting detailed wiring to relationships supported by the excerpts.

Main entry points: [`core/shell/lynx_engine.cc`](https://github.com/lynx-family/lynx/blob/develop/core/shell/lynx_engine.cc) (LynxEngine), [`clay/shell/common/engine.cc`](https://github.com/lynx-family/lynx/blob/develop/clay/shell/common/engine.cc) (Clay Engine), [`core/renderer/pipeline`](https://github.com/lynx-family/lynx/tree/develop/core/renderer/pipeline) (Element and layout), [`clay/ui/gesture/drag_drop_manager.cc`](https://github.com/lynx-family/lynx/blob/develop/clay/ui/gesture/drag_drop_manager.cc) (Drag and drop)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_engine["Engine and pipeline"]
  node_lynx_engine["LynxEngine<br/>[lynx_engine.cc]"]
  node_template["Template processing"]
  node_pipeline_context["Pipeline context"]
  node_element_layout["Element and layout"]
end

subgraph group_render["Rendering"]
  node_clay_engine["Clay Engine<br/>[engine.cc]"]
  node_layer_tree["Layer tree<br/>[layer_tree.h]"]
  node_compositor["Compositor"]
  node_graphics["Graphics backend<br/>[gl_api.h]"]
  node_drag_drop["Drag and drop"]
end

subgraph group_platform["Platform integration"]
  node_android_proxy["Android engine proxy"]
  node_ios_list["iOS list UI"]
  node_ios_cache["iOS cell cache"]
  node_windows_engine["Windows engine"]
end

subgraph group_foundation["Runtime foundation"]
  node_task_runtime["Task runtime<br/>[task_runner.h]"]
  node_values["Value types<br/>[base_value.h]"]
end

subgraph group_observability["Diagnostics"]
  node_tracing["Tracing<br/>[trace_controller.h]"]
  node_logging["Logging<br/>[logging.h]"]
end

node_app(("Embedding app"))
node_native_targets(("Native platforms"))
node_web_target(("Web target"))

node_app -->|"loads template"| node_lynx_engine
node_lynx_engine -->|"loads and updates"| node_template
node_lynx_engine -->|"requests layout"| node_element_layout
node_lynx_engine -->|"sets pipeline options"| node_pipeline_context
node_lynx_engine -->|"dispatches tasks"| node_task_runtime
node_pipeline_context -->|"tracks lifecycle"| node_element_layout
node_lynx_engine -->|"exposes engine calls"| node_android_proxy
node_android_proxy -->|"dispatches callbacks"| node_lynx_engine
node_ios_list -.->|"manages list cells"| node_ios_cache
node_app -->|"embeds renderer"| node_clay_engine
node_clay_engine -->|"begins frame"| node_layer_tree
node_clay_engine -->|"rasterizes frames"| node_compositor
node_compositor -->|"uses graphics"| node_graphics
node_drag_drop -->|"builds event data"| node_values
node_drag_drop -->|"routes by view"| node_element_layout
node_windows_engine -->|"hosts engine"| node_clay_engine
node_native_targets -->|"runs natively"| node_lynx_engine
node_native_targets -.->|"uses custom renderer"| node_clay_engine
node_web_target -.->|"shares codebase"| node_app
node_lynx_engine -->|"emits trace events"| node_tracing
node_lynx_engine -.->|"logs diagnostics"| node_logging

click node_lynx_engine "https://github.com/lynx-family/lynx/blob/develop/core/shell/lynx_engine.cc"
click node_template "https://github.com/lynx-family/lynx/tree/develop/core/renderer/pipeline"
click node_pipeline_context "https://github.com/lynx-family/lynx/tree/develop/core/renderer/pipeline"
click node_element_layout "https://github.com/lynx-family/lynx/tree/develop/core/renderer/pipeline"
click node_clay_engine "https://github.com/lynx-family/lynx/blob/develop/clay/shell/common/engine.cc"
click node_layer_tree "https://github.com/lynx-family/lynx/blob/develop/clay/flow/layers/layer_tree.h"
click node_graphics "https://github.com/lynx-family/lynx/blob/develop/clay/common/graphics/gl/gl_api.h"
click node_drag_drop "https://github.com/lynx-family/lynx/blob/develop/clay/ui/gesture/drag_drop_manager.cc"
click node_android_proxy "https://github.com/lynx-family/lynx/blob/develop/core/shell/android/lynx_engine_proxy_android.cc"
click node_ios_list "https://github.com/lynx-family/lynx/blob/develop/platform/darwin/ios/lynx/public/ui/list/list_light/ui/LynxUIListScrollManager.h"
click node_ios_cache "https://github.com/lynx-family/lynx/blob/develop/platform/darwin/ios/lynx/ui/list/list_light/view/LynxListCachedCellManager.h"
click node_windows_engine "https://github.com/lynx-family/lynx/blob/develop/clay/shell/platform/windows/flutter_windows_engine.cc"
click node_task_runtime "https://github.com/lynx-family/lynx/blob/develop/base/include/fml/task_runner.h"
click node_values "https://github.com/lynx-family/lynx/blob/develop/base/include/value/base_value.h"
click node_tracing "https://github.com/lynx-family/lynx/blob/develop/base/trace/native/trace_controller.h"
click node_logging "https://github.com/lynx-family/lynx/blob/develop/base/include/log/logging.h"

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_lynx_engine,node_template,node_pipeline_context,node_element_layout toneBlue
class node_clay_engine,node_layer_tree,node_compositor,node_graphics,node_drag_drop toneAmber
class node_android_proxy,node_ios_list,node_ios_cache,node_windows_engine toneMint
class node_task_runtime,node_values toneRose
class node_tracing,node_logging,node_app,node_native_targets,node_web_target toneIndigo
```

## Components

### Engine and pipeline

- [LynxEngine](https://github.com/lynx-family/lynx/blob/develop/core/shell/lynx_engine.cc): `core/shell/lynx_engine.cc`
- [Template processing](https://github.com/lynx-family/lynx/tree/develop/core/renderer/pipeline): `core/renderer/pipeline`
- [Pipeline context](https://github.com/lynx-family/lynx/tree/develop/core/renderer/pipeline): `core/renderer/pipeline`
- [Element and layout](https://github.com/lynx-family/lynx/tree/develop/core/renderer/pipeline): `core/renderer/pipeline`

### Rendering

- [Clay Engine](https://github.com/lynx-family/lynx/blob/develop/clay/shell/common/engine.cc): `clay/shell/common/engine.cc`
- [Layer tree](https://github.com/lynx-family/lynx/blob/develop/clay/flow/layers/layer_tree.h): `clay/flow/layers/layer_tree.h`
- **Compositor**
- [Graphics backend](https://github.com/lynx-family/lynx/blob/develop/clay/common/graphics/gl/gl_api.h): `clay/common/graphics/gl/gl_api.h`
- [Drag and drop](https://github.com/lynx-family/lynx/blob/develop/clay/ui/gesture/drag_drop_manager.cc): `clay/ui/gesture/drag_drop_manager.cc`

### Platform integration

- [Android engine proxy](https://github.com/lynx-family/lynx/blob/develop/core/shell/android/lynx_engine_proxy_android.cc): `core/shell/android/lynx_engine_proxy_android.cc`
- [iOS list UI](https://github.com/lynx-family/lynx/blob/develop/platform/darwin/ios/lynx/public/ui/list/list_light/ui/LynxUIListScrollManager.h): `platform/darwin/ios/lynx/public/ui/list/list_light/ui/LynxUIListScrollManager.h`
- [iOS cell cache](https://github.com/lynx-family/lynx/blob/develop/platform/darwin/ios/lynx/ui/list/list_light/view/LynxListCachedCellManager.h): `platform/darwin/ios/lynx/ui/list/list_light/view/LynxListCachedCellManager.h`
- [Windows engine](https://github.com/lynx-family/lynx/blob/develop/clay/shell/platform/windows/flutter_windows_engine.cc): `clay/shell/platform/windows/flutter_windows_engine.cc`

### Runtime foundation

- [Task runtime](https://github.com/lynx-family/lynx/blob/develop/base/include/fml/task_runner.h): `base/include/fml/task_runner.h`
- [Value types](https://github.com/lynx-family/lynx/blob/develop/base/include/value/base_value.h): `base/include/value/base_value.h`

### Diagnostics

- [Tracing](https://github.com/lynx-family/lynx/blob/develop/base/trace/native/trace_controller.h): `base/trace/native/trace_controller.h`
- [Logging](https://github.com/lynx-family/lynx/blob/develop/base/include/log/logging.h): `base/include/log/logging.h`

### Other components

- **Embedding app**
- **Native platforms**
- **Web target**

## Connections

- Embedding app → LynxEngine: loads template
- LynxEngine → Template processing: loads and updates
- LynxEngine → Element and layout: requests layout
- LynxEngine → Pipeline context: sets pipeline options
- LynxEngine → Task runtime: dispatches tasks
- Pipeline context → Element and layout: tracks lifecycle
- LynxEngine → Android engine proxy: exposes engine calls
- Android engine proxy → LynxEngine: dispatches callbacks
- iOS list UI → iOS cell cache: manages list cells
- Embedding app → Clay Engine: embeds renderer
- Clay Engine → Layer tree: begins frame
- Clay Engine → Compositor: rasterizes frames
- Compositor → Graphics backend: uses graphics
- Drag and drop → Value types: builds event data
- Drag and drop → Element and layout: routes by view
- Windows engine → Clay Engine: hosts engine
- Native platforms → LynxEngine: runs natively
- Native platforms → Clay Engine: uses custom renderer
- Web target → Embedding app: shares codebase
- LynxEngine → Tracing: emits trace events
- LynxEngine → Logging: logs diagnostics