Kirari compared

Four ways to highlight code. Compare the browser footprint, the APIs, and the trade-offs that matter for your project.

At a glance

	Kirari1.1.0 · local build	Shiki(opens in a new tab)4.5.0	Prism(opens in a new tab)1.30.0	highlight.js(opens in a new tab)11.12.0
JavaScript → HTMLKB, minified + gzip	4.2 KB	73.5 KB	5.3 KB	11.1 KB
Engine	Regex rules and scanners	TextMate grammars	Regex grammars	Regex modes
Languages shipped	48	242	297	193
Theming	CSS classes and variables	VS Code themes; CSS variables supported	CSS classes	CSS classes
API	Synchronous	Sync after setup; synchronous core available	Synchronous	Synchronous
Incremental streaming	Built-in token patches	@shikijs/stream	No built-in API	No built-in API
Token offsets	Yes	Yes	No	No
Auto-detection	No	No	No	Yes

Streaming performance

Median time to highlight a JavaScript response arriving in 16-character chunks. Lower is better.

	Kirari1.1.0 · local build	Shiki(opens in a new tab)4.5.0 · JavaScript engine	Prism(opens in a new tab)1.30.0	highlight.js(opens in a new tab)11.12.0
~2 KiB130 updates	2.2 ms	27 ms	31 ms	36 ms
~8 KiB513 updates	9.1 ms	93 ms	510 ms	605 ms
~32 KiB2,052 updates	64 ms	129 ms	6.8 s	7.6 s

When to pick which

Kirari

Small runtime, live code

For known languages, incremental token patches, and colors controlled by CSS. Lexical rules trade some grammar fidelity for a small runtime.

Shiki

Rich syntax, VS Code themes

For TextMate scopes, embedded languages, and VS Code themes. Supports synchronous setup, CSS variables, and streaming through @shikijs/stream.

Prism

Languages and plugins

For a broad language catalog and an established plugin ecosystem. Languages register on a shared Prism instance; many plugins target the DOM.

highlight.js

Unlabeled code

For automatic language detection when the language is unknown. A modular build lets you register only the languages you need.

Same snippet, four ways

Kirari

import { highlight } from '@vortexlabs/kirari'
import '@vortexlabs/kirari/theme.css'

const html = highlight('const answer = 42')

Shiki

import { codeToHtml } from 'shiki'

const html = await codeToHtml('const answer = 42', {
  lang: 'javascript',
  theme: 'github-dark',
})

Prism

import Prism from 'prismjs'

const html = Prism.highlight(
  'const answer = 42',
  Prism.languages.javascript,
  'javascript',
)

highlight.js

import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'

hljs.registerLanguage('javascript', javascript)
const html = hljs.highlight('const answer = 42', {
  language: 'javascript',
}).value

Get started Open playground