Skip to content

Tech Stack & Rendering Pipeline

Michael Voitovich edited this page Jun 16, 2026 · 2 revisions

The Scanline Engine is built upon a modern, robust web stack designed to ensure high performance and developer ergonomics while faithfully emulating the aesthetic of 1980s CRT monitors. It strictly decouples the game's internal state, semantic text models, and visual presentation.

Here is an in-depth look at the technological foundation, the hybrid rendering pipeline, and the Entity-Component System (ECS) architecture.

1. Core Foundation: React, Vite, and TypeScript

The engine utilizes a modern frontend toolchain to maintain a scalable and easily debuggable codebase:

  • TypeScript: Acts as the primary language for the entire engine and its scripting system. TypeScript is crucial for ensuring type safety across the complex spatial hierarchy, parser resolution, and component data structures.
  • Vite: Powers the build system and local development server. Vite's Hot Module Replacement (HMR) enables rapid iteration, which is particularly beneficial for the hot-reloadable TypeScript scripting system (src/scripts/) that applies gameplay logic changes instantly without requiring a page refresh.
  • React: While the game itself renders to an HTML5 Canvas, React is used extensively for the overarching user interface. This includes the highly interactive Scene Editor and Sprite Editor overlays, as well as the high-resolution "open" text console. By using React and Zustand for immutable UI state management, the engine separates complex DOM updates from the mutable Game singleton and its main render loop.

Clone this wiki locally