textmode.js

Appearance

A creative coding library for building dynamic ASCII art and textmode graphics with real-time* rendering

Get started
View examples

⚡ Real-time performance

Blazing fast ASCII conversion powered by an optimized WebGL rendering pipeline specifically designed for textmode art.

🎨 Framework-agnostic

Apply textmode conversion to any existing <canvas> and <video> context. Compatible with p5.js, Three.js, and any other canvas-based library.

🔧 Zero dependencies

Lightweight and self-contained. No external libraries required - just import and start creating.

📱 Cross-platform

Runs everywhere the web runs - desktop, mobile, tablets. Full TypeScript support with comprehensive type definitions.

🚀 Easy integration

Simple and intuitive API designed for quick setup and seamless integration into your projects.

📤 Export anything

Export your creations as TXT, SVG, PNG, JPG, or WebP. Perfect for sharing on social media, printing, or integrating into other projects.

What is 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.

Quick Start ​

Get up and running with textmode.js in just a few steps:

  1. Install the library:

    bash
    npm install textmode.js

  2. Create your first sketch:

    html
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>textmode.js sketch</title>
</head>

<body>
  <script type="module" src="./sketch.js"></script>
</body>

</html>
    javascript
    import { textmode } from 'textmode.js';

const t = textmode.create({
    width: window.innerWidth,
    height: window.innerHeight,
    fontSize: 16,
    frameRate: 60
});

t.setup(() => {
    // Optional setup code here (e.g., load fonts/shaders, initialize variables that access 't')
});

t.draw(() => {
    t.background(32); // Dark gray background

    t.char('A');
    t.charColor(255, 0, 0); // Cover the top-left quarter of the grid with a rectangle of red 'A's
    t.rect(0, 0, t.grid.cols / 2, t.grid.rows / 2);

    // ...add your drawing code here!
});

t.windowResized(() => {
    t.resizeCanvas(window.innerWidth, window.innerHeight);
});

That’s it! With textmode.js set up and running, you can start creating your own ASCII art and textmode experiences.

INFO

For alternative installation methods, including CDN usage, check out the installation guide.

For advanced usage and customization, see the API documentation.

Live Examples ​

Experience textmode.js in action with some interactive demos:

sine wave interference
<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox
digital rain
<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox
plasma field
<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Community and support ​

Join our growing community of creative developers:

  • 📖 Documentation - Complete documentation
  • 🔧 API - Complete API reference
  • 👥 Discord - Join our community for support and collaboration
  • 🎮 Examples - Interactive demos and tutorials
  • 🐛 Issues - Bug reports and feature requests

Ready to get started? ​

Check out our API documentation and examples to begin your textmode journey.