terminal-preview v0.1

An HTML element that is ANSI-escape styling sequence aware.

Can be used to display raw ANSI-styled terminal data, or as an interactive element using the contenteditable="true" HTML attribute.


You could have a pre element with a selection of contents:

\e[35m./terminal.css\e[m\e[36m-\e[m.terminal::-webkit-scrollbar-thumb { background: #999; border-radius: 1ex; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal .\e[01;31mcursor\e[m:after { content: ''; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal.blink-\e[01;31mcursor\e[m .\e[01;31mcursor\e[m:after { animation: blink 1s linear infinite; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal.\e[01;31mcursor\e[m-pipe .\e[01;31mcursor\e[m:after { content: '|'; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal.\e[01;31mcursor\e[m-underscore .\e[01;31mcursor\e[m:after { content: '_'; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal.\e[01;31mcursor\e[m-block .\e[01;31mcursor\e[m:after { content: '\02588'; }
\e[35m./terminal.css\e[m\e[36m-\e[m.terminal .dim .fg-90,
\e[35m./terminal.css\e[m\e[36m-\e[m.terminal-wrap .copy { display: none; position: absolute; right: 2px; top: 2px; }
\e[35m./terminal.css\e[m\e[36m-\e[m.terminal-wrap:hover .copy { display: block; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal-wrap:hover .\e[01;31mcursor\e[m,
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal:focus .\e[01;31mcursor\e[m { display: none; }

You could also \e[5mpreview\e[0m items as an \e[31;4minline element\e[0m. There are also classes that can change the style to a light terminal \e[32mlike this, or add in a cursor like this or this.

I've used the component as an input where content is evaluated as your type. Try changing the 31 to 34 and you can see the element changing style as you type:

\e[31mRed\e[m and \e[32mgreen\e[m and \e[33myellow\e[m!

By default the control characters aren't shown, until hovered or when the element has focus. Likewise any non-existent items (like the cursor or interpreted control codes) will be hidden.