Tiny , Performant, Secure ANSI to HTML Solution – Fancy-ANSI

Category: Javascript | May 14, 2024
Views Total:13 views
Official Page:Go to website
Last Update:May 14, 2024


Tiny , Performant, Secure ANSI to HTML Solution – Fancy-ANSI


Fancy-ANSI is a tiny JavaScript (TypeScript) library that converts text with ANSI terminal codes into browser-safe HTML.

It’s designed to be small, performant, and easy to use, while protecting against XSS attacks. Can be helpful for web developers who need to display ANSI-styled text in their web applications.

Understanding ANSI Markup and SGR Parameters

ANSI escape codes are special sequences of characters used to control text formatting and color in terminals. They begin with an escape character (\x1b or \033) followed by a series of parameters.

SGR (Select Graphic Rendition) parameters are a subset of ANSI escape codes that specifically handle text styling and color. For example, \x1b[31m sets the text color to red, and \x1b[0m resets the styling to the default. Fancy-ANSI handles these codes and renders them correctly in HTML.

How to use it:

1. Install Fancy-ANSI using your preferred package manager:

# npm
npm install fancy-ansi
# yarn
yarn add fancy-ansi
# pnpm
pnpm add fancy-ansi

2. Import Fancy-ANSI and use it in your project:

// Vanilla JavaScript
import { FancyAnsi } from 'fancy-ansi';
const fancyAnsi = new FancyAnsi();
fancyAnsi.toHtml('\x1b[34mCSS \x1b[33mScript\x1b[0m');
// React
import { AnsiHtml } from 'fancy-ansi/react';
export const ExampleComponent = () => {
  const text = '\x1b[34mCSS \x1b[33mScript\x1b[0m';
  return <AnsiHtml text={text} />;

3. Fancy-ANSI allows customization using CSS variables. For instance, you can change the color of black text in dark mode:

:root {
  --ansi-black: #000;
.dark {
  --ansi-black: #FFF;

4. The library also includes a Tailwind plugin, which enables developers to integrate with Tailwind CSS projects and access various built-in color palettes.

// tailwind.config.js
module.exports = {
  plugins: [
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --ansi-black: theme(ansi.colors.vscode.black);
    --ansi-red: theme(ansi.colors.vscode.red);
    --ansi-green: theme(ansi.colors.vscode.green);
    --ansi-yellow: theme(ansi.colors.vscode.yellow);
    --ansi-blue: theme(ansi.colors.vscode.blue);
    --ansi-magenta: theme(ansi.colors.vscode.magenta);
    --ansi-cyan: theme(ansi.colors.vscode.cyan);
    --ansi-white: theme(ansi.colors.vscode.white);
    --ansi-bright-black: theme(ansi.colors.vscode.bright-black);
    --ansi-bright-red: theme(ansi.colors.vscode.bright-red);
    --ansi-bright-green: theme(ansi.colors.vscode.bright-green);
    --ansi-bright-yellow: theme(ansi.colors.vscode.bright-yellow);
    --ansi-bright-blue: theme(ansi.colors.vscode.bright-blue);
    --ansi-bright-magenta: theme(ansi.colors.vscode.magenta);
    --ansi-bright-cyan: theme(ansi.colors.vscode.cyan);
    --ansi-bright-white: theme(ansi.colors.vscode.white);
  /* ... */

5. API methods.

  • FancyAnsi.toHtml(input): Converts an input string containing ANSI codes into browser-safe HTML.
  • FancyAnsi.hasAnsi(input): Checks if an input string contains ANSI markup.
  • FancyAnsi.stripAnsi(input): Removes ANSI markup from an input string.

You Might Be Interested In:

Leave a Reply