v1.0.54·MIT License

asciify-engine

Framework-agnostic ASCII art engine for the browser. Convert images, GIFs, and videos into live ASCII art rendered on HTML canvas.

npm install asciify-engine
Playground →
Backgrounds ↗
05

Art Styles

13 built-in presets via ART_STYLE_PRESETS. Each bundles a render mode, character set, and color mode. Apply with the artStyle shorthand or spread into options.

Core presets

classicGrayscale

Standard density ramp. Clean, universally readable ASCII aesthetic.

particlesFull Color

Colored dot circles in dots renderMode. Great for vibrant photos.

lettersFull Color

Alphabet characters with pixel-accurate color. Dense, textural.

claudeCodeAccent

Box-drawing characters with accent color. Technical, hacker aesthetic.

artFull Color

Full 70-char density ramp for maximum tonal range and fine detail.

terminalMatrix

Classic charset with matrix-green color mode. Retro terminal look.

Extended presets

boxGrayscale

Filled block elements ▪◾◼■█ — bold, low-detail shapes.

linesGrayscale

Dash/em-dash ramp — minimalist typographic style.

circlesAccent

Concentric circle chars ·:∘○ with accent-color highlight.

brailleFull Color

Full 256-char braille block. Ultra-dense tonal range with a printed feel.

katakanaMatrix

Half-width katakana. Matrix / cyberpunk / anime aesthetic.

musicalAccent

Music notation symbols ♩♪♫♬♭♮♯. Playful, low density output.

emojiFull Color

Block emoji grid — full-color mosaic, best with larger fontSize.

Applying presets
import { ART_STYLE_PRESETS, DEFAULT_OPTIONS } from 'asciify-engine';

// Spread a preset into options
const options = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS.braille };

// Or pass the name directly via the artStyle shorthand
await asciify(img, canvas, { artStyle: 'katakana' });
await asciify(img, canvas, { artStyle: 'particles' });

// All preset names:
// 'classic' | 'particles' | 'letters' | 'claudeCode' | 'art'
// 'terminal' | 'box' | 'lines' | 'braille' | 'katakana'
// 'musical' | 'emoji' | 'circles'

Palette themes

PALETTE_THEMES provides named accent + bg color pairs inspired by popular editor themes.

dracula
monokai
nord
catppuccin
solarized
gruvbox
ts
import { PALETTE_THEMES, DEFAULT_OPTIONS } from 'asciify-engine';

const theme = PALETTE_THEMES.dracula;
const options = {
  ...DEFAULT_OPTIONS,
  accentColor: theme.accent, // '#bd93f9'
  colorMode: 'accent',
};
Buy Me A Coffee