Octane

The Octane adapter renders Markdown source or a pre-parsed document directly to Octane element descriptors. It imports only the Octane runtime and does not produce an intermediate HTML string.

Installation

pnpm add @tanstack/markdown octane

The adapter requires octane@0.1.12 or newer. Octane is an optional peer dependency and is not imported by any other package entry.

Component usage

import { Markdown } from '@tanstack/markdown/octane'

export function Article({ source }: { source: string }) @{
  <article>
    <Markdown>{source}</Markdown>
  </article>
}

Markdown returns an Octane fragment descriptor, so the surrounding semantic element remains under application control.

Replace intrinsic elements

Map an emitted tag name to an Octane component or another host tag:

import { createElement, type ComponentBody } from 'octane'
import { Markdown } from '@tanstack/markdown/octane'

const ExternalLink: ComponentBody<any> = props =>
  createElement('a', {
    ...props,
    rel: 'noreferrer',
    target: '_blank',
  })

const article = Markdown({
  children: source,
  components: { a: ExternalLink },
})

Mappings apply to intrinsic tags and custom element names emitted by docs extensions.

Static SSR

import { renderToStaticMarkup } from 'octane/server'
import { Markdown } from '@tanstack/markdown/octane'

const { html, css } = renderToStaticMarkup(Markdown, {
  children: source,
})

Core Octane SSR output is tested for structural parity with renderHtml(), including tight and loose lists, tables, footnotes, docs extensions, and highlighted code.

Parse once

import { parseMarkdown } from '@tanstack/markdown/parser'
import { Markdown } from '@tanstack/markdown/octane'

const document = parseMarkdown(source)
const article = Markdown({ children: document })

Use renderMarkdownOctane, renderBlockOctane, and renderInlineOctane when composing descriptors outside the component API.

Trusted boundaries

Raw HTML uses Octane's dangerouslySetInnerHTML contract when allowHtml is enabled. Highlighter output uses the same path inside <code>. Keep both disabled for untrusted content unless the output is sanitized by the application.