Inline Wysiwyg Field

The InlineWysiwyg field represents a chunk of Markdown or HTML content.


Below is an example of how an InlineWysiwyg field could be defined in an Inline Form.

import ReactMarkdown from 'react-markdown'
import { useForm, usePlugin } from 'tinacms'
import { InlineForm } from 'react-tinacms-inline'
import { InlineWysiwyg }from 'react-tinacms-editor'

// Example 'Page' Component
export function Page(props) {
  const [data, form] = useForm(
  return (
    <InlineForm form={form}>
      <InlineWysiwyg name="markdownBody" format="markdown">
        <ReactMarkdown source={data.markdownBody} />


nameThe path to some value in the data being edited.
childrenChild components to render.
sticky?A boolean determining whether the Wysiwyg Toolbar 'sticks' to the top of the page on scroll.
format?This value denotes whether Markdown or HTML will be rendered.
imageProps?Configures how images in the Wysiwyg are uploaded and rendered.


interface InlineWysiwygConfig {
  name: string
  children: any
  sticky?: boolean
  format?: 'markdown' | 'html'
  imageProps?: WysiwysImageProps

interface WysiwygImageProps {
  upload?: (files: File[]) => Promise<string[]>
  previewUrl?: (url: string) => string