Grammarly Text Editor SDK for JavaScript

This doc explains how to integrate the Grammarly Text Editor SDK with a JavaScript application. If you're using a framework, we also provide thin wrappers for React and Vue.

For more guidance, you may also want to check out the following resources:

• Video walkthroughopen in new window
• GitHub exampleopen in new window

Script tag

The easiest way to try the Grammarly Text Editor SDK is to add a <script> tag:

<script src="https://cdn.jsdelivr.net/npm/@grammarly/editor-sdk?clientId=YOUR_CLIENT_ID"></script>

Usage

To add the Grammarly Text Editor Plugin, wrap your editor(s) with the <grammarly-editor-plugin> web component:

<grammarly-editor-plugin>
  <textarea></textarea>
</grammarly-editor-plugin>

You can view an interactive example on CodeSandboxopen in new window.

Only these HTML elements are supported:

• <input type='text'>
• <textarea> that are not readonly or disabled
• contenteditable="true" that are not readonly or disabled

NPM package

If your app already includes bundled JavaScript, we recommend using the NPM package:

npm install @grammarly/editor-sdk

Usage

First, import init from @grammarly/editor-sdk and call it:

import * as Grammarly from "@grammarly/editor-sdk";

await Grammarly.init("YOUR_CLIENT_ID");

To add the Grammarly Text Editor Plugin to an HTML element, wrap the text editor(s) with the <grammarly-editor-plugin> web component:

<grammarly-editor-plugin>
  <textarea></textarea>
</grammarly-editor-plugin>

Alternatively, you can select elements imperatively:

import * as Grammarly from "@grammarly/editor-sdk";

const grammarly = await Grammarly.init("YOUR_CLIENT_ID");

grammarly.addPlugin(
  document.querySelector("textarea"), // or input, [contenteditable]
  { documentDialect: "british" },
);

For additional configuration details, please see the API reference.

Integrating with rich text editor frameworks

We regularly test the Text Editor SDK for JavaScript for compatibility with Quill 1.3, Editor.js 2, TinyMCE 6, and CKEditor 5.

Using the <grammarly-editor-plugin> web component

We recommend adding Grammarly suggestions to your rich text editor by wrapping the rich text editor with the grammarly-editor-plugin web component. You can set any configuration options using editor.config.

For example, you could wrap a div element that will be initialized as a rich text editor:

<grammarly-editor-plugin client-id="YOUR_CLIENT_ID">
  <div id="quill-div">
</grammarly-editor-plugin>

Then you can set the editor configurations:

document.querySelectorAll("grammarly-editor-plugin").forEach((grammarlyEditor) => {
  grammarlyEditor.config = { autocomplete: "on", documentDialect: "british" };
});

Here is sample code to get started:

• CKEditor exampleopen in new window
• Quill exampleopen in new window
• Editor.js exampleopen in new window
• TinyMCE exampleopen in new window

Using addPlugin()

When the <grammarly-editor-plugin> web component does not work for your use case (for example, if you’re using server-side rendering), you can add Grammarly suggestions to your rich text editor by calling addPlugin().

var quill = new Quill("#quill-editor", {
  theme: "snow",
});

Grammarly.init().then((grammarly) => {
  grammarly.addPlugin(quill.root, {
    autocomplete: "on",
    documentDialect: "british",
  });
});

When you call addPlugin(), the Text Editor SDK will attempt to automatically detect and set the editor viewport for you. The viewport is the parent element that encloses your rich text editor. Often, it’s a scrollable iframe that holds a menu of text formatting options.

Some rich text editor frameworks like TinyMCE change the DOM when editors are initialized, which results in the Text Editor SDK being unable to automatically set the viewport. In those cases, you will need to manually set the viewport. You can do so by passing the viewport as a parameter to addPlugin() or connect(). Below is an example of how to set the viewport for TinyMCE rich text editors:

// Initialize Grammarly
const grammarly = await Grammarly.init();

// Add Grammarly suggestions to the element
const grammarlyPluginElement = grammarly.addPlugin(
  document.querySelector("YOUR_ELEMENT_ID"),
  {
    documentDialect: "british",
    autocomplete: "on"
  }
);

// Initialize TinyMCE
const tinyEditors = await tinymce.init({
  selector: "YOUR_ELEMENT_ID"
});
const tinyEditor = tinyEditors[0];

// Set the editor and viewport to the newly created TinyMCE elements
const editor = tinyEditor.getBody(); // <body contenteditable=true>
const viewport = tinyEditor.iframeElement; // <iframe> that contains the body
grammarlyPluginElement.connect(editor, viewport);

Here are complete code examples of how to add Grammarly suggestions to rich text editors using addPlugin():

• CKEditor exampleopen in new window
• Quill exampleopen in new window
• TinyMCE exampleopen in new window

Preparing for production

Before making your app available in a production environment, please take note of the recommendations in Securing Your Integration.