textmode.js
textmode.js is a free, lightweight, and framework-agnostic creative-coding library for real‑time ASCII and textmode graphics in the browser. It combines a grid‑based API with a modern WebGL2
pipeline, multiple render targets, and aggressive instanced rendering to deliver smooth, high‑performance rendering.
The library is designed to be easy to use and accessible to developers of all skill levels. Whether you're a seasoned developer or just starting out, textmode.js
provides a simple and intuitive API that makes it easy to create stunning textmode art and animations.
Features
- Real‑time* ASCII/textmode rendering with a simple drawing API
WebGL2
pipeline with Multiple Render Targets (MRT) for rich per‑cell data- Instanced rendering and batching for low draw call counts
- Font system with runtime font loading and dynamic sizing (supports TTF/OTF/WOFF)
- Author custom filter shaders in
GLSL ES 3.00
for advanced effects - Flexible exporting: TXT, SVG, and raster images (PNG/JPG/WebP)
- Animation loop control:
frameRate
,loop
/noLoop
,redraw
,frameCount
, etc. - Framework-agnostic: Use
textmode.js
with any canvas-based framework or library - Zero dependencies, written in TypeScript, with comprehensive type definitions
INFO
*Performance depends on the complexity of your scene and device capabilities. Consider authoring filter shaders for complex effects at low cost.
How it works (high‑level)
The renderer operates in two passes:
- Draw pass (offscreen): your drawing commands emit instances that are flushed into a special framebuffer with five color attachments (MRT). Each attachment encodes a different piece of per‑cell information.
- Conversion pass (onscreen): a conversion shader reads those attachments plus the font atlas to draw the final glyphs aligned to the grid.
Render pipeline at a glance
The five attachments (MRT)
o_character
- glyph index to select a charactero_primaryColor
- character color informationo_secondaryColor
- cell color informationo_rotation
- per‑cell rotation datao_transform
- per‑cell transform flags (invert, flipX, flipY)
These textures have the same resolution as the grid (cols x rows). That makes readback and export straightforward and efficient.
Why instanced rendering matters
textmode.js packs many draw calls’ worth of work into a few batched, instanced draws. This reduces driver overhead dramatically, enabling high FPS even with complex scenes and thousands of shapes drawn per frame.
Acknowledgments
textmode.js
ships with a custom-made TypeScript rewrite and stripped-down version of Typr.js
by Photopea for font parsing and glyph extraction, containing only the necessary components for our use case. Typr.js
is licensed under the MIT License.
The non-minified version of textmode.js
ships with UrsaFont
as the default font, created by UrsaFrank. This font is available under the CC0 (Creative Commons Zero) license.
Next steps
-> Ready to install? Head to the Installation guide.
-> New to the API? Start with the Fundamentals.
-> Want to see it in action? Explore the Examples.
-> Looking for typography details? Check out Fonts.
-> Need full type and method details? Visit the API Reference.