BitmapIt

A lightweight JavaScript library for generating bitmap-style ASCII art text. BitmapIt allows you to create customizable retro-style text displays with various styling options and character sets.

Features

• Convert text to customizable bitmap patterns
• Multiple display characters (blocks, symbols, custom characters)
• Adjustable font dimensions and spacing
• Clean and simple API
• HTML output with custom colors
• Mobile-friendly and responsive
• Zero dependencies

Installation

npm install bitmapit

Or include directly in your HTML:

<script type="module">
  import { BitmapFontGenerator } from './path/to/bitmapit/index.js';
</script>

Basic Usage

import { BitmapFontGenerator, defaultFont } from 'bitmapit';

// Create generator
const generator = new BitmapFontGenerator();

// Define characters
Object.entries(defaultFont).forEach(([char, pattern]) => {
  generator.defineCharacter(char, pattern);
});

// Generate text
const bitmap = generator.generateText('HELLO');
console.log(generator.toAscii(bitmap));

Customization

Font Dimensions

const generator = new BitmapFontGenerator({
  width: 8,    // Character width
  height: 8,   // Character height
  spacing: 1   // Space between characters
});

Display Options

const generator = new BitmapFontGenerator({
  onChar: '█',           // Character for filled pixels
  offChar: ' ',          // Character for empty pixels
  color: '#ffffff',      // Text color (HTML only)
  backgroundColor: '#000000'  // Background color (HTML only)
});

API Reference

Constructor

new BitmapFontGenerator(options)

Options:

• width (Number, default: 8): Width of each character
• height (Number, default: 8): Height of each character
• spacing (Number, default: 1): Space between characters
• onChar (String, default: '█'): Character for filled pixels
• offChar (String, default: ' '): Character for empty pixels

Methods

defineCharacter(char, pattern)

Define a new character pattern.

generator.defineCharacter('A', [
  [0,1,1,1,0],
  [1,0,0,0,1],
  [1,1,1,1,1],
  [1,0,0,0,1],
  [1,0,0,0,1]
]);

generateText(text)

Generate a bitmap pattern for the given text.

const bitmap = generator.generateText('HELLO');

toAscii(bitmap, options)

Convert a bitmap to ASCII art.

const ascii = generator.toAscii(bitmap, { 
  on: '█', 
  off: ' ' 
});

toHtml(bitmap, options)

Convert a bitmap to HTML with styling.

const html = generator.toHtml(bitmap, {
  color: '#ff0000',
  backgroundColor: '#000000',
  on: '█',
  off: ' '
});

setDimensions(width, height)

Update the font dimensions.

generator.setDimensions(10, 10);

setSpacing(spacing)

Set the spacing between characters.

generator.setSpacing(2);

Browser Support

• Chrome 61+
• Firefox 60+
• Safari 11+
• Edge 16+

Examples

Visit our demo page to try BitmapIt live and see various examples in action.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Created by Om Preetham

Support

• Report issues on GitHub