Slate Example

A simple example showing how to use Slate in a JSFiddle.

HTML

<script src="https://cdn.jsdelivr.net/npm/slate@0.57.1/dist/slate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slate-react@0.57.1/dist/slate-react.min.js"></script>
<div id="app"></div>

React

// The packages & plugins are exposed as globals...
const { createEditor } = window.Slate;
const { Slate,Editable,withReact } = window.SlateReact;
const { useState} = React;

const initialValue = [
      {
        type: 'paragraph',
        children: [
          {
            text: 'A line of text in a paragraph.'
          }
        ]
      }
    ];

const editor = withReact(createEditor());

function MyEditor() {
  const [value,setValue] = useState(initialValue);

  return (
    <Slate editor={editor} value={value} onChange={setValue}>
      <Editable
        placeholder="Enter some text..."
      />        
    </Slate>
  );
}

ReactDOM.render(<MyEditor />, document.getElementById('app'));