Advanced

React#

Render highlighted code as React elements, on the server or while streaming.

<Code> renders tokens as React elements. No dangerouslySetInnerHTML, no hooks, so it works as a Server Component. Requires React 19.

npm install @vortexlabs/kirari @vortexlabs/kirari-react

import { Code } from '@vortexlabs/kirari-react'
import { typescript } from '@vortexlabs/kirari/languages/typescript'
import '@vortexlabs/kirari/theme.css'

const source = 'const answer: number = 42'

export const Example = () => (
  <Code language={typescript} highlightLines={[1, [3, 4]]}>
    {source}
  </Code>
)

Output: pre.kirari with the usual .kirari-* classes. Extra props go to the <pre>.

• lines: wrap lines in .kirari-line with data-line.
• highlightLines: lines or [first, last] ranges get .kirari-line-highlighted.
• lineClassName, decorations, classes, tokenClassName: as in decorations.

Stream a response

'use client'
import { Code } from '@vortexlabs/kirari-react'
import { useTokenStream } from '@vortexlabs/kirari-react/stream'
import { javascript } from '@vortexlabs/kirari/languages/javascript'

export const StreamedCode = () => {
  const { tokens, write, end } = useTokenStream(javascript)
  // call write(chunk) as text arrives, then end()
  return <Code tokens={tokens} />
}

useTokenStream returns { tokens, write, end, reset } and applies token patches as text arrives. Built-in JavaScript, TypeScript, and JSON reuse completed scanning work; other languages rescan the full source. See streaming limits. It is client-only; <Code> is not.