Text Editor SDK for React


npm install @grammarly/editor-sdk-react


Wrap the Editor components you want to add the Text Editor SDK to with GrammarlyEditorPlugin:

import React from "react";
import { GrammarlyEditorPlugin } from "@grammarly/editor-sdk-react";

export function GrammarlyEditor() {
  return (
    <GrammarlyEditorPlugin clientId="YOUR_CLIENT_ID">
      <Editor />

Only editor components powered by the following HTML elements are supported: <input type='text'>, <textarea> and contenteditable="true" that are not readonly or disabled.

If your app has multiple text editors that you want to equip with Grammarly, use the Grammarly wrapper to pass clientId and other configuration once:

<Grammarly clientId="YOUR_CLIENT_ID">
  <label htmlFor="title">Title</label>
    <input id="title" />



For additional configuration details, please see API reference.


Check it out on CodeSandboxopen in new window.

Last Updated: 10/27/2021, 11:41:54 PM