Skip to main content

Basic Editor

note

We're using flexible playgrounds for live editing React code.

Default Editor#

Let's start with the smallest editor implementation.

import React from 'react';
import { Plate } from '@udecode/plate'
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

This looks the same than a <textarea>.

Styling#

Let's add a placeholder and some padding using editableProps props.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
note

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

Value#

Let's set the initial value of the editor to one block of text.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Change Handler#

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

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
note

Plate children are rendered just before the editable component.

Now we're ready to use plugins!