fields.html() | Strife Docs

Rich-text input. Maps to editor { name: 'str-textarea', type: 'html' }. Output is HTML-as-string — markup is stored verbatim; sanitization happens at render time (server-side renderers / SDKs), not at write time.

Example

TypeScript

fields.html({
  label: 'Body',
  localizable: true,
  marks: ['bold', 'italic', 'link'],
  nodes: [
    'heading2',
    'bulletList',
    {
      type: 'image',
      sizes: [
        { label: 'Wide', width: 1200, height: 630, default: true },
        { label: 'Square', width: 800, height: 800 },
      ],
      styles: [
        { label: 'Drop shadow', group: 'Effects', cssClass: 'shadow', imgproxyParams: ['sh:0.5'] },
      ],
      quality: [{ label: 'High', quality: 90 }],
    },
  ],
})

Options

Option	Type	Required	Description
`label`	`string`	Yes	Label shown to editors in Strife Studio.
`description`	`string`	No	Tooltip shown to editors.
`localizable`	`boolean`	No	When `true`, output is `Record<string, string>` instead of `string`.
`searchable`	`boolean`	No	Include in the team's search index.
`filterable`	`boolean`	No	Allow filtering content lists by this value.
`protected`	`boolean`	No	Restrict editing to users with the appropriate permission.
`propertyName`	`string`	No	Override the stored property name.
`placeholder`	`string \| null`	No	Hint text shown when the editor is empty.
`marks`	`HtmlMark[]`	No	Inline-formatting tools the editor offers.
`nodes`	`HtmlNode[]`	No	Block-level content the editor offers. `image`, `callout`, and `customComponent` entries can carry their own configuration — see below.
`documentSchema`	`{ content?: string; placeholders?: Record<string, string> }`	No	Forces a Tiptap content structure (e.g. `'heading paragraph+'`) and per-node-type placeholder text.

HtmlMark is one of: bold, italic, underline, strike, link.

HtmlNode is either a bare HtmlNodeName — one of paragraph, heading1, heading2, heading3, blockquote, bulletList, orderedList, checkList, codeBlock, image, video, table, details — or a configured image/callout/customComponent object:

{ type: 'image', sizes?, styles?, quality? } — presets offered in the image toolbar once an image is inserted. These are selectable options, not enforced constraints — contrast with fields.image()'s mandatory width/height/format.
- sizes: { label, width, height, default? }[] — selectable dimension presets. height: 0 keeps the source aspect ratio; mark one entry default: true to auto-apply it when an image is inserted.
- styles: { label, group?, cssClass?, imgproxyParams? }[] — selectable visual-style presets. cssClass lands on the rendered <figure>; group buckets the picker dropdown; imgproxyParams are server-side imgproxy processing operations.
- quality: { label, quality, imgproxyParams? }[] — selectable compression presets (quality is 1–100).
{ type: 'callout', variants: { label, value }[] } — the callout block's selectable class variants; multiple can be combined on one callout. A bare 'callout' node name isn't valid on its own — without variants it would be a silent no-op, so it must always be given in this configured form. label is the picker label; value becomes the CSS class token on the rendered callout (compiles to wire name).
{ type: 'customComponent', components: { tag, label, attributes? }[] } — customer web components the editor may insert (e.g. a form embed distributed as a custom element, <lime-form form-id="...">). Like callout, a bare 'customComponent' node name isn't valid — without components it would be a silent no-op. Each entry: tag is the custom-element tag name; label is the insert-menu label.
- attributes: { name, label?, default? }[] — what an author may fill in on each inserted instance. name is the HTML attribute written to the markup, label names the field in the editor (defaults to name), and default pre-fills it on insert. The placeholder renders one field per declared attribute, so a page with several of the same component gives each one its own form-id — and an author fills in a value, never attribute syntax.
- Declare an attribute with no default to get an empty field. Leaving a field empty writes no attribute at all, rather than name="".
- The set is schema-owned: attributes you don't declare can't be added from the editor, and a component that declares none gets no editing affordance. Attributes already present on stored markup are preserved untouched whether or not the schema declares them.
- defaultAttrs: Record<string, string> is the deprecated 0.11.0 spelling — { 'form-id': 'x' } means the same as [{ name: 'form-id', default: 'x' }], minus the field label. Existing schemas keep working; new ones should use attributes.

Pilot-scoped today. tag must be one of a small set of element names the editor's parse-time allowlist already recognizes (currently Kalmar Energi's Lime forms, lime-form/simpli-form) — any other tag is dropped like any other unmodeled markup, same as an unrecognized HTML element pasted into the editor. Recognized elements always render as a static placeholder in Strife Studio — the editor never mounts or hydrates the real element, and never loads the customer's script — the real component only renders where the published HTML is actually rendered, on the customer's own site (which must already have its loader script installed there). There is no Strife Studio UI for customComponent yet — nodes (or hand-edited template JSON) is currently the only way to set it, same as quality under image above.

Not every nodes entry produces a visible toolbar button today — paragraph and table have no corresponding control yet (they're accepted for forward-compatibility). Every HtmlMark value and every other HtmlNodeName value does show one.

No Strife Studio UI for quality presets. sizes and styles can also be authored by hand in Strife Studio's field settings (as "Image Presets" / "Style Presets" tables), but quality has no equivalent point-and-click control — fields.html()'s nodes (or hand-edited template JSON) is currently the only way to set it.

Alignment, alt text, and crop/zoom/pan on an inserted image are purely interactive per-image state set by the editor in Strife Studio — there's no schema-level way to default or constrain those.

Output type

string (HTML), or Record<string, string> when localizable: true.

Example

Options

Output type

See also