For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Sign in
DocsAPI ReferenceChangelog
DocsAPI ReferenceChangelog
  • Get started
    • Quickstart
    • Concepts
  • Guides
    • Environments
  • Reference
        • Checkbox
        • Code
        • Color
        • Combobox
        • Group
        • Image
        • Font
        • Link
        • List
        • Number
        • Rich Text
        • Select
        • Slot
        • Style
        • Text Area
        • Text Input
      • Makeswift API Handler
    • Product docs
    • Blog
    • Support
Sign in
LogoLogo
On this page
  • Options
  • Prop type
  • Example
  • Block mode
  • Inline mode
  • Changelog
Reference@makeswift/runtimeControls

RichText

Was this page helpful?
Previous

Number

Next

Select

Built with

Adds a Rich Text control in the Makeswift builder to visually edit a ReactNode of text.

Block
Inline
A block Rich Text node for a Text component

Options

mode
RichText.Mode.Block | RichText.Mode.InlineDefaults to RichText.Mode.Block

Sets the display property of the ReactNode that is passed to the control. This is useful for visually editing buttons and links.

ModeDescription
RichText.Mode.BlockUse for creating editable full line blocks of your site. Passes a ReactNode that is display: block.
RichText.Mode.InlineUse for visually editing buttons and links. Passes a ReactNode that is display: inline. Prevents hydration mismatch errors that can occur when placing block level elements into inline level elements. Only available for v0.10.0 and above.

Prop type

The RichText control passes a ReactNode to your component.

Example

Block mode

1import { RichText } from "@makeswift/runtime/controls";
2
3import { runtime } from "../../../../../makeswift/runtime";
4
5import { Hero } from "./Hero";
6
7runtime.registerComponent(Hero, {
8  type: "hero",
9  label: "Hero",
10  props: {
11    headline: RichText(),
12  },
13});

Inline mode

1import { RichText, Image } from "@makeswift/runtime/controls";
2import { runtime } from "../../../../../lib/makeswift/runtime";
3
4import { Button } from "./Button";
5
6runtime.registerComponent(Button, {
7  type: "button",
8  label: "Button",
9  props: {
10    children: RichText({ mode: RichText.Mode.Inline }),
11  },
12});

.makeswift.ts is a naming convention for organizing Makeswift registration code. Learn more.

Changelog

VersionChanges
v0.10.0Overhauled control architecture and introduced Inline mode.
v0.6.3Introduced RichText control.