ASCII KIT

Appearance

LLM Resources

@ascii-kit/font - Examples ​

Multiple types of uses ​

JS (ES Module) ​

js
import { Font }   from '@ascii-kit/font'
import fontThreeD from '@ascii-kit/font-3d'

const font  = new Font( fontThreeD )
const ascii = await font.text( 'Hello World!' )

console.log( ascii )

Fetch Font data as text ​

js
import { Font } from '@ascii-kit/font'

const getAsciiString = async ( font: string, txt: string ) => {

	const res = await fetch( `https://unpkg.com/@ascii-kit/fonts-flf/dist/${font}.flf` )
	if ( !res.ok ) throw new Error( `Error getting file: ${res.statusText}` )
	const fontData     = await res.text()
	const fontInstance = new Font( fontData )
	const ascii        = await fontInstance.text( txt )

	return ascii

}

const ascii = await getAsciiString( '3d', 'Pigeon\nPosse' )

console.log( ascii )

Fetch Font data as Module JS ​

This method is only available in certain types of environments such as browsers.

js
import { Font } from '@ascii-kit/font'

const getAsciiString = async ( font: string, txt: string ) => {

	// const fontModule = await import( `https://cdn.jsdelivr.net/npm/@ascii-kit/fonts/dist/${name}.js` )
	const fontModule = await import( `https://cdn.jsdelivr.net/npm/@ascii-kit/font-${font}/+esm` )
	const fontData   = fontModule.default

	const fontInstance = new Font( fontData )
	const ascii        = await fontInstance.text( txt )

	return ascii

}
const ascii = await getAsciiString( '3d', 'Hello World!' )
console.log( ascii )

Usage with Vite ​

js
import { Font }         from '@ascii-kit/font'
import { defineConfig } from 'vite'

const getFont = async ( font: string, txt: string ) => {

	const res = await fetch( `https://unpkg.com/@ascii-kit/fonts-flf/dist/${font}.flf` )
	if ( !res.ok ) throw new Error( `Error getting file: ${res.statusText}` )
	const fontData = await res.text()

	const fontInstance = new Font( fontData )
	return await fontInstance.text( txt )

}

export default defineConfig( { define : {
	TITLE_ASCII_ANSI_SHADOW : JSON.stringify( await getFont( 'ansi--shadow', 'Pigeon\nPosse' ) ),
	TITLE_ASCII_3D          : JSON.stringify( await getFont( '3d', 'Pigeon\nPosse' ) ),
} } )

Usage in Browser HTML ​

html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>ASCII Font Viewer</title>
		<style>
			body {
				font-family: sans-serif;
				padding: 2em;
			}
			select, input {
				font-size: 1em;
				margin-bottom: 1em;
				padding: 0.5em;
				width: 100%;
				box-sizing: border-box;
			}
			pre {
				font-family: monospace;
				white-space: pre;
				background: #f4f4f4;
				padding: 1em;
				border-radius: 5px;
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<h1>ASCII Font Viewer</h1>

		<label for="fontSelect">Choose a font:</label>
		<select id="fontSelect">
			<option value="">Loading fonts...</option>
		</select>

		<label for="textInput">Enter text:</label>
		<input
			id="textInput"
			type="text"
			placeholder="Hello!"
			value="Hello!"
		>

		<pre id="output" contenteditable>Select a font to see your text in ASCII art</pre>

		<script type="module">
			const fontSelect = document.getElementById('fontSelect');
			const outputEl = document.getElementById('output');
			const textInput = document.getElementById('textInput');

			let currentFont = null;

			async function loadFontList() {
				try {
					const res = await import('https://cdn.jsdelivr.net/npm/@ascii-kit/fonts/+esm');
					const fontNames = res.default;

					fontSelect.innerHTML = '<option value="">-- Select a font --</option>';
					fontNames.forEach(name => {
						const option = document.createElement('option');
						option.value = name;
						option.textContent = name;
						fontSelect.appendChild(option);
					});
				} catch (err) {
					fontSelect.innerHTML = '<option value="">Error loading fonts</option>';
					outputEl.textContent = 'Failed to load font list: ' + err.message;
				}
			}

			async function renderFont(name, text) {

				if (!name) {
					outputEl.textContent = 'Please select a font.';
					return;
				}

				outputEl.textContent = `Loading font "${name}"...`;

				try {
					const { Font } = await import('https://cdn.jsdelivr.net/npm/@ascii-kit/font/+esm');
					const fontModule = await import(`https://cdn.jsdelivr.net/npm/@ascii-kit/font-${name}/+esm`);

					currentFont = new Font(fontModule.default);
					const asciiText = await currentFont.text(text);
					outputEl.textContent = asciiText;

				} catch (e) {
					outputEl.textContent = `Error loading font "${name}":\n\n${e.message}`;
				}
			}

			fontSelect.addEventListener('change', async (e) => {
				const selectedFont = e.target.value;
				const text = textInput.value || 'Hello!';
				await renderFont(selectedFont, text);
			});

			textInput.addEventListener('input', async (e) => {
				const text = e.target.value || 'Hello!';
				const selectedFont = fontSelect.value;
				if (currentFont && selectedFont) {
					const asciiText = await currentFont.text(text);
					outputEl.textContent = asciiText;
				}
			});

			loadFontList();
		</script>
	</body>
</html>