@grammarly/react-slate

Grammarly plugin for React + Slate

Bringing the Grammarly experience to apps that use Slate. No browser extension required.

Getting started

Install the Grammarly plugin for Slate:

npm install @grammarly/react-slate

Set up an instance of the Slate editor with Grammarly:

// 1. Import Grammarly components
import { GrammarlyEditable, GrammarlySlate } from "@grammarly/react-slate";

import React, { useMemo, useState } from "react";
import { createEditor } from "slate";
import { withReact, Slate } from "slate-react";

export function SlateEditor() {
  const [value, setValue] = useState([]);
  const editor = useMemo(() => withReact(createEditor()), []);

  // 2. Render using <GrammarlySlate> and <GrammarlyEditable>
  return (
    <Slate value={value} editor={editor} onChange={(value) => setValue(value)}>
      <GrammarlySlate value={value} clientId="your-client-id-here">
        <GrammarlyEditable />
      </GrammarlySlate>
    </Slate>
  );
}