<vt-code>
Syntax highlighting for 190 languages and 258 color themes, line numbers, diffs, search, download, and an editor.
Display anything, anywhere
Web components that show code, Markdown, JSON, tables, diffs, terminals, file trees, HTTP calls, logs, charts and API references on any site. One script tag, no framework, safe with content you did not write.
Made with
Twenty-four elements, view or edit
Each element works as a plain block in its simple variant. Add
variant="full" for the toolbar, search and tabs, switch features on one
attribute at a time, and add mode="edit" to let people change the
content.
<vt-markdown>
GitHub Flavored Markdown, sanitized. Preview, source and split tabs, table of contents and anchors.
<vt-json>
Pretty printing or a collapsible tree, JSONPath copy, exact big numbers and clear syntax errors.
<vt-csv>
CSV and TSV as an accessible table: sorting by type, pagination and search.
<vt-tags>
Show tags from JSON, or a form field with suggestions, #hashtags and a browse panel.
<vt-diff>
Compare two texts or show a patch, side by side or unified, with changed words marked.
<vt-terminal>
Shell sessions with ANSI colors, commands copied without their prompt, and an optional typing replay.
<vt-tree>
File trees from tree output, paths or JSON, with icons, change markers
and keyboard navigation.
<vt-http>
HTTP requests and responses for API docs, with masked secrets and the same request as curl, fetch or Python.
<vt-log>
Application logs with levels, timestamps, fields and stack traces, filters and live streaming.
<vt-chart>
Line, area, bar and donut charts from CSV or JSON, drawn with Apache ECharts in your theme colors.
<vt-openapi>
API references from OpenAPI in JSON or YAML: endpoints, schemas, and examples with ready-to-run code.
<vt-env>
Dotenv, INI and properties files as a table, with references linked and secrets masked until revealed.
<vt-hex>
Hex dumps of binary data with offsets, ASCII, bytes colored by kind and the file type read from its first bytes.
<vt-timeline>
Incident timelines and release history from JSON or a changelog, grouped by date with the time between events.
<vt-job>
Jobs and pipelines with a progress bar, steps with their status and duration, and the log of each step.
<vt-git>
Commit history as a graph of branches and merges, with branch labels, tags and the details of each commit.
<vt-regex>
Regular expressions explained and tested: tokens colored, matches and groups highlighted in the text.
<vt-yaml>
YAML as a tree like JSON, with several documents, anchors and merge keys, and a highlighted raw view.
<vt-xml>
XML as a tree of elements, attributes, text and comments, read safely: no entities expanded, nothing fetched.
<vt-toml>
TOML configuration files as a typed tree, with dates, inline tables and arrays of tables.
<vt-jwt>
JSON Web Tokens decoded: header, claims in words, expiry and warnings. Never verified, never sent anywhere.
<vt-cron>
Cron expressions and crontabs explained in words, with the next runs in your time zone and a week grid.
<vt-cert>
X.509 certificates and chains from PEM: names, validity, keys, extensions and fingerprints, read without fetching anything.
Built to be dropped into other people's pages
- No framework, no build step
- Standard custom elements. They work in plain HTML, PHP, WordPress, Django, Vue, React, Svelte and Angular.
- Secure by default
- Sanitized Markdown, no eval, size and depth limits. Works under a strict CSP with Trusted Types, like this site.
- Themable in one line
-
Five built-in themes, CSS variables on any ancestor,
::part()selectors and custom themes. - Accessible
- Keyboard tabs and trees, labelled controls, screen reader announcements and WCAG AA contrast in every theme.
Quick start
Pick the way your site loads scripts. Consumers never need Node.js.
Ship it in one line
Add the script, write the element, and your content is displayed safely, with themes, search and copy. No build step, no framework.