Tiptap Content

<TiptapContent> renders read-only TipTap / ProseMirror content from the same JSON document shape used by TiptapEditor. Use it for previews, summaries, and builder canvases where formatted content should display without a toolbar or editing surface.

Basic Usage

Pass a TipTap JSON document, a JSON string, or an HTML string. Normalization uses @verbb/plugin-kit-tiptap-core valueToContent().

Accepted value shapes

TiptapContent accepts the same value shapes as the rich-text field stack:

• ProseMirror node array (most common in Formie form state)
• { type: 'doc', content: [...] } document object
• JSON string containing either shape
• HTML string (parsed into a document when detected)

Live updates

The editor instance is read-only (editable: false), but content still updates when the value prop changes. The component compares serialized document content before calling setContent, so host updates do not reset selection or cause unnecessary DOM churn.

This matters for builder previews where field settings change before the form is saved.

Related

• Editable authoring: TiptapEditor
• SchemaForm: bind TipTap via Custom Schema Fields (rich-text $fields are product-owned)
• Shared extensions and normalization: @verbb/plugin-kit-tiptap-core

Variable Tag Indicators

Variable tags display the applied transform as a badge and an orange corner when a default value is set. Pass variableTransformerRegistry, grouped by value type, to display transform names. Unknown transforms display their saved ID.

API

Props

Name	Description
value	Type string
variableTransformerRegistry	Transform names displayed as badges on configured variable tags. Type PkVariableTransformerRegistry Default {}