# rdkcentral/lightning architecture

> Architecture diagram of the GitHub repository rdkcentral/lightning, 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/rdkcentral/lightning
- Repository: https://github.com/rdkcentral/lightning

## Overview

Lightning is a portable, high-performance framework for building TV applications. The main workflow starts with an application receiving user input, managing a scene on a Stage, and rendering that scene through a graphics backend. The repository also exposes animation and transition timing, layout, textures and text/image handling, and reusable visual components and shaders. Source excerpts confirm application-to-stage construction, frame-driven animation managers, and texture-manager uploads; some Stage and renderer wiring is inferred from module responsibilities, so uncertain links are omitted.

Main entry points: [`src/renderer/Renderer.mjs`](https://github.com/rdkcentral/lightning/blob/master/src/renderer/Renderer.mjs) (Renderer), [`src/application/Application.mjs`](https://github.com/rdkcentral/lightning/blob/master/src/application/Application.mjs) (Application), [`src/tree/Stage.mjs`](https://github.com/rdkcentral/lightning/blob/master/src/tree/Stage.mjs) (Stage), [`src/tree/Element.mjs`](https://github.com/rdkcentral/lightning/blob/master/src/tree/Element.mjs) (Scene elements)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_application["Application<br/>[Application.mjs]"]
end

subgraph group_scene["Scene and motion"]
  node_stage["Stage<br/>[Stage.mjs]"]
  node_element["Scene elements<br/>[Element.mjs]"]
  node_flex["Flex layout<br/>[FlexLayout.mjs]"]
  node_animation["Animations"]
  node_transition["Transitions"]
end

subgraph group_assets["Content and assets"]
  node_texturemanager["Texture manager<br/>[TextureManager.mjs]"]
  node_textures["Texture types"]
  node_text["Text rendering"]
  node_imageworker["Image worker<br/>[ImageWorker.mjs]"]
end

subgraph group_graphics["Graphics"]
  node_components["Visual components"]
  node_renderer["Renderer<br/>[Renderer.mjs]"]
  node_webgl["WebGL backend<br/>[WebGLRenderer.mjs]"]
  node_canvas2d["Canvas 2D backend<br/>[C2dRenderer.mjs]"]
  node_shaders["Shaders"]
end

node_user(("TV app user"))
node_browser["Browser platform<br/>[WebPlatform.mjs]"]

node_user -->|"provides input"| node_application
node_application -->|"creates"| node_stage
node_application -->|"dispatches input"| node_element
node_stage -->|"emits frame start"| node_animation
node_stage -->|"emits frame start"| node_transition
node_element -->|"uses layout"| node_flex
node_texturemanager -->|"creates sources"| node_textures
node_texturemanager -->|"uploads textures"| node_renderer
node_text -.->|"uses browser APIs"| node_browser
node_imageworker -.->|"uses worker APIs"| node_browser
node_renderer -->|"selects backend"| node_webgl
node_renderer -->|"selects backend"| node_canvas2d
node_webgl -->|"runs shaders"| node_shaders
node_renderer -->|"renders to platform"| node_browser
node_components -->|"extends scene"| node_element

click node_application "https://github.com/rdkcentral/lightning/blob/master/src/application/Application.mjs"
click node_stage "https://github.com/rdkcentral/lightning/blob/master/src/tree/Stage.mjs"
click node_element "https://github.com/rdkcentral/lightning/blob/master/src/tree/Element.mjs"
click node_flex "https://github.com/rdkcentral/lightning/blob/master/src/flex/layout/FlexLayout.mjs"
click node_animation "https://github.com/rdkcentral/lightning/blob/master/src/animation/AnimationManager.mjs"
click node_transition "https://github.com/rdkcentral/lightning/blob/master/src/animation/TransitionManager.mjs"
click node_texturemanager "https://github.com/rdkcentral/lightning/blob/master/src/tree/TextureManager.mjs"
click node_textures "https://github.com/rdkcentral/lightning/tree/master/src/textures"
click node_text "https://github.com/rdkcentral/lightning/blob/master/src/textures/TextTextureRenderer.ts"
click node_imageworker "https://github.com/rdkcentral/lightning/blob/master/src/platforms/browser/ImageWorker.mjs"
click node_components "https://github.com/rdkcentral/lightning/tree/master/src/components"
click node_renderer "https://github.com/rdkcentral/lightning/blob/master/src/renderer/Renderer.mjs"
click node_webgl "https://github.com/rdkcentral/lightning/blob/master/src/renderer/webgl/WebGLRenderer.mjs"
click node_canvas2d "https://github.com/rdkcentral/lightning/blob/master/src/renderer/c2d/C2dRenderer.mjs"
click node_shaders "https://github.com/rdkcentral/lightning/tree/master/src/renderer/webgl/shaders"
click node_browser "https://github.com/rdkcentral/lightning/blob/master/src/platforms/browser/WebPlatform.mjs"

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_application,node_user,node_browser toneBlue
class node_stage,node_element,node_flex,node_animation,node_transition toneAmber
class node_texturemanager,node_textures,node_text,node_imageworker toneMint
class node_components,node_renderer,node_webgl,node_canvas2d,node_shaders toneRose
```

## Components

### Application

- [Application](https://github.com/rdkcentral/lightning/blob/master/src/application/Application.mjs): `src/application/Application.mjs`

### Scene and motion

- [Stage](https://github.com/rdkcentral/lightning/blob/master/src/tree/Stage.mjs): `src/tree/Stage.mjs`
- [Scene elements](https://github.com/rdkcentral/lightning/blob/master/src/tree/Element.mjs): `src/tree/Element.mjs`
- [Flex layout](https://github.com/rdkcentral/lightning/blob/master/src/flex/layout/FlexLayout.mjs): `src/flex/layout/FlexLayout.mjs`
- [Animations](https://github.com/rdkcentral/lightning/blob/master/src/animation/AnimationManager.mjs): `src/animation/AnimationManager.mjs`
- [Transitions](https://github.com/rdkcentral/lightning/blob/master/src/animation/TransitionManager.mjs): `src/animation/TransitionManager.mjs`

### Content and assets

- [Texture manager](https://github.com/rdkcentral/lightning/blob/master/src/tree/TextureManager.mjs): `src/tree/TextureManager.mjs`
- [Texture types](https://github.com/rdkcentral/lightning/tree/master/src/textures): `src/textures`
- [Text rendering](https://github.com/rdkcentral/lightning/blob/master/src/textures/TextTextureRenderer.ts): `src/textures/TextTextureRenderer.ts`
- [Image worker](https://github.com/rdkcentral/lightning/blob/master/src/platforms/browser/ImageWorker.mjs): `src/platforms/browser/ImageWorker.mjs`

### Graphics

- [Visual components](https://github.com/rdkcentral/lightning/tree/master/src/components): `src/components`
- [Renderer](https://github.com/rdkcentral/lightning/blob/master/src/renderer/Renderer.mjs): `src/renderer/Renderer.mjs`
- [WebGL backend](https://github.com/rdkcentral/lightning/blob/master/src/renderer/webgl/WebGLRenderer.mjs): `src/renderer/webgl/WebGLRenderer.mjs`
- [Canvas 2D backend](https://github.com/rdkcentral/lightning/blob/master/src/renderer/c2d/C2dRenderer.mjs): `src/renderer/c2d/C2dRenderer.mjs`
- [Shaders](https://github.com/rdkcentral/lightning/tree/master/src/renderer/webgl/shaders): `src/renderer/webgl/shaders`

### Other components

- **TV app user**
- [Browser platform](https://github.com/rdkcentral/lightning/blob/master/src/platforms/browser/WebPlatform.mjs): `src/platforms/browser/WebPlatform.mjs`

## Connections

- TV app user → Application: provides input
- Application → Stage: creates
- Application → Scene elements: dispatches input
- Stage → Animations: emits frame start
- Stage → Transitions: emits frame start
- Scene elements → Flex layout: uses layout
- Texture manager → Texture types: creates sources
- Texture manager → Renderer: uploads textures
- Text rendering → Browser platform: uses browser APIs
- Image worker → Browser platform: uses worker APIs
- Renderer → WebGL backend: selects backend
- Renderer → Canvas 2D backend: selects backend
- WebGL backend → Shaders: runs shaders
- Renderer → Browser platform: renders to platform
- Visual components → Scene elements: extends scene