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

This looks the same than a <textarea>.

Styling#

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

Live Editor
Result
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
note

For readability, we're storing common constants in CONFIG, VALUES,... See all the imported variables.

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
note

Plate children are rendered just before the editable component.

Now we're ready to use plugins!