   |
  |
 |
|---|
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.
- Dependency-free: No external libraries required, making it lightweight and easy to integrate into any project.
- TTF/OTF font support: Load and use TrueType and OpenType fonts for rendering textmode art, allowing for a wide range of styles and characters.
- Framework-agnostic: Use
textmode.jswith any JavaScript framework or library, such asp5.js,three.js, or even vanilla JavaScript. - Standalone drawing API: Use the built-in
p5.js-like drawing API for creating textmode art without any other dependencies. - Injectable: Easily inject
textmode.jsinto websites like YouTube to convert<video>or<canvas>elements into textmode representations for a unique viewing experience. - WebGL1/WebGL2 support: All shader code provided by
textmode.jsis written inGLSL ES 1.0, making it compatible with bothWebGL1andWebGL2contexts, allowing for a wide range of devices to run your ASCII projects. - Exporting: Export your creations to various image formats, and as
.txt,.svgand.jsonfiles for easy sharing, printing and plotting. - Typescript support: Fully typed library with TypeScript definitions, making it easy to integrate into TypeScript projects and ensuring type safety.
To get started with textmode.js, you'll need:
- A modern web browser with
WebGLsupport - A
<canvas>or<video>element in your project (optional, for capturing content from a different source) - Node.js 16+ and
npm(optional, for ESM installation)
textmode.js is available in multiple bundle variants to suit different project needs:
| Bundle type | File size | Font included? | Best for |
|---|---|---|---|
| Standard UMD ( textmode.umd.js) |
~117kB | ✅ UrsaFont embedded | Quick setup, prototyping |
| Standard ESM ( textmode.esm.js) |
~183kB | ✅ UrsaFont embedded | Quick setup, prototyping |
| Minified UMD ( textmode.umd.min.js) |
~71kB | ❌ Requires external font | Production apps, custom fonts |
| Minified ESM ( textmode.esm.min.js) |
~136kB | ❌ Requires external font | Production apps, custom fonts |
Choose Standard bundles for:
- The simplest setup with no additional configuration
- Everything embedded and ready to use
- Getting started without worrying about fonts
Choose Minified bundles for:
- Bundle size optimization (25-40% smaller)
- Custom fonts instead of the default
- Production applications requiring maximum performance
To use textmode.js in a UMD environment, download the latest umd build from the GitHub releases page or import it directly from a CDN like jsDelivr. The library is distributed as a single JavaScript file, which you can include in your project by adding the following script tag to your HTML file:
<!DOCTYPE html>
<html>
<head>
<title>textmode.js example</title>
<!-- Standard bundle (with embedded UrsaFont) -->
<script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.js"></script>
<!-- OR Minified bundle (requires external font) -->
<!-- <script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.min.js"></script> -->
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
(async () => {
// Reference your existing canvas element
const canvas = document.querySelector('canvas#myCanvas');
// Standard bundle - no font configuration needed
const textmodifier = await textmode.create(canvas);
// Minified bundle - font required
// const textmodifier = await textmode.create(canvas, {
// fontSource: './path/to/your/font.ttf'
// });
})();
</script>
</body>
</html>To use textmode.js in an ESM environment, you can install it via npm:
npm install textmode.jsThen, you can import it in your JavaScript or TypeScript files:
// Standard bundle (with embedded UrsaFont)
import { textmode } from 'textmode.js';
// OR Minified bundle (requires external font)
// import { textmode } from 'textmode.js/min';
(async () => {
// Canvas example
const canvas = document.querySelector('canvas#myCanvas');
// Standard bundle - no font configuration needed
const textmodifier = await textmode.create(canvas);
// Minified bundle - font required
// const textmodifier = await textmode.create(canvas, {
// fontSource: './path/to/your/font.ttf'
// });
})();Now that you have textmode.js set up, you can start creating your ASCII art projects! Check out the API documentation for detailed information on how to use the library, including examples and advanced features.
Explore the comprehensive documentation at code.textmode.art for:
- Detailed guides
- Interactive examples
- Complete API reference
- Tips and tricks
- ... and much more!
The documentation will help you unlock the full potential of textmode.js in your creative coding projects.
textmode.js uses a custom-made minified version of Typr.js by Photopea for font loading and parsing, 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.
