Pxlrei

A dependency-free text-to-pixel engine for JavaScript and TypeScript

Pxlrei turns text into a reusable boolean pixel matrix, then lets you render it as text, SVG, HTML, Canvas, or your own output format.

npm install @blcklab/pxlrei

import { pixelize } from '@blcklab/pxlrei'

console.log(pixelize('Pxlrei'))

Any text, one API

Pxlrei has two rendering paths behind the same API:

• Glyph mode for deterministic built-in/custom pixel fonts.
• Raster mode for real font text through Canvas.

In a browser, unsupported built-in text can automatically fall back to font rasterization:

pixelize('Hello')
pixelize('こんにちは')
pixelize('日本語')
pixelize('Привет')
pixelize('مرحبا')
pixelize('Hello 世界')

The active browser font must support the requested characters. Pxlrei does not bundle fonts.

Get the matrix

import { renderAnyText } from '@blcklab/pxlrei'

const result = renderAnyText('Hello')

result.matrix
result.width
result.height
result.source // 'glyph' or 'raster'

Deterministic pixel font

import { pixelText } from '@blcklab/pxlrei'

console.log(
  pixelText('Hello', {
    pixel: '■',
    empty: ' ',
    scale: 1,
  }),
)

The built-in latin5x5 font includes A-Z, true a-z, 0-9, and common punctuation.

Render anywhere

import {
  drawToCanvas,
  renderAnyText,
  renderHtml,
  renderSvg,
} from '@blcklab/pxlrei'

const result = renderAnyText('PX')

const svg = renderSvg(result, { pixelSize: 8, gap: 1 })
const html = renderHtml(result)

drawToCanvas(result, document.querySelector('canvas')!, {
  pixelSize: 8,
  gap: 1,
})

Node.js

Built-in and custom glyph rendering works in Node.js 20+ with zero runtime dependencies.

For arbitrary real-font rasterization in Node, provide a TextRasterizer backed by your chosen font/Canvas engine. Pxlrei intentionally does not force a native Canvas dependency on every user.

Documentation

Start with the documentation index.

• Getting started
• Core concepts
• Unicode and languages
• Browser rasterization
• Node.js rasterization
• Custom glyphs
• Output renderers
• API reference
• Options reference
• Interactive Playground
• Troubleshooting

Runtime

• Node.js 20+
• Modern browsers for Canvas rasterization
• Zero runtime dependencies
• ESM + CommonJS + TypeScript declarations

License

MIT