https://github.com/kubetail-org/fancy-ansi
Skip to content
Toggle navigation
Sign in
* Product
+
Actions
Automate any workflow
+
Packages
Host and manage packages
+
Security
Find and fix vulnerabilities
+
Codespaces
Instant dev environments
+
Copilot
Write better code with AI
+
Code review
Manage code changes
+
Issues
Plan and track work
+
Discussions
Collaborate outside of code
Explore
+ All features
+ Documentation
+ GitHub Skills
+ Blog
* Solutions
For
+ Enterprise
+ Teams
+ Startups
+ Education
By Solution
+ CI/CD & Automation
+ DevOps
+ DevSecOps
Resources
+ Learning Pathways
+ White papers, Ebooks, Webinars
+ Customer Stories
+ Partners
* Open Source
+
GitHub Sponsors
Fund open source developers
+
The ReadME Project
GitHub community articles
Repositories
+ Topics
+ Trending
+ Collections
* Pricing
Search or jump to...
Search code, repositories, users, issues, pull requests...
Search
[ ]
Clear
Search syntax tips
Provide feedback
We read every piece of feedback, and take your input very seriously.
[ ] [ ] Include my email address so I can be
contacted
Cancel Submit feedback
Saved searches
Use saved searches to filter your results more quickly
Name [ ]
Query [ ]
To see all available qualifiers, see our documentation.
Cancel Create saved search
Sign in
Sign up
You signed in with another tab or window. Reload to refresh your
session. You signed out in another tab or window. Reload to refresh
your session. You switched accounts on another tab or window. Reload
to refresh your session. Dismiss alert
{{ message }}
kubetail-org / fancy-ansi Public
* Notifications
* Fork 0
* Star 49
*
Small JavaScript library for converting ANSI to HTML
kubetail-org.github.io/fancy-ansi/
License
Apache-2.0 license
49 stars 0 forks Branches Tags Activity
Star
Notifications
* Code
* Issues 2
* Pull requests 0
* Actions
* Projects 0
* Security
* Insights
Additional navigation options
* Code
* Issues
* Pull requests
* Actions
* Projects
* Security
* Insights
kubetail-org/fancy-ansi
This commit does not belong to any branch on this repository, and may
belong to a fork outside of the repository.
main
BranchesTags
Go to file
Code
Folders and files
Name Name Last commit Last commit
message date
Latest commit
History
22 Commits
bench bench
examples examples
hack hack
src src
.eslintrc.json .eslintrc.json
.gitignore .gitignore
LICENSE LICENSE
README.md README.md
index.html index.html
package.json package.json
pnpm-lock.yaml pnpm-lock.yaml
postcss.config.js postcss.config.js
tailwind.config.ts tailwind.config.ts
tsconfig.json tsconfig.json
vite.config.ts vite.config.ts
vitest.setup.ts vitest.setup.ts
View all files
Repository files navigation
* README
* Apache-2.0 license
Fancy-ANSI
Fancy-ANSI is a small JavaScript library for converting ANSI to
beautiful, browser-safe HTML
Screen Shot 2024-03-30 at 1 19 54 PM
Demo: https://www.kubetail.com/demo
Preview: https://kubetail-org.github.io/fancy-ansi/
Introduction
While adding ANSI markup support to kubetail we tested out several
popular popular ANSI-to-html conversion libraries (e.g.
ansi-html-community, ansi-to-html, ansi_up) and ran into a few
problems:
* Failure to parse some of our users' ANSI markup
* Use of hard-coded styles that made customization more difficult
* Lack of support for CSS variables
To solve these problems and make something that integrated nicely
into our frontend stack (Tailwind, React) we created Fancy-ANSI. The
library is designed to be small (~4 kb gzipped), performant,
easy-to-use and safe from XSS attacks. It has the following features:
* Supports easy customization using CSS variables
* Supports almost all SGR codes
* Includes a Tailwind plugin that enables support for easy theming
* Includes a React component for easy use in a React environment
* Includes useful utilities like hasAnsi() and stripAnsi() that
come in handy when working with ANSI
* Includes popular color palettes that can be swapped in easily
Try it out and let us know what you think! If you notice any bugs or
have any feature requests just create a GitHub Issue.
Quickstart
Install the library using your favorite package manager:
# npm
npm install fancy-ansi
# yarn
yarn add fancy-ansi
# pnpm
pnpm add fancy-ansi
Now you can use it in your code with React:
// ExampleComponent.jsx
import { AnsiHtml } from 'fancy-ansi/react';
export const ExampleComponent = () => {
const text = '\x1b[34mhello \x1b[33mworld\x1b[0m';
return ;
};
Or with Vanilla-JS:
// example.ts
import { FancyAnsi } from 'fancy-ansi';
const fancyAnsi = new FancyAnsi();
export function addElementWithAnsi() {
const el = document.createElement('div');
el.innerHTML = fancyAnsi.toHtml('\x1b[34mhello \x1b[33mworld\x1b[0m');
document.body.append(el);
}
The HTML rendered is browser-safe and ready with some sensible color
choices that can be customized easily (see below).
Configuration
You can configure Fancy-ANSI using CSS variables. For example, to
invert blacks in dark mode you can change the value of black when the
document has a "dark" class:
:root {
--ansi-black: #000;
}
.dark {
--ansi-black: #FFF;
}
The full list of supported variables can be found in the SGR
Parameters section below.
SGR Parameters
n Name Supported CSS Variables Default
0 Reset [?]
1 Bold [?] --ansi-bold-font-weight 600
2 Dim [?] --ansi-dim-opacity 0.7
3 Italic [?]
4 Underline [?]
5 Slow blink
6 Fast blink
7 Invert
8 Hide [?]
9 Strikethrough [?]
10 Default font [?]
11 Alternative font 1 [?] --ansi-font-1
12 Alternative font 2 [?] --ansi-font-2
13 Alternative font 3 [?] --ansi-font-3
14 Alternative font 4 [?] --ansi-font-4
15 Alternative font 5 [?] --ansi-font-5
16 Alternative font 6 [?] --ansi-font-6
17 Alternative font 7 [?] --ansi-font-7
18 Alternative font 8 [?] --ansi-font-8
19 Alternative font 9 [?] --ansi-font-9
20 Gothic
21 Double underline [?]
22 Bold off [?]
23 Italic off [?]
24 Underline off [?]
25 Blink off
26 Proportional
spacing
27 Invert off
28 Hidden off [?]
29 Strikethrough off [?]
30 Foreground color - [?] --ansi-black #2e3436
black
31 Foreground color - [?] --ansi-red #cc0000
red
32 Foreground color - [?] --ansi-green #4e9a06
green
33 Foreground color - [?] --ansi-yellow #c4a000
yellow
34 Foreground color - [?] --ansi-blue #3465a4
blue
35 Foregorund color - [?] --ansi-magenta #75507b
magenta
36 Foreground color - [?] --ansi-cyan #06989a
cyan
37 Foreground color - [?] --ansi-white #d3d7cf
white
Foreground color -
38 extended (see [?]
below)
39 Default foreground [?]
color
40 Background color - [?] --ansi-black #2e3436
black
41 Background color - [?] --ansi-red #cc0000
red
42 Background color - [?] --ansi-green #4e9a06
green
43 Background color - [?] --ansi-yellow #c4a000
yellow
44 Background color - [?] --ansi-blue #3465a4
blue
45 Background color - [?] --ansi-magenta #75507b
magenta
46 Background color - [?] --ansi-cyan #06989a
cyan
47 Background color - [?] --ansi-white #d3d7cf
white
Background color -
48 extended (see [?]
below)
49 Default background [?]
color
50 Proportional
spacing off
51 Frame [?] --ansi-frame-outline 1px
solid
52 Encircle
53 Overline [?]
54 Frame/encircle off [?]
55 Overline off [?]
Underground color
58 - extended (see [?]
below)
59 Default underline [?]
color
60 Right side line
61 Double line on the
right side
62 Left side line
63 Double line on the
left side
64 Ideogram stress
marking
65 Side lines off
73 Superscript [?] --ansi-superscript-font-size 80%
74 Subscript [?] --ansi-subscript-font-size 80%
75 Superscript/ [?]
subscript off
90 Foreground color - [?] --ansi-bright-black #555753
bright black
91 Foreground color - [?] --ansi-bright-red #ef2929
bright red
92 Foreground color - [?] --ansi-bright-green #8ae234
bright green
93 Foreground color - [?] --ansi-bright-yellow #fce94f
bright yellow
94 Foreground color - [?] --ansi-bright-blue #729fcf
bright blue
95 Foreground color - [?] --ansi-bright-magenta #ad7fa8
bright magenta
96 Foreground color - [?] --ansi-bright-cyan #34e2e2
bright cyan
97 Foreground color - [?] --ansi-bright-white #eeeeec
bright white
100 Background color - [?] --ansi-bright-black #555753
bright black
101 Background color - [?] --ansi-bright-red #ef2929
bright red
102 Background color - [?] --ansi-bright-green #8ae234
bright green
103 Background color - [?] --ansi-bright-yellow #fce94f
bright yellow
104 Background color - [?] --ansi-bright-blue #729fcf
bright blue
105 Background color - [?] --ansi-bright-magenta #ad7fa8
bright magenta
106 Background color - [?] --ansi-bright-cyan #34e2e2
bright cyan
107 Background color - [?] --ansi-bright-white #eeeeec
bright white
Extended colors:
Code pattern Description CSS Variables
38;2;{r};{g};{b} Set foreground color - (r,g,b)
38;5;{n} (0 <= n <= Set foreground color - standard --ansi-{color}
15) colors
38;5;{n} (16 <= n <= Set foreground color - 6x6 rgb
231) cube
38;5;{n} (232 <= n <= Set foreground color - 24-step --ansi-gray-
232) grayscale {step}
48;2;{r};{g};{b} Set background color - (r,g,b)
48;5;{n} (0 <= n <= Set background color - standard --ansi-{color}
15) colors
48;5;{n} (16 <= n <= Set background color - 6x6 rgb
231) cube
48;5;{n} (232 <= n <= Set background color - 24-step --ansi-gray-
232) grayscale {step}
58;2;{r};{g};{b} Set underline color - (r,g,b)
58;5;{n} (0 <= n <= Set underline color - standard --ansi-{color}
15) colors
58;5;{n} (16 <= n <= Set underline color - 6x6 rgb
231) cube
58;5;{n} (232 <= n <= Set underline color - 24-step --ansi-gray-
232) grayscale {step}
Integrations
Tailwind
The Fancy-ANSI Tailwind plugin makes it easy to support theming and
to access multiple built-in palettes from your css. To use the
plugin, add it to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
plugins: [
// ...
require('fancy-ansi/plugin')
]
}
Now you can access the built-in palettes using the Tailwind theme()
function. For example, you can implement two different palettes for
light/dark mode like this:
/* 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);
}
.dark {
--ansi-black: theme(ansi.colors.xtermjs.black);
--ansi-red: theme(ansi.colors.xtermjs.red);
--ansi-green: theme(ansi.colors.xtermjs.green);
--ansi-yellow: theme(ansi.colors.xtermjs.yellow);
--ansi-blue: theme(ansi.colors.xtermjs.blue);
--ansi-magenta: theme(ansi.colors.xtermjs.magenta);
--ansi-cyan: theme(ansi.colors.xtermjs.cyan);
--ansi-white: theme(ansi.colors.xtermjs.white);
--ansi-bright-black: theme(ansi.colors.xtermjs.bright-black);
--ansi-bright-red: theme(ansi.colors.xtermjs.bright-red);
--ansi-bright-green: theme(ansi.colors.xtermjs.bright-green);
--ansi-bright-yellow: theme(ansi.colors.xtermjs.bright-yellow);
--ansi-bright-blue: theme(ansi.colors.xtermjs.bright-blue);
--ansi-bright-magenta: theme(ansi.colors.xtermjs.magenta);
--ansi-bright-cyan: theme(ansi.colors.xtermjs.cyan);
--ansi-bright-white: theme(ansi.colors.xtermjs.white);
}
React
Fancy-ANSI has a convenient React component that you can import from
the fancy-ansi/react module:
// ExampleComponent.jsx
import { AnsiHtml } from 'fancy-ansi/react';
export const ExampleComponent = () => {
const text = '\x1b[34mhello \x1b[33mworld\x1b[0m';
return ;
};
Examples
You can see some example implementations in the examples/ directory:
* Vite - React
* Next.js
API
FancyAnsi - The converter class
FancyAnsi
toHtml(input)
* @param {string} input - The input string
* @returns {string} Browser-safe HTML string containing stylized ANSI content
Example:
import { FancyAnsi } from 'fancy-ansi';
const fancyAnsi = new FancyAnsi();
fancyAnsi.toHtml('\x1b[1mThis is in bold.\x1b[0m');
hasAnsi() - Check if a string has ANSI markup
hasAnsi(input)
* @param {string} input - The input string
* @returns {boolean} Boolean indicating whether or not input string contains ANSI markup
Example:
import { hasAnsi } from 'fancy-ansi';
if (hasAnsi('\x1b[1mThis is in bold.\x1b[0m')) {
console.log('string has ansi');
} else {
console.log('string doesn\'t have ansi');
}
stripAnsi() - Remove ANSI markup
stripAnsi(input)
* @param {string} input - The input string
* @returns {string} Content of input string with ANSI markup removed
Example:
import { stripAnsi } from 'fancy-ansi';
const withoutAnsi = stripAnsi('\x1b[1mThis is in bold.\x1b[0m');
console.log(`string without ansi: ${withoutAnsi}`);
colors - Built-in palettes
`fancy-ansi/colors` module
Example:
import { xtermjs, terminalapp } from 'fancy-ansi/colors';
console.log(`xterm.js red: ${xtermjs.red}`);
console.log(`Terminal.app red: ${terminalapp.red}`);
Available palettes:
* eclipse
* putty
* terminalapp
* ubuntu
* vga
* vscode
* windows10
* xterm
* xtermjs
Development
Get the code
To develop Fancy-ANSI, first clone the repository then install the
dependencies:
git clone git@github.com:kubetail-org/fancy-ansi.git
cd fancy-ansi
pnpm install
Run the dev server
Fancy-ANSI uses vite for development. To run run the vite dev server,
use the dev command:
pnpm dev
Now you can access the demo page and see your changes at http://
localhost:5173/.
Run the unit tests
Fancy-ANSI uses jest for testing (via vitest). To run the tests, use
the test command:
pnpm test
The test files are colocated with the source code in the src/
directory, with the filename format {name}.test.(ts|tsx).
Build for production
To build Fancy-ANSI for production, run the build command:
pnpm build
The production files will be located in the dist/ directory.
Acknowledgements
* The ANSI parsing code is from ansi_up
* has/strip methods use Chalk's ansi-regex
* Fancy Nancy
About
Small JavaScript library for converting ANSI to HTML
kubetail-org.github.io/fancy-ansi/
Topics
html conversion ansi
Resources
Readme
License
Apache-2.0 license
Activity
Custom properties
Stars
49 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases 1
v0.1.0 Latest
Mar 29, 2024
Packages 0
No packages published
Languages
* TypeScript 95.0%
* CSS 2.9%
* HTML 2.0%
* JavaScript 0.1%
Footer
(c) 2024 GitHub, Inc.
Footer navigation
* Terms
* Privacy
* Security
* Status
* Docs
* Contact
* Manage cookies
* Do not share my personal information
You can't perform that action at this time.