Grammarly SDK

The Grammarly SDK provides a "headless" way to integrate Grammarly when your app needs complete control over the UI.

TIP

For most apps, we recommend using the Editor Plugin instead. It's often the quickest way to integrate, provides a UI familiar to existing Grammarly users, and includes theming options to match your app.

When integrating using this SDK, the following aspects of the UX are up to your app:

• notifying the user when there are suggestions (e.g., highlights in the editor)
• displaying those suggestions to the user
• updating the editor when the user accepts/dismisses a suggestion

Installation

npm install @grammarly/sdk

Usage

import { init } from "@grammarly/sdk";

const Grammarly = await init("YOUR_CLIENT_ID");

const editor = Grammarly.withText("Grammarly flags classical word-choice mistakes.");
editor.addEventListener("suggestions", (event) => {
  console.log(event.added);
});

Example

Here's the structure of a sample suggestion:

{
  "id": "5",
  "title": "Change the word",
  "type": "corrective",
  "description": [
    "It appears that the adjective ",
    { "type": "strong", "children": ["classical"] },
    " may not be the right word to go with the noun ",
    { "type": "strong", "children": ["mistakes"] },
    ". Consider using a different adjective."
  ],
  "highlights": [{ "start": 16, "end": 25 }],
  "replacements": [
    {
      "id": 0,
      "label": "classic",
      "preview": [
        { "type": "del", "children": ["classical"] },
        { "type": "ins", "children": ["classic"] }
      ]
    },
    {
      "id": 1,
      "label": "typical",
      "preview": [
        { "type": "del", "children": ["classical"] },
        { "type": "ins", "children": ["typical"] }
      ]
    }
  ]
}

and how it maps to one possible card UI (the one used by the Editor Plugin):

For a more complete example, see CodeSandboxopen in new window.

API

See the API docs for full details.