@krios/react

React-only helpers for Krios. Two main exports: KriosRichText (renders the AST) and KriosPreviewOverlay (click-to-edit).

Install

pnpm add @krios/react @krios/sdk react react-dom

KriosRichText

Renders Krios's structured rich-text AST. Walks the tree and dispatches each node to a default React component. Supply your own renderers to override.

import { KriosRichText } from "@krios/react";

export default function Article({ entry }: { entry: ArticlePage }) {
  return <KriosRichText document={entry.fields.body.raw} />;
}

The renderer handles every node type Krios supports out of the box: paragraph, heading, list, listItem, blockquote, codeBlock, hr, table, tableRow, tableCell, embeddedEntry, embeddedAsset, plus all marks (bold, italic, underline, strikethrough, code, superscript, subscript, link). The link renderer receives href + optional title; the default sanitizes the href and adds rel="noopener noreferrer" on external links.

Custom renderers

import { KriosRichText, defaultRenderers } from "@krios/react";

const renderers = {
  ...defaultRenderers,
  heading: ({ level, children }) => (
    <h1 className="text-3xl font-display">{children}</h1>
  ),
  embeddedEntry: ({ entryId, contentType }) => {
    if (contentType === "ctaBlock") return <Cta entryId={entryId} />;
    return null;
  },
};

<KriosRichText document={raw} renderers={renderers} />;

Each renderer receives type-specific props (plus children where applicable). For example heading gets { level, children }, embeddedEntry gets { entryId, contentType }, and embeddedAsset gets { assetId, url, alt, title, width, height }. Children are already rendered; you decide how to wrap them.

Server-side rendering

Pure rendering — no hooks. Works in React Server Components, Next.js app/, static-export sites, anywhere.

KriosPreviewOverlay

Activates click-to-edit when the page is loaded in preview mode.

import { KriosPreviewOverlay } from "@krios/react/preview";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      {process.env.NEXT_PUBLIC_PREVIEW === "1" && (
        <KriosPreviewOverlay cmsUrl="https://cms.example.com/admin" projectSlug="demo" />
      )}
    </>
  );
}

The overlay reads data-krios-entry-id and data-krios-asset-id attributes that @krios/react's KriosRichText emits for embedded entries and assets when rendered in preview mode. Wrap your own components to forward these attributes onto the DOM:

<article data-krios-entry-id={entry._id}>
  <h1>{entry.fields.title}</h1>
</article>

Click any wrapped element → opens the entry editor at the right field.

renderToString (server-only)

For non-React frontends or static-site generators that already use the html projection from delivery:

import { renderToString } from "@krios/react";

const html = await renderToString(entry.fields.body.raw);
// equivalent to entry.fields.body.html, but lets you swap renderers

Versioning

Tracks the CMS version. React 18+ required.