textmode.js

Appearance

Quick Actions

Open in ChatGPTOpen in ClaudeOpen in Perplexity

Installation ​

Install textmode.js with npm for a modern JavaScript or TypeScript project, or load its UMD bundle directly in the browser. Official add-ons use the same plugin setup in either environment. (ง •̀_•́)ง

Try it online first ​

Open editor.textmode.art, a browser-based live-coding environment for the complete official textmode.js ecosystem. Sketches run as you edit, with no local toolchain required.

The editor includes textmode.js and the add-ons textmode.export.js, textmode.filters.js, textmode.figlet.js, and textmode.synth.js.

  • Write with Monaco-powered completions, hover documentation, and diagnostics.
  • Start with a blank sketch, an included example, or a community gallery sketch.
  • Keep code and preferences saved in the browser, then share sketches through URL-based links.
  • Use microphone or line-input analysis for audio-reactive work, and create on desktop or mobile.

Use it to learn the ecosystem, prototype an idea, or decide which packages your local project needs.

Requirements ​

You do not need to create a <canvas> element yourself. Unless you provide one, textmode.js creates and mounts a canvas after the document body is available.

WebGL2 is required

textmode.js does not currently provide a WebGL1 or Canvas 2D fallback. Check your target browsers on Can I Use.

Install textmode.js ​

npm and ESM ​

For projects built with tools such as Vite, install the package from npm:

bash
npm install textmode.js

Import the textmode entry point in your JavaScript or TypeScript:

js
import { textmode } from "textmode.js";

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

t.draw(() => {
  t.background(18);
  t.char("@");
  t.charColor(255);
  t.rect(12, 8);
});

Your bundler will include the ESM build and its TypeScript declarations automatically. Continue with First Sketch for the complete draw, setup, and resize pattern.

CDN and UMD ​

For a browser project without a package manager or bundler, load the UMD build from jsDelivr:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>textmode.js sketch</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.js"></script>
    <script>
      const t = textmode.create({
        width: window.innerWidth,
        height: window.innerHeight,
        fontSize: 16,
      });

      t.draw(() => {
        t.background(18);
        t.char("@");
        t.charColor(255);
        t.rect(12, 8);
      });
    </script>
  </body>
</html>

The UMD bundle exposes the library as the global textmode object. Load it before any script that calls textmode.create().

Install add-ons ​

Official add-ons are npm packages with textmode.js as a peer dependency. Each package exports a plugin that you pass to textmode.create() through the plugins array:

PackagePlugin / UMD global
textmode.export.jsExportPlugin
textmode.filters.jsFiltersPlugin
textmode.figlet.jsFigletPlugin
textmode.overlay.jsOverlayPlugin
textmode.synth.jsSynthPlugin

The corresponding UMD files are dist/textmode.export.umd.js, dist/textmode.filters.umd.js, dist/textmode.figlet.umd.js, dist/textmode.overlay.umd.js, and dist/textmode.synth.umd.js.

npm and ESM ​

Install the core library and the add-on together. For example, to use textmode.filters.js:

bash
npm install textmode.js textmode.filters.js

Import the plugin and register it when you create the Textmodifier instance:

js
import { textmode } from "textmode.js";
import { FiltersPlugin } from "textmode.filters.js";

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [FiltersPlugin],
});

Importing the add-on also makes its TypeScript declarations and any Textmodifier augmentations available to your project.

CDN and UMD ​

Load the core UMD bundle first, followed by the add-on bundle, and then create your sketch with the add-on's global plugin:

html
<script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/textmode.filters.js@latest/dist/textmode.filters.umd.js"></script>
<script>
  const t = textmode.create({
    width: window.innerWidth,
    height: window.innerHeight,
    plugins: [FiltersPlugin],
  });
</script>

Use the package, bundle, and plugin names from the table above to install another add-on with the same pattern.

Use multiple add-ons ​

Install every package your sketch needs in one command:

bash
npm install textmode.js textmode.export.js textmode.filters.js

Then import and register the plugins together:

js
import { textmode } from "textmode.js";
import { ExportPlugin } from "textmode.export.js";
import { FiltersPlugin } from "textmode.filters.js";

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [ExportPlugin, FiltersPlugin],
});

For UMD projects, follow the same order: load textmode.js, load each add-on bundle, and then run the sketch.

Version compatibility ​

Each add-on declares its compatible textmode.js versions through peerDependencies. Keep the core library and add-ons up to date together, and resolve any peer-dependency warning reported by npm before running your project.

Pin CDN versions for production

The CDN examples use @latest for convenient experimentation. For a reproducible production build, replace latest with tested versions for both textmode.js and every add-on.

Common setup issues ​

  • textmode is not defined: load the core UMD bundle before your sketch, or import textmode in your ESM module.
  • A plugin global is not defined: confirm that the matching add-on UMD bundle loaded before your sketch and that you used the plugin name from the table above.
  • npm reports a missing or incompatible peer dependency: install a compatible textmode.js version alongside the add-on.
  • The canvas is blank or WebGL initialization fails: confirm that WebGL2 is enabled and supported by the browser and device.

Next steps ​