Simple block
The default variant: highlighted code, nothing else. Indentation inside the element is removed.
Examples
Every example is a window: the live result on top, the exact markup that renders it underneath. Copy the markup, change one attribute, and you get the same result on your site.
<vt-code>
Line numbers, first line and emphasized lines
highlight-lines uses the displayed numbers, so it follows start-line.
Full variant
Header with title and language, search, wrap toggle, download, full screen and copy. Open the search and press Enter to move between matches.
Full variant, minus some features
Individual attributes always win over the variant preset.
Simple variant with a copy button
Without a header, actions float in the corner and appear on hover or focus.
Diff
Lines starting with + and - are marked as added and removed. The copy button copies the diff as written.
Collapsible and wrapped
collapsible="4" shows four lines and a button; wrap soft-wraps long lines.
Any language, loaded on demand
Common languages are bundled; the other 180 are fetched only when used. language="auto" detects the language.
Theme and custom properties
theme picks a built-in theme; CSS variables override any token. This page sets
.brand-example { --vt-accent: #7c9cff; --vt-accent-fg: #7c9cff; --vt-radius: 4px; }.
Interface language
English and French ship with the library; register other languages with Vitrine.registerLocale().
<vt-markdown>
Simple rendering
GitHub Flavored Markdown with highlighted code blocks. The text uses the page font.
Full variant
Preview, source and split tabs (use the arrow keys), table of contents, heading anchors, search and copy.
Chosen tabs, source first
tabs picks which tabs exist and in which order; default-tab picks the first one shown.
Raw HTML
By default raw HTML is shown as text. With allow-html it is rendered, but sanitized: the event handler below is removed.
More
Native details elements are allowed.Image policy
images="block" replaces images with their alt text, so content cannot track readers with remote pixels.
Loaded from a file
src loads same-origin files by default. Relative links and images resolve against the file.
<vt-json>
Pretty printed
The simple variant formats and highlights JSON. Numbers are shown exactly as written.
Tree view
Click a row to see its JSONPath and copy it. Arrow keys move through the tree; Right and Left open and close nodes.
Raw view, sorted, indented by 4
view, sort-keys and indent shape the raw view.
Invalid JSON
The error says what is wrong and where, and the line is highlighted. on-invalid="raw" shows the text with a notice instead.
Editing
Edit code with highlighting
mode="edit" turns any element into an editor. Tab indents, Enter keeps the indentation,
Ctrl+Z and Ctrl+Y undo and redo, Escape then Tab leaves the field.
View and edit with a toggle
edit-toggle adds a button that switches between reading and editing.
Markdown editor with live preview
Source and preview side by side, scrolled together. The preview updates as you type.
JSON with live validation
Errors show their line and column as you type; the Tree tab shows the document once it is valid.
Layout and themes
Preview on top, source below
split-preview puts the preview on the right, left, bottom or top. The full variant adds buttons
to swap and stack the panes.
Syntax themes
258 themes from highlight.js, loaded on demand. syntax-theme-dark is used when the interface
theme is dark. See them all on the themes page.
Only the features you want
Variants are shortcuts. Here: no variant, but a header, full screen and copy, and no language badge.
<vt-csv>
Sortable table
Click a column to sort it. Numbers and dates sort by value; empty cells always go last.
Semicolons, no header, small pages
The delimiter is detected; header-row="false" names the columns, page-size paginates.
<vt-tags>
Display tags from JSON
Colors, counts and links come from the data. clickable makes them buttons firing vt-tag-click.
Hashtag field with suggestions
Type # and a word: suggestions appear, Enter picks one, a space or a comma creates a new tag.
Backspace twice removes the last tag.
Pick from a long, grouped list
The full variant adds a browse panel with a filter and checkboxes, and a button to clear the selection.
Custom look with CSS
Tokens restyle every tag; per-tag parts target single tags. This page sets
.square-tags { --vt-tag-radius: 4px; } and
.square-tags::part(tag-kind-danger) { font-weight: 700; }.
<vt-diff>
Compare two texts
Side by side, with changed words marked and unchanged lines folded. Copy gives a standard patch.
Show a patch, unified
Give it the output of git diff: hunks are read, gaps between them are marked.
<vt-terminal>
Commands and output
Lines starting with $ are commands: hover one to copy it without the
prompt. The header button copies every command, ready to run.
ANSI colors and progress bars
escapes lets you write \e in HTML. Colors follow the theme;
carriage returns redraw the line, so the progress bar shows its final state.
Prompts with a context, continued commands
ada@box:~/app$ is a prompt too. A command ending with \
continues on the next line, and is copied as one command.
Long output, collapsed
collapse-output="4" keeps long logs short. Search still finds hidden lines.
Typing replay
typing types each command when the session comes into view, then shows
its output. Press Replay to watch it again.
<vt-tree>
Indented names, notes and change markers
+, -, ~ and * mark added, removed,
modified and highlighted entries; # text adds a note.
Straight from the tree command
Paste the output as it is; sort="name" puts folders first.
Paths, links to a repository
One path per line, as git ls-files prints them.
href-template turns files into links; depth="1" keeps
folders closed at first.
<vt-http>
Request and response
Raw HTTP, as in a .http file. The token and the API key are masked; the
eye button shows them. Open the Code tab for curl, fetch, Python and HTTPie.
From a curl command, code first
Paste "Copy as cURL" from your browser. view="code" opens the Code tab;
snippets picks the languages and their order.
An error, side by side
layout="columns" puts the response next to the request on wide screens.
<vt-log>
Mixed formats, levels and stack traces
Plain text, JSON lines and logfmt in one log. The level buttons show or hide each level; the stack trace stays with its error.
Only what matters
levels chooses the levels shown at first; the others stay one click away.
<vt-chart>
Lines from CSV
Every numeric column is a series. Point at the chart, or focus it and use the arrow keys: the values are announced. The Table tab shows the same data.
Stacked bars with a unit
stacked piles the series; unit and compact format the values.
A donut from JSON
Chart.js style data works as is; type="pie" draws the first series as a donut.
<vt-openapi>
An API reference from YAML
Open an endpoint: parameters, request body, responses and schemas, then an example request with curl, fetch, Python and HTTPie code.
<vt-env>
A dotenv file with secrets
Secret values are masked in the table, the raw view, copy and download until the eye button reveals them. References link to the variable they use.
INI sections
[sections] group the keys; the Raw tab shows the file as written.
<vt-hex>
A PNG header
The badge names the file type from its first bytes. Point at a byte to see it in both columns, or focus the dump and move with the arrow keys.
Base64 and narrow rows
format="base64" reads base64; columns and group set the layout. Search accepts hex bytes or text.
<vt-timeline>
An incident timeline
Events are grouped by day with the time elapsed between them. The kind buttons show or hide each kind; long descriptions fold.
From a changelog
A Keep a Changelog file becomes one release per version, with its sections as tags.
<vt-job>
A running job
The bar follows the steps; a running step shows its own progress. Open a step to read its log.
A failed run from JSON
The failed step opens by default, with ANSI colors in its log. The search goes through every step.
<vt-git>
From git log --graph
Paste the output of git log --graph --oneline --decorate: lanes, merges and labels are drawn from it. Select a commit to see its details.
From a pretty format, with authors and dates
With --pretty=format:'%H|%P|%an|%ad|%D|%s' the lanes are computed from the parents. The branch buttons show only what a branch reaches.
<vt-regex>
Named groups
The pattern is colored by part and explained in words; each group has its color in the text and its column in the table.
Replace
replace shows the result of the substitution, with $1 or $<name>.
<vt-yaml>
Anchors and merge keys
The tree shows values resolved; the Raw tab keeps the YAML with its comments and anchors. Copy as JSON gives the same data as JSON.
Several documents
A stream with --- becomes a list of documents.
<vt-xml>
An Atom feed
Elements, attributes and text as a tree, with namespaces. Select a node to copy its XPath.
Comments and namespaces
Comments and prefixed names are rows of their own; the namespace URI is the title of a prefixed name.
<vt-toml>
A Cargo manifest
Tables, inline tables and arrays, with the type of each value.
Dates and arrays of tables
Dates and times keep their TOML type; numbers are shown as written.
<vt-jwt>
An access token
Header and payload as trees, registered claims explained, dates in your language. now fixes the time used for the status.
Warnings
An unsigned token (alg: none) without expiry is flagged. Nothing is ever verified or sent.
<vt-cron>
One expression
Each field is colored and explained; the next runs are listed in the time zone you choose, with a week grid.
A crontab
Comments, variables and CRON_TZ are read; every entry gets its description, next run and highlighted command.
<vt-cert>
A chain
Each certificate is a card linked to its issuer; the self-signed root is marked. Fingerprints are computed in the browser.
A weak certificate
SHA-1 signatures and RSA keys under 2048 bits are flagged. The ASN.1 tab shows the raw structure.
From JavaScript
For data you did not write, set the content property (or data on
<vt-json>). It is never parsed as HTML.
Vitrine.render()
Creates the element, sets its attributes and content, and puts it in the target.
A JavaScript value, with events
The data property serializes any value. Every component dispatches vt-* events.