View renderer: display documents without an editor

Render a saved document to semantic HTML. It is synchronous and DOM-free, so it is safe in Node, workers, and React Server Components.

Every inline-content field is sanitized against the composed allowlist before interpolation, and the URL scheme policy is identical to the editor's. Returns '' for empty or malformed documents (nullish input is tolerated).

Parameters

Extract the plain text of a saved document. Blocks are separated by \n\n, list items by \n, and table cells by \t. It is synchronous and DOM-free, with the same options as blocksToHtml plus includeHiddenText. Use it for previews, search indexing, and character counts.

Parameters

Serialize a saved document to Markdown. It is synchronous and DOM-free, the outbound twin of markdownToBlocks. Headings become #, lists -/1., to-dos - [x], and tables GFM pipe grids.

Markdown has no callout, toggle, column or spacer. So a callout becomes a blockquote carrying its emoji, a toggle becomes a bold summary followed by its body, columns flatten into reading order, and a spacer is dropped.

Returns '' for empty or malformed documents.

The same Markdown, plus a list of what could not be carried across. Each entry names the construct, says whether it was 'dropped' (nothing emitted) or 'degraded' (emitted lossily), and why.

Use it when the result goes somewhere that cannot ask a follow-up question, such as an AI client or an export, and needs to be told what it is missing. A block that leaves no output and carries no inline text is reported too, so a custom tool with no Markdown form is named rather than vanishing.

Extract the plain text of an HTML fragment. It is synchronous and DOM-free, the view renderer's replacement for element.textContent. Entities are decoded (a < b → a < b) and <br> becomes a newline. Use it instead of hand-rolling a DOMParser strip (which needs a DOM) when reducing an inline-HTML field to text.

Sanitize an HTML fragment against a sanitizer config with no DOM. It is parse5-backed and matches the editor's html-janitor semantics. config is a tag → rule allowlist, or the 'plaintext' sentinel to strip markup entirely. It is the DOM-free counterpart of api.sanitizer.clean(), so use it in Node, workers and RSC, where the editor's sanitizer cannot run.

Extract the heading outline of a saved document, the source for a table of contents. It is synchronous and DOM-free. It walks the document in reading order (top-level blocks, then structural children), picks header blocks, and reduces each heading's inline HTML to plain text.

Each item is { id?, level, text }. The block id drives anchor links and scroll targets, so no separate DOMParser pass is needed. Headings with empty text are skipped.

Repair in-document links whose target was lost during an import. HTML addresses its own sections by an id on the heading. Google Docs writes <h2 id="h.2y1ok8y7pef0"> and links its table of contents to that fragment.

A converter that mints its own block ids and drops the source ones leaves those links pointing at nothing. The link's text still names the heading, so this pass hands each dead fragment to the heading that text names, as HeaderData.anchor.

Because it writes content, it guesses as little as possible.

• It takes only headings with no anchor yet.
• It needs an exact text match. Markup, entities and whitespace are normalized away first, punctuation is not.
• It acts only when exactly one heading and one fragment claim each other.

Anything less certain is left alone and listed in report.skipped. Running it twice changes nothing further.

Call it yourself as a one-off upgrade: it is not part of the automatic load path. It is DOM-free, so it runs in a Node script over stored records. Migrate legacy data first.

Resolve a tools/inlineToolbar/tunes config into one shared schema. It is pure and module-scope-safe: call it at module scope and import the result everywhere.

Spread editorConfig into new Blok(...) and pass viewSchema to the view functions. This guarantees documents are displayed under the SAME sanitize composition that produced them, instead of two configs drifting apart.

The guarantee is per composition: if you change the inline-tool set at runtime with tools.setInlineToolbar, recompose the schema from the current config. Options that don't participate in schema resolution (link, i18n, data, …) pass through editorConfig untouched.

Fold an ordered list of sanitize configs with the editor's exact merge semantics: a later-wins Object.assign, inline tools first, then tunes. Function rules are carried by reference. Rules for the same tag are REPLACED, never deep-merged.

This is the same fold defineBlokSchema uses to build viewSchema.baseSanitize, exposed for hand-built lists. It is exported from both @bloklabs/core and @bloklabs/core/view.

Render to a framework-agnostic JSON tree instead of an HTML string. Each node is { tag, attrs, children } or { text }, with the same options and sanitization pipeline as blocksToHtml. This is what the React bindings map to real elements.

It is experimental: the shape is not frozen until a second framework adapter consumes it, so it may change in a minor release.

Render a LaTeX string to HTML with the KaTeX build Blok already bundles (its code tool, equation inline tool and markdown importer all use it).

It is hardened for untrusted input.

• trust: false forbids the markup-injecting commands (\href, \includegraphics, \html*).
• maxExpand caps macro expansion.
• maxSize caps element sizing.
• throwOnError: false renders malformed math as escaped source instead of failing the document.

Use it instead of adding katex as your own dependency, which is a second copy of the library and a second, unaudited option set.

KaTeX is imported lazily on the first call. With no document present (SSR, workers) the stylesheet injection is skipped and you include katex.min.css yourself, and the markup is identical.

For inlineRenderers use createLatexRenderer, which is synchronous.

Load KaTeX once and get back a synchronous LaTeX renderer. That is the form inlineRenderers needs, since it replaces an element with the string it returns, and a promise there stringifies as [object Promise].

It is shaped as "await the loader, get the renderer", so there is no call order to get wrong: the renderer cannot exist before KaTeX is ready. It uses the same hardened options as renderLatex.

This is what lets a display surface render equations through blocksToHtml/BlokView instead of booting a read-only editor for them.

The React display component from @bloklabs/react. It renders a saved document inside a single <div> wrapper: no editor instance, no chrome, no async, no effects, and never dangerouslySetInnerHTML (content is mapped from the sanitized view tree to real React elements).

The wrapper always carries data-blok-interface="view", which is what makes the emitted classes compute as they do in the editor. It is written BEFORE the divProps spread, so a caller can override it. Never override it to "blok", which carries all: initial !important and would block host typography.

This is the read-only path to reach for at display-only call sites, instead of <BlokEditor readOnly>: it costs no editor bundle, has no ready latch, and renders identically under SSR.

Its props API is stable. Only the raw ViewNode tree it maps from (via blocksToViewNodes) stays experimental, and using BlokView never exposes you to it.

Parameters

The wrapper-free form of BlokView. It returns a Fragment of the block elements with no extra <div>, for slots where a wrapper is invalid or unwanted: checkbox labels, table cells, headings. It is synchronous and effect-free (SSR-safe), memoized on the data reference and the individual option values.

It takes the same options as blocksToHtml, with two exceptions.

• root is ignored, since emitting no wrapper is the hook's contract.
• classes defaults to false here, while it defaults to true in <BlokView>, which owns a wrapper.

Passing root: true type-checks and silently does nothing. When you need view.css to paint, wrap the returned Fragment yourself in an element carrying data-blok-interface="view".