# utubmir/flint architecture

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

- Interactive diagram: https://gitdiagram.com/utubmir/flint
- Repository: https://github.com/utubmir/flint

## Overview

Flint combines a browser game editor, a TypeScript game runtime, and a project CLI. The main workflow is to open and edit a project, build or bundle it, load its scene and assets into the runtime, then run and render the game. Separate branches cover asset/file management, physics and render components, and live preview with hot reload. Several editor and runtime relationships are supported by the source index or README rather than sampled implementation; uncertain links are omitted.

Main entry points: [`src/flint/editor/project/project.ts`](https://github.com/utubmir/flint/blob/main/src/flint/editor/project/project.ts) (Project manager), [`packages/engine/src/runtime/project-loader.ts`](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/project-loader.ts) (Scene loader), [`src/flint/editor/editor.ts`](https://github.com/utubmir/flint/blob/main/src/flint/editor/editor.ts) (Editor shell), [`packages/engine/src/runtime/live-preview-bridge.ts`](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/live-preview-bridge.ts) (Runtime preview bridge)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Browser editor"]
  node_editor_app["Editor shell<br/>[editor.ts]"]
  node_editor_layout["Editor layout<br/>[layout.ts]"]
  node_code_editor["Code editor<br/>[code-editor.ts]"]
  node_window_services["Window services<br/>[window-services.ts]"]
end

subgraph group_projects["Project workflow"]
  node_project["Project manager<br/>[project.ts]"]
  node_project_config["Project config<br/>[project-config.ts]"]
  node_builder["Project builder<br/>[builder.ts]"]
  node_bundler["Project bundler<br/>[bundler.ts]"]
end

subgraph group_runtime["Game runtime"]
  node_asset_store[("Asset registry<br/>[assets.ts]")]
  node_project_loader["Scene loader<br/>[project-loader.ts]"]
  node_game_system["Runtime system<br/>[system.ts]"]
  node_world["World<br/>[world.ts]"]
  node_game_object["Game objects<br/>[game-object.ts]"]
end

subgraph group_components["Game components"]
  node_component["Component lifecycle<br/>[component.ts]"]
  node_transform["Transforms<br/>[transform.ts]"]
  node_camera["Camera rendering<br/>[camera.ts]"]
  node_physics["Physics world<br/>[physics-world.ts]"]
end

subgraph group_preview["Live preview and CLI"]
  node_preview_server["Preview server<br/>[preview-server.ts]"]
  node_preview_client["Preview client<br/>[preview-client.ts]"]
  node_preview_bridge["Runtime preview bridge"]
  node_cli["Project CLI<br/>[main.ts]"]
end

node_user(("Developer"))

node_user -.->|"edits projects"| node_editor_app
node_editor_app -->|"manages projects"| node_project
node_project -->|"uses config"| node_project_config
node_project -->|"builds project"| node_builder
node_project -->|"bundles code"| node_bundler
node_project -->|"loads scenes"| node_project_loader
node_editor_app -.->|"coordinates UI"| node_editor_layout
node_editor_app -.->|"edits code"| node_code_editor
node_window_services -.->|"shares window state"| node_editor_layout
node_project_loader -->|"requests assets"| node_asset_store
node_project_loader -->|"creates objects"| node_game_object
node_project_loader -->|"restores components"| node_component
node_game_system -->|"starts world"| node_world
node_game_system -->|"uses cameras"| node_camera
node_game_object -->|"attaches components"| node_component
node_game_object -->|"owns transform"| node_transform
node_camera -->|"queries layers"| node_world
node_camera -.->|"uses physics"| node_physics
node_preview_server -->|"builds preview"| node_builder
node_preview_server -->|"reads settings"| node_project_config
node_preview_client -.->|"sends preview data"| node_preview_bridge
node_preview_bridge -->|"uses project data"| node_project_loader
node_preview_bridge -->|"updates asset URLs"| node_asset_store
node_preview_bridge -.->|"applies hot reload"| node_component
node_user -->|"runs commands"| node_cli

click node_editor_app "https://github.com/utubmir/flint/blob/main/src/flint/editor/editor.ts"
click node_editor_layout "https://github.com/utubmir/flint/blob/main/src/flint/editor/layout.ts"
click node_code_editor "https://github.com/utubmir/flint/blob/main/src/flint/editor/ui/code-editor.ts"
click node_window_services "https://github.com/utubmir/flint/blob/main/src/flint/editor/ui/window-services.ts"
click node_project "https://github.com/utubmir/flint/blob/main/src/flint/editor/project/project.ts"
click node_project_config "https://github.com/utubmir/flint/blob/main/src/flint/editor/project/project-config.ts"
click node_builder "https://github.com/utubmir/flint/blob/main/src/flint/editor/project/builder.ts"
click node_bundler "https://github.com/utubmir/flint/blob/main/src/flint/editor/project/bundler.ts"
click node_asset_store "https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/assets.ts"
click node_project_loader "https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/project-loader.ts"
click node_game_system "https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/system.ts"
click node_world "https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/world.ts"
click node_game_object "https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/game-object.ts"
click node_component "https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/component.ts"
click node_transform "https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/transform.ts"
click node_camera "https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/components/camera.ts"
click node_physics "https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/physics-world.ts"
click node_preview_server "https://github.com/utubmir/flint/blob/main/src/flint/editor/live-preview/preview-server.ts"
click node_preview_client "https://github.com/utubmir/flint/blob/main/src/flint/editor/live-preview/preview-client.ts"
click node_preview_bridge "https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/live-preview-bridge.ts"
click node_cli "https://github.com/utubmir/flint/blob/main/packages/cli/src/main.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_editor_app,node_editor_layout,node_code_editor,node_window_services toneBlue
class node_project,node_project_config,node_builder,node_bundler toneAmber
class node_asset_store,node_project_loader,node_game_system,node_world,node_game_object toneMint
class node_component,node_transform,node_camera,node_physics toneRose
class node_preview_server,node_preview_client,node_preview_bridge,node_cli,node_user toneIndigo
```

## Components

### Browser editor

- [Editor shell](https://github.com/utubmir/flint/blob/main/src/flint/editor/editor.ts): `src/flint/editor/editor.ts`
- [Editor layout](https://github.com/utubmir/flint/blob/main/src/flint/editor/layout.ts): `src/flint/editor/layout.ts`
- [Code editor](https://github.com/utubmir/flint/blob/main/src/flint/editor/ui/code-editor.ts): `src/flint/editor/ui/code-editor.ts`
- [Window services](https://github.com/utubmir/flint/blob/main/src/flint/editor/ui/window-services.ts): `src/flint/editor/ui/window-services.ts`

### Project workflow

- [Project manager](https://github.com/utubmir/flint/blob/main/src/flint/editor/project/project.ts): `src/flint/editor/project/project.ts`
- [Project config](https://github.com/utubmir/flint/blob/main/src/flint/editor/project/project-config.ts): `src/flint/editor/project/project-config.ts`
- [Project builder](https://github.com/utubmir/flint/blob/main/src/flint/editor/project/builder.ts): `src/flint/editor/project/builder.ts`
- [Project bundler](https://github.com/utubmir/flint/blob/main/src/flint/editor/project/bundler.ts): `src/flint/editor/project/bundler.ts`

### Game runtime

- [Asset registry](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/assets.ts): `packages/engine/src/runtime/assets.ts`
- [Scene loader](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/project-loader.ts): `packages/engine/src/runtime/project-loader.ts`
- [Runtime system](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/system.ts): `packages/engine/src/runtime/system.ts`
- [World](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/world.ts): `packages/engine/src/runtime/world.ts`
- [Game objects](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/game-object.ts): `packages/engine/src/runtime/game-object.ts`

### Game components

- [Component lifecycle](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/component.ts): `packages/engine/src/runtime/component.ts`
- [Transforms](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/transform.ts): `packages/engine/src/runtime/transform.ts`
- [Camera rendering](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/components/camera.ts): `packages/engine/src/runtime/components/camera.ts`
- [Physics world](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/physics-world.ts): `packages/engine/src/runtime/physics-world.ts`

### Live preview and CLI

- [Preview server](https://github.com/utubmir/flint/blob/main/src/flint/editor/live-preview/preview-server.ts): `src/flint/editor/live-preview/preview-server.ts`
- [Preview client](https://github.com/utubmir/flint/blob/main/src/flint/editor/live-preview/preview-client.ts): `src/flint/editor/live-preview/preview-client.ts`
- [Runtime preview bridge](https://github.com/utubmir/flint/blob/main/packages/engine/src/runtime/live-preview-bridge.ts): `packages/engine/src/runtime/live-preview-bridge.ts`
- [Project CLI](https://github.com/utubmir/flint/blob/main/packages/cli/src/main.ts): `packages/cli/src/main.ts`

### Other components

- **Developer**

## Connections

- Developer → Editor shell: edits projects
- Editor shell → Project manager: manages projects (evidence: `src/flint/editor/project/project.ts`)
- Project manager → Project config: uses config (evidence: `src/flint/editor/project/project.ts`)
- Project manager → Project builder: builds project (evidence: `src/flint/editor/project/project.ts`)
- Project manager → Project bundler: bundles code (evidence: `src/flint/editor/project/project.ts`)
- Project manager → Scene loader: loads scenes (evidence: `src/flint/editor/project/project.ts`)
- Editor shell → Editor layout: coordinates UI
- Editor shell → Code editor: edits code
- Window services → Editor layout: shares window state
- Scene loader → Asset registry: requests assets (evidence: `packages/engine/src/runtime/project-loader.ts`)
- Scene loader → Game objects: creates objects (evidence: `packages/engine/src/runtime/project-loader.ts`)
- Scene loader → Component lifecycle: restores components (evidence: `packages/engine/src/runtime/project-loader.ts`)
- Runtime system → World: starts world (evidence: `packages/engine/src/runtime/system.ts`)
- Runtime system → Camera rendering: uses cameras (evidence: `packages/engine/src/runtime/system.ts`)
- Game objects → Component lifecycle: attaches components (evidence: `packages/engine/src/runtime/game-object.ts`)
- Game objects → Transforms: owns transform (evidence: `packages/engine/src/runtime/game-object.ts`)
- Camera rendering → World: queries layers (evidence: `packages/engine/src/runtime/components/camera.ts`)
- Camera rendering → Physics world: uses physics (evidence: `packages/engine/src/runtime/components/camera.ts`)
- Preview server → Project builder: builds preview (evidence: `src/flint/editor/live-preview/preview-server.ts`)
- Preview server → Project config: reads settings (evidence: `src/flint/editor/live-preview/preview-server.ts`)
- Preview client → Runtime preview bridge: sends preview data
- Runtime preview bridge → Scene loader: uses project data (evidence: `packages/engine/src/runtime/live-preview-bridge.ts`)
- Runtime preview bridge → Asset registry: updates asset URLs (evidence: `packages/engine/src/runtime/live-preview-bridge.ts`)
- Runtime preview bridge → Component lifecycle: applies hot reload
- Developer → Project CLI: runs commands (evidence: `packages/cli/src/main.ts`)