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.