Skip to main content

Basic Editor


Each example is using Sandpack, a live-running coding environment leveraging CodeSandbox.

Default Editor#

Let's start with a minimal editor using Plate and editableProps.

import React from 'react';
import { Plate, TEditableProps } from '@udecode/plate';

const editableProps: TEditableProps = {
  placeholder: 'Type...',

export default () => <Plate editableProps={editableProps} />;


Let's set the initial value of the editor: one paragraph.

import React from 'react';
import { Plate } from '@udecode/plate';
import { editableProps } from './common/editableProps';
import { MyParagraphElement, MyValue } from './typescript/plateTypes';

const initialValue = [
    type: 'p',
    children: [
          'This is editable plain text with react and history plugins, just like a <textarea>!',
  } as MyParagraphElement,

export default () => (
  <Plate<MyValue> editableProps={editableProps} initialValue={initialValue}

Once you render multiple Plate, you'll need to pass unique id prop to each. This is optional for the first instance.

Change Handler#

Now we would like to listen to editor changes so we can save the value somewhere. Let's use onChange prop.

import React, { useState } from 'react';
import { Plate } from '@udecode/plate';
import { plainTextValue } from './basic-editor/plainTextValue';
import { editableProps } from './common/editableProps';
import { MyValue } from './typescript/plateTypes';

export default () => {
  const [debugValue, setDebugValue] = useState<MyValue | null>(null);

  return (
      onChange={(newValue) => {
        // save newValue...
      value: {JSON.stringify(debugValue)}

Plate children are rendered just after the editable component.

Now we're ready to use plugins!