Grammarly Text Editor SDK for JavaScript

The instructions here apply to vanilla JavaScript. If you're using a framework, we also provide thin wrappers for React and Vue.

Script tag

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

<script src="https://unpkg.com/@grammarly/editor-sdk?clientId=YOUR_CLIENT_ID"></script>

Usage

To add the Grammarly Text Editor Plugin to an HTML element, use the data-grammarly attribute:

<textarea data-grammarly></textarea>

Alternatively, you can wrap your editor(s) with the <grammarly-editor-plugin> web component:

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

Only these HTML elements are supported: <input type='text'>, <textarea> and contenteditable="true" that are not readonly or disabled.

For more fine-tuned control of your configuration, for instance, if you're adding the plugin to your app dynamically, you can use the imperative API. To access it, use window.Grammarly.

<script src="https://unpkg.com/@grammarly/editor-sdk?clientId=YOUR_CLIENT_ID"></script>
<script>
  Grammarly.init().then((grammarly) => {
    grammarly.withElement(
      document.querySelector("textarea"), // or input, [contenteditable]
      { documentDialect: "british" },
    );
  });
</script>

Example

Check it out on CodeSandboxopen in new window.

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, use the data-grammarly attribute:

<textarea data-grammarly></textarea>

Or, wrap the text editors with the <grammarly-editor-plugin> web component:

<grammarly-editor-plugin client-id="YOUR_CLIENT_ID">
  <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.withElement(
  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, TinyMCE 5 & 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
• TinyMCE exampleopen in new window

Using withElement() or withQuerySelector()

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 withElement() or withQuerySelector(). Both methods allow you to optionally pass an editor configuration.

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

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

When you call withElement() or withQuerySelector(), 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 withElement() 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 grammarlyEditor = grammarly.withElement(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
grammarlyEditor.element.connect(editor, viewport);

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

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