Guides overview

The Guides section covers how to build with Flare — animation, interactive experiences, and games: project setup, scenes and the ECS world, rendering sprites through Skia, input, audio, and shipping to iOS, Android, and the web. Start with Getting started to scaffold a runnable app, then return here as each topic-specific guide lands. The Showcases below rebuild, step by step, the five animations that run on this site.

What building with Flare looks like

A Flare app mounts a single root view and starts a fixed-timestep loop; from there you spawn entities, attach components, and register systems that run each frame. You scaffold a project with create-flare-app, write your game logic against the ECS world and scene manager, and let the renderer batch sprites into Skia draw calls.

npm create flare-app@latest my-game

The smallest app mounts a GameView and starts the loop — everything else (entities, input, systems) is added from the ready handler:

import { GameView, type GameContextValue } from "@flare-engine/engine";
import type React from "react";
import { StyleSheet, View } from "react-native";

function handleReady(ctx: GameContextValue): void {
  ctx.loop.start();
}

export function App(): React.ReactElement {
  return (
    <View style={styles.root}>
      <GameView onReady={handleReady} style={styles.game} />
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: "#000" },
  game: { flex: 1 },
});

The engine at a glance

Flare is a TypeScript-first 2D engine for React Native and the web: one codebase — animation, gamification, interactive UI, and games — renders to iOS, Android, and the web. It ships as 42 packages across nine bands — Foundation, Core, Systems, Persistence (2.5), Features, UI & post-FX (3.5), Integration, Tooling (5), and Platform integrations (6) — where lower layers never import from higher ones. Rendering runs on @shopify/react-native-skia natively and CanvasKit WASM on the web; you typically install the @flare-engine/engine umbrella alongside @flare-engine/react for the component surface.

For the live list of every package see the package catalog; for the layer map and dependency rules, see Concepts: Architecture and the canonical engine design docs.

Getting startedScaffold a runnable Flare app and render your first frame.

ArchitectureThe layer model, package surface, and rendering backends.

Engine design docsCanonical architecture.md on GitHub (engine repo).

API specsCanonical api-specs.md on GitHub (engine repo).

Pre-launch

The engine repo is private until the OSS launch (target October 2026); the @flare-engine packages are published restricted until then. The two GitHub links above are the canonical targets once the repo is public.

Showcases

Five self-contained Skia/CanvasKit animations run on this site, built on a common seam: the engine’s loop and post-FX surface, with most also leaning on its math and particle pool (the Logo piece is the exception — loop + post-FX only). These guides rebuild them from first principles and are explicit about the seam: what the engine gives you versus what is your own application code — including the parts that have since crossed the line, where Spacetime’s gravity core and Physarum’s pheromone field now come from @flare-engine/simulation rather than from a local copy.

Read Foundations first — the shared spine — then take the five in rising complexity: Physarum network, Nuclear reactor, Spacetime lattice, Procedural map and Logo reveal. Every one of them also runs live on its own page in the showcase gallery — read the guide for how it is built, open the showcase to watch it.

Try a package in the browser

Some engine packages are worth driving before you install anything. Those live in the showcase gallery alongside the games and the live animations.

Overrun is a sixty-second one-thumb survival run built on the engine packages listed in its own seam table, and its guide rebuilds it — including why three of the packages the design originally named did not survive contact with the shipped 0.3.0 artifacts.

Planned guides

These topics are planned for the Guides section; each will land as a focused walkthrough.

• Project setup — scaffold an app with create-flare-app, pick a template, and run it on a device or the web.
• Scenes & the game loop — register scenes with the SceneManager and drive logic from the fixed-timestep loop.
• The ECS world — spawn entities, define components, and add systems with @flare-engine/ecs.
• Rendering sprites — draw with the built-in Sprite component and flush the SpriteBatch once per frame.
• Input & virtual controls — wire touch input and the overlay VirtualJoystick / VirtualButton components.
• Audio — load and play sound through the engine’s audio manager.
• Assets & atlases — pack sprite folders into atlases with the flare pack-atlas CLI command.
• Tilemaps — convert Tiled .tmj maps with flare tiled-to-flare and render them at runtime.
• Shipping — build and release the same project to iOS, Android, and the web.

The engine’s design documents are the single source of truth for the API surface — guides summarize and link rather than duplicate them. Browse the canonical set in the engine repo (architecture, api-specs, dependencies, ecosystem, native-acceleration, lighting-2-5d). The public npm release is targeted for October 2026.