Frameworks

The engine only requires the browser Canvas API — no framework-specific internals. Each example below just provides lifecycle hooks to mount and clean up the canvas.

AsciiImage.tsx

import { useEffect, useRef } from 'react';
import { asciify, type ArtStyle } from 'asciify-engine';

export function AsciiImage({
  src,
  style = 'classic',
}: {
  src: string;
  style?: ArtStyle;
}) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (canvasRef.current) {
      asciify(src, canvasRef.current, { artStyle: style });
    }
  }, [src, style]);

  return <canvas ref={canvasRef} width={800} height={600} />;
}

Tip

asciifyVideo() follows the same pattern as asciifyGif() — swap the function name and pass a video URL or HTMLVideoElement. Both return a stop() function.