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></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]
{ 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 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]
{ documentDialect: "british" },
);
For additional configuration details, please see API reference.