textmode.js

Appearance

Examples ​

Experience textmode.js in action with our interactive demos. Each example demonstrates how to integrate textmode.js with popular libraries and frameworks.

Interactive Examples ​

All examples below are fully interactive and run directly in your browser. You can modify the code and see the results immediately.

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

Integration Patterns ​

These examples showcase common integration patterns with textmode.js:

Basic Setup ​

All examples follow a similar pattern:

  1. Create or reference your canvas element
  2. Initialize textmode.js with textmode.create(canvas, options)
  3. Configure converters to customize the ASCII conversion
  4. Render your graphics as usual - textmode.js handles the conversion automatically

Framework-Specific Notes ​

p5.js ​

  • Works with both P2D and WEBGL renderers
  • Access the canvas via canvas.elt in p5.js

Three.js ​

  • Use renderer.domElement to access the canvas
  • Consider using manual render mode for better control: { renderMode: 'manual' }
  • Call textmodifier.render() in your animation loop after rendering the scene

Vanilla Canvas ​

  • Works with any HTML5 Canvas context (2D, WebGL)
  • Perfect for custom implementations and learning

hydra-synth ​

  • Access the canvas via hydraInstance.canvas
  • Great for live coding and generative visuals

Customization ​

All examples demonstrate basic converter configuration. You can customize:

  • Character sets: Choose which characters to use for conversion
  • Colors: Set character and background colors
  • Rendering modes: Manual vs automatic rendering
  • Character transformations: Rotation, flipping, and more

Those examples only scratch the surface of what you can do with textmode.js. Explore the full potential by combining different converters and configurations to create unique text-based visuals.

For detailed configuration options, see the API documentation.

Getting Started ​

Ready to add textmode effects to your project? Check out our Installation and Usage guides to get started.