Syntax highlighting with a little light

Kirari is a tiny, DOM-free highlighter for 48 languages. Every token becomes a class, and your CSS picks the colors.

npm install @vortexlabs/kirari

type Greeting = { name: string; message: string }

function greet(name: string): Greeting {
  return { name, message: `Hello, ${name}!` }
}

const greeting = greet('Kirari')
console.log(greeting.message)

from dataclasses import dataclass

@dataclass
class Greeting:
    name: str
    def message(self) -> str:
        return f"Hello, {self.name}!"

print(Greeting("Kirari").message())

fn greet(name: &str) -> String {
    format!("Hello, {name}!")
}

fn main() {
    for name in ["Ada", "Lin"] {
        println!("{}", greet(name));
    }
}

.card {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  color: #f4f4f5;
  background: #18181b;
  border-radius: 12px;
}

Same HTML in every theme. Switch with the dots above, or edit your own code.

2.9kB

core with JavaScript, gzipped

languages, imported one by one

runtime dependencies or DOM APIs

Streaming

Colors that keep up with the text

Feed chunks as they arrive from a model or a socket. Each write returns a patch for the tail that changed, so you re-render only that, not the whole block.

How streaming works

reply.ts

// Highlight a reply while it is still arriving
const stream = createTokenStream(typescript)
const tokens: Token[] = []

for await (const chunk of response) {
  const patch = stream.write(chunk)
  const stale = tokens.findIndex(token => token.start >= patch.from)
  if (stale >= 0) tokens.length = stale
  tokens.push(...patch.tokens)
  view.innerHTML = render(tokens)
}

Theming

21 themes in the box

GitHub, Dracula, Nord, Catppuccin, Tokyo Night and more, each one CSS file. Each token type maps to one CSS variable, so you can tweak a theme or write your own without re-highlighting.

Browse all themes

// a little light
const name = 'kirari'
shine(name, 42)

Dusk

// a little light
const name = 'kirari'
shine(name, 42)

GitHub Light

// a little light
const name = 'kirari'
shine(name, 42)

Catppuccin Mocha

// a little light
const name = 'kirari'
shine(name, 42)

Solarized Light

CSS

@import '@vortexlabs/kirari/themes/github-light.css';

/* Then tweak any token you like */
.my-code {
  --kirari-keyword: #7a3fd1;
}

Languages

48 languages. Ship only yours.

Every grammar is its own import, so a blog with three languages never carries the other 45. Pick one to try it in the playground.

All languages

Three lines to start

Install, import a theme, and highlight.

Installation guide Open playground

TypeScript

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

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