Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nightre/Rapid.js/llms.txt

Use this file to discover all available pages before exploring further.

Rapid.js is a high-performance, stateless WebGL2 2D rendering engine built for browser games and interactive graphics. It offers instanced sprite batching, a hierarchical transform stack, offscreen render textures, a particle system, and full custom GLSL shader support — all through a clean, data-driven TypeScript API with no scene graph overhead.

Introduction

Learn what Rapid.js is, why it’s fast, and how it fits your project.

Quickstart

Get a sprite on screen in under five minutes.

API Reference

Explore every class, method, and option in the public API.

Custom Shaders

Write GLSL fragment shaders and apply them as post-process filters.

​
Why Rapid.js?

Rapid.js uses WebGL2 instanced rendering so thousands of sprites are submitted in a single draw call. Its API is fully stateless — you pass options objects to draw calls rather than mutating scene nodes, which makes game loops predictable and easy to profile.

Instanced Sprites

Batch hundreds of sprites into a single WebGL draw call via hardware instancing.

Transform Stack

Hierarchical save/restore matrix stack for cameras, groups, and animated objects.

Render Textures

Render to offscreen framebuffers and read pixels back for dynamic effects.

Particle System

Animated emitters with per-attribute start/end ranges and damping.

Custom Shaders

Inject GLSL code into the sprite or graphic pipeline, or chain filter passes.

Text Rendering

Hardware-accelerated text via canvas-backed TextTexture with live style updates.

​
Get Started in 4 Steps

1

Install the package

npm install rapid-render
2

Create a canvas and a Rapid instance

import { Rapid, Color } from "rapid-render";

const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const rapid = new Rapid({ canvas, logicWidth: 800, logicHeight: 600 });
3

Load a texture and draw it

const texture = await rapid.texture.load("/sprite.png");

function loop() {
  rapid.clear();
  rapid.drawSprite({ texture, x: 400, y: 300 });
  rapid.flush();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
4

Read the full guide

Head to the Quickstart page for a complete working example with transforms, color tinting, and the game loop pattern.
Rapid.js is under active development. The API is stable for the core rendering features but may receive additions in minor releases. Check the GitHub repository for the latest changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us