textmode.js

Appearance

Instantly transform any <canvas> and <video> into a dynamic grid of characters in real-time

Get started
View examples

⚡ Real-time performance

Blazing fast ASCII conversion powered by optimized WebGL shaders. Delivers smooth, low-latency visuals even at high resolutions.

🎨 Universal canvas support

Works seamlessly with any <canvas> and <video> context. Compatible with p5.js, Three.js, and any other canvas-based library or framework.

🔧 Zero dependencies

Lightweight and self-contained. No external libraries required - just import and start converting your visuals to ASCII art.

🎭 Fully customizeable

Adjust countless parameters and set up your own rendering pipeline to achieve your desired textmode visuals.

📱 Cross-platform

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

🚀 Easy integration

Simple API design. Add textmode effects to existing projects in minutes, not hours. Perfect for creative coding and demos.

What is textmode.js? ​

textmode.js is a free, lightweight and framework-agnostic creative coding library for real-time ASCII art and textmode experiences in web browsers.

Transform any <canvas> or <video> element into dynamic ASCII representations with blazing-fast WebGL rendering. Whether you're using p5.js, three.js, or vanilla JavaScript, textmode.js seamlessly integrates with your existing projects to create interactive textmode games, live visual performances, and artistic installations.

For standalone projects, textmode.js provides its own p5.js-inspired drawing API, letting you create compelling ASCII experiences without additional dependencies. The library powers live coding performances, interactive installations, and digital art projects worldwide, bringing the nostalgic aesthetic of textmode art into modern web development.

Quick Start ​

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

  1. Install the library:
    bash
    npm install textmode.js

2a. Import and initialize with an existing <canvas> to capture:

javascript
import { textmode } from 'textmode.js';

// Reference your existing canvas element
const canvas = document.querySelector('canvas#myCanvas');
const textmodifier = await textmode.create(canvas);

2b. Import and initialize with an existing <video> to capture:

javascript
import { textmode } from 'textmode.js';

// Reference your existing video element
const video = document.querySelector('video#myVideo');
const textmodifier = await textmode.create(video);

2c. Import and use the standalone drawing API:

javascript
import { textmode } from 'textmode.js';

// Create a new textmodifier instance
const t = await textmode.create({
    width: window.innerWidth,
    height: window.innerHeight,
    fontSize: 16,
});

// Start drawing with the textmode API
t.draw(() => {
    t.background(128);
    t.fill(255);
    t.rect(50, 50, 200, 100);
});

That’s it! Your canvas will now be displayed as real-time ASCII/textmode art.
For advanced usage and customization, see the API documentation.

Live Examples ​

Experience textmode.js in action with our interactive demos:

p5.js (WEBGL)
<!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
p5.js (P2D)
<!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
hydra-synth
<!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
Vanilla Canvas 2D
<!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
Three.js
<!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
Video
<!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
Standalone
<!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 API reference
  • 🎮 Examples - Interactive demos and tutorials
  • 🐛 Issues - Bug reports and feature requests

Ready to Get Started? ​

Transform your canvas into ASCII art in minutes. Check out our API documentation and examples to begin your textmode journey.