  
|
 
|
|
textmode.figlet.js is an add-on library for textmode.js that provides FIGlet / FIGfont support. It includes a FIGfont parser, layout engine, and rendering API that integrates with the Textmodifier system in textmode.js, allowing you to draw FIGlet text with configurable layout behavior and measurement helpers.
- Parse raw
.flfsources into reusableTextmodeFigFontinstances - Load FIGfonts at runtime with
loadFigFont() - Draw FIGlet text with configurable horizontal and vertical layout behavior
- Measure rendered output with width, height, and bounds helpers before drawing
- Store alignment and baseline preferences per
Textmodifierinstance
To get started with textmode.figlet.js, you'll need:
textmode.js0.11.0or newer- A modern browser with the same runtime requirements as
textmode.js - Node.js
20.8.1+andnpm(optional, for ESM installation)
To use textmode.figlet.js in a browser without a bundler, load the UMD builds for both textmode.js and this add-on. textmode.js must be loaded first so the FIGlet add-on can attach to the expected global runtime.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>textmode.figlet.js sketch</title>
<script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/textmode.figlet.js@latest/dist/textmode.figlet.umd.js"></script>
</head>
<body>
<script src="./sketch.js"></script>
</body>
</html>const t = textmode.create({
width: window.innerWidth,
height: window.innerHeight,
fontSize: 16,
plugins: [FigletPlugin],
});
t.setup(async () => {
const bulbhead = await t.loadFigFont('https://cdn.jsdelivr.net/gh/xero/figlet-fonts@master/Bulbhead.flf');
t.figFont(bulbhead);
t.figTextAlign('center');
t.figTextBaseline('center');
});
t.draw(() => {
t.background(8, 12, 24);
t.charColor(255, 220, 120);
t.figText('FIGLET', 0, 0, {
horizontalLayout: 'fitted',
});
});
t.windowResized(() => {
t.resizeCanvas(window.innerWidth, window.innerHeight);
});The UMD bundle exposes FigletPlugin globally, along with the other runtime exports such as TextmodeFigFont and FigFontParser.
Install the core library and the FIGlet add-on together:
npm install textmode.js textmode.figlet.jsThen import both packages in your sketch or application code:
import { textmode } from 'textmode.js';
import { FigletPlugin } from 'textmode.figlet.js';Importing textmode.figlet.js provides the TypeScript augmentation. Installing FigletPlugin enables the runtime FIGlet methods on that Textmodifier instance.
import { textmode } from 'textmode.js';
import { FigletPlugin } from 'textmode.figlet.js';
const t = textmode.create({
width: 800,
height: 600,
plugins: [FigletPlugin],
});The plugin installs the FIGlet drawing and measurement API during setup and removes it again if the plugin is uninstalled.
const bulbhead = await t.loadFigFont('https://cdn.jsdelivr.net/gh/xero/figlet-fonts@master/Bulbhead.flf');
t.figFont(bulbhead);
const custom = t.parseFigFont('Custom', figFontSource);Any CORS-enabled .flf URL works for runtime loading.
t.figTextAlign('center');
t.figTextBaseline('center');
t.figText('HELLO', 0, 0, {
horizontalLayout: 'fitted',
});
const width = t.figTextWidth('HELLO');
const height = t.figTextHeight('HELLO');
const bounds = t.figTextBounds('HELLO');Use the measurement helpers when you need to position FIGlet text precisely before rendering it.
figTextAlign('left' | 'center' | 'right')figTextBaseline('top' | 'center' | 'baseline' | 'bottom')
These settings are stored in plugin-owned state per Textmodifier instance and apply to subsequent figText() calls until changed.
Visit the textmode.js documentation at code.textmode.art for broader library guides and API reference, then use the local examples in this package to validate your FIGlet setup and rendering behavior.
textmode.figlet.js is licensed under the MIT License.