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 Text Editor SDK is to add a <script> tag:

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

Usage

Add the data-grammarly attribute directly to the HTML elements you want to enable with Grammarly Text Editor Plugin:

<textarea data-grammarly></textarea>

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

<grammarly-editor-plugin client-id="YOUR_CLIENT_ID">
  <textarea data-grammarly></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 Text Editor SDK to your page 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]
      { document: { dialect: "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 signal which elements you want to enable with the Grammarly Text Editor Plugin, you can do so declaratively with the data-grammarly attribute:

<textarea data-grammarly></textarea>

Or, wrap them in the <grammarly-editor-plugin> web component:

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

Alternatively, you can select your own elements imperatively like so:

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

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

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

For additional configuration details, please see API reference.