Rich text

Use @legendapp/spark/markdown for Markdown and @legendapp/spark/html for HTML. Both include readers, controlled inputs, and click-to-edit previews.

Rich text is unsupported on Windows. See backend limits for macOS restrictions.

Display rich text

import { Markdown } from '@legendapp/spark/markdown';
import { Html } from '@legendapp/spark/html';

export function Readers() {
  return (
    <>
      <Markdown
        value={'# Hello\n\nRead **Spark** and [Legend](https://legendapp.com).'}
        onLinkPress={({ url }) => console.log(url)}
      />
      <Html selectable={false}>
        {'<h1>Hello</h1><p>Read <strong>Spark</strong>.</p>'}
      </Html>
    </>
  );
}

Both readers accept these props:

Markdown also accepts markdownStyle for text and block formatting. It renders headings, lists, links, code, and images; task checkboxes stay read-only. Html accepts htmlStyle, with element and style support determined by the backend.

Controlled inputs

MarkdownInput and HtmlInput stay in editor mode. EditableMarkdown and EditableHtml show rendered content while unfocused: click to edit, then blur or press Escape to finish.

import { useState } from 'react';
import { EditableMarkdown } from '@legendapp/spark/markdown';

export function Editor() {
  const [value, setValue] = useState('Hello **Spark**');
  return (
    <EditableMarkdown
      value={value}
      onChangeText={setValue}
      placeholder="Write a note"
      style={{ backgroundColor: '#fff' }}
    />
  );
}

All four require value: string and onChangeText(value: string). They also accept placeholder, autoFocus, onFocus, onBlur, React Native style, accessibilityLabel, and testID. Changes arrive while typing as Markdown or HTML strings, including whitespace. A ref exposes focus() and blur() through MarkdownInputRef or HtmlInputRef, exported from the corresponding capability path.

MarkdownInput and EditableMarkdown also accept markdownStyle. Reader props such as selectable, htmlStyle, and onLinkPress are not input props.

Formatting

Set formatting to show Bold, Italic, Link, Bullets, and Numbers buttons. Supply a synchronous onRequestLink={() => url} returning a string or undefined to enable Link. On macOS, formatting also enables Cmd-B, Cmd-I, Cmd-K, Cmd-Shift-7, and Cmd-Shift-8 for those actions while the input is focused.

Selection and controlled values

Echoing an edit through value preserves selection and undo. Replacing or rejecting it may reset selection. Inputs expose no controlled selection prop. Editors preserve supported formatting, but may change the original Markdown or HTML spelling.

Use an opaque style.backgroundColor for editable previews; it defaults to white. Check reader/editor alignment when using custom block styles or line heights.

Installation and build settings

Spark installs Enriched Markdown and Enriched HTML 1.1.1 and applies compatibility patches automatically. No separate backend install is needed. Existing apps can run spark doctor and spark upgrade to repair outdated web dependency pins.

Math and syntax highlighting need per-app build settings and can download large assets. To disable them in package.json:

{
  "enriched-markdown": {
    "enableCodeHighlight": false,
    "enableMath": false
  }
}

Backend limits

• The macOS HTML backend supports basic inline formatting, paragraphs, headings, links, and lists.
• Editing HTML flattens nested lists. Remote image URLs round-trip without loading their images; readers show placeholders.
• The macOS backend does not apply custom htmlStyle, including HTML block styles.
• Markdown math and syntax highlighting depend on application Enriched build settings.

See the rich-text source guide for backend configuration and native validation details.