Table of Contents
Which browsers are supported?
The Grammarly Text Editor SDK supports modern versions of all desktop browsers. For example:
There is currently no support for Internet Explorer or mobile browsers.
In unsupported browsers, the Grammarly Text Editor Plugin will not activate at all. In other words, the underlying editor will behave normally.
Which rich text editor frameworks are supported?
The Grammarly Text Editor SDK integrates seamlessly into most modern rich text editors. While building new releases, we regularly test the SDK with the following frameworks:
- CKEditor 5
- Editor.js 2
- Quill 1.3
- TinyMCE 6
For more information on some of these frameworks, check out the comparison page on NPMCompareopen in new window, which includes project descriptions, homepage links, GitHub repository links, and other supporting information.
What programming languages do you support?
Do you support TypeScript?
Yes. In fact, the SDK source is written in TypeScript and each package is published along with its types. This allows you to be certain your integration is correct and provides an easy way to discover configuration.
Do you support the
The Text Editor SDK does not support canvas-based rendering at this time.
Are Electron applications supported?
Yes, the Text Editor SDK supports Electronopen in new window and similar Chromium-based frameworks.
Are mobile applications supported?
The Text Editor SDK does not support mobile devices at this time.
How does the Grammarly Text Editor Plugin work with the Grammarly browser extension?
If the user has the Grammarly browser extension installed, the extension will override the Grammarly Text Editor Plugin experience.
How does the Grammarly Text Editor Plugin work with Grammarly for Windows and Mac?
If the user has Grammarly’s desktop app installed, the plugin will override the desktop experience.
Does the Text Editor SDK support plagiarism detection?
The SDK does not support plagiarism detection at this time. For help detecting plagiarism, you can learn more about Grammarly Premium's plagiarism checkeropen in new window.
How does the Text Editor Plugin behave when users write in a language other than English?
The plugin ignores non-English text, but it doesn’t turn off. If users later write in English, they’ll receive suggestions for that part of the text. Non-English text is not included in the words analyzed count for the Plus plan or the Words analyzed chart in your dashboard.
How is the Text Editor SDK adding UI elements to my text editor? Is it manipulating the DOM?
The SDK doesn’t show suggestions by manipulating your application’s DOM or by adding any styles that might affect your UI. Instead, everything the SDK renders is encapsulated in a web component. Using a custom element and shadow DOMopen in new window, the SDK can draw underlines, highlight text, and show suggestion cards in an overlay that sits on top of the editor. This overlay doesn’t trap, intercept, or prevent any user events from reaching the editor—it’s wholly transparent and invisible to the user.
How do I add Grammarly to my Content Security Policy (CSP)?
If your app includes a Content Security Policyopen in new window, please add the following directives:
img-src data: https://*.grammarly.com; connect-src https://*.grammarly.com https://*.grammarly.io wss://*.grammarly.com; style-src 'unsafe-inline'; script-src https://*.grammarly.com;
If you are using a script tag to include the Text Editor SDK, you will also need to add a directive for your CDN provider.
Here are two example directives for
script-src https://*.grammarly.com https://cdn.jsdelivr.net;
script-src https://*.grammarly.com https://unpkg.com;
Further, if you are using the autocomplete feature, you will need to add a directive for
blob: to allow Grammarly to use web workers.
script-src https://*.grammarly.com blob:;
What are the best practices for integrating the SDK with an app that uses multiple environments (e.g., dev/qa/prod)?
We recommend creating a separate Grammarly for Developers app for each environment. Each app can have up to two trusted authentication keys per app, and if you decide to turn on trusted authentication, it’s a best practice for each environment to have its own key.
If I add the Text Editor Plugin to an editor, can I exclude certain HTML elements in the editor from review?
Yes, you can. As of version
1.3.2, the plugin will ignore HTML elements that have the attribute
data-grammarly-skip. This content won’t be sent to Grammarly servers and won’t be analyzed.
Here’s an example:
<grammarly-editor-plugin> <div contenteditable> <p>This is text that should be analyzed.</p> <quote data-grammarly-skip> <p> This is a quote, so its original phrasing should be retained, even if there are grammar mistakes or words are spelt (sic) wrong. </p> </quote> </div> </grammarly-editor-plugin>
span HTML elements rather than semantic elements in my editor DOM, and Grammarly suggestions are behaving strangely. What’s going on and how do I fix this?
To deliver writing suggestions, the Text Editor SDK uses the DOM to develop a semantic representation of the text in the editor. The SDK looks for elements like
li to understand the text contents and formatting. It also uses the presence of a block-level elementopen in new window to detect where there’s a sentence break in the content.
Using non-semantic elements like
span rather than semantic elements like
b can cause Grammarly suggestions to behave in unexpected ways. Here’s an example:
<div class="custom-text"> This DOM structure might cause an <div class="custom-italics-text">un</div> intentional issue. </div>
When interpreting this text, the SDK assumes that there is a line break before and after the
custom-italics-text div, since
div is a block-level element. Grammarly’s internal representation of the text would look something like this:
This DOM structure might cause an<br />un<br />intentional issue.
Since the intended semantic meaning wasn’t preserved, Grammarly’s suggestions might not work as expected.
The solution is to use the custom
data-grammarly-is attribute, available in version
1.6.8 and above, to tell the SDK what an element represents semantically:
<div class="custom-text" data-grammarly-is="p"> By telling the SDK what an element represents semantically, we’ve avoided an <div class="custom-italics-text" data-grammarly-is="em">un</div> intentional issue. </div>
What happens if the SDK throws an error?
The plugin is designed to fail gracefully. Suggestion cards and underlines will hide. The plugin will report the error to Grammarly, and you can also be notified by adding an event listener for the
plugin-error event. For more information, see Diagnosing Issues.
What rate limits are enforced for the Text Editor Plugin?
Currently, we limit the plugin to 1000 session token requests per IP address over a 5-minute window. If rate-limited, the plugin will fail gracefully and disappear without affecting editor functionality.
It shouldn't be common for a typical application to reach the rate limit. If your app is reaching the limit, please open a support ticketopen in new window so we can help.
Does the Text Editor SDK support Grammarly Affiliate Program links?
Currently, there is no support in the SDK for Grammarly Affiliate Programopen in new window links or related functionality.
Does the Text Editor SDK support users in all countries and regions?
Consistent with applicable trade laws, Grammarly (like other similar organizations) doesn't support some of our services in certain countries or regions. As such, users of your apps may not be able to use the Grammarly SDK services from these restricted geographies.
How will Grammarly blocking access to its services in Russia and Belarus affect my users?
Grammarly made the decision to suspend service in Russia and Belarus after Russia launched an unprovoked invasion of Ukraine in February 2022, which included attacks across the Belarusian border. Grammarly stands with Ukraineopen in new window, and consequently, users with IP addresses originating in Russia and Belarus are not able to access Grammarly functionality. Read below to understand how the Text Editor SDK will behave for users in those regions.
End users of applications with IP addresses in Russia and Belarus, who are using applications with SDK versions 1.5.0+ (including newer major, minor, and patch releases) as well as patch releases of 1.2, will experience the following:
- The Grammarly Text Editor Plugin will not show any suggestions
- The Grammarly button will display the Grammarly logo with the colors of the Ukraine flag
- Hovering over the Grammarly button will show a tooltip explaining that Grammarly has suspended access
- Clicking the Grammarly button will open a card indicating that Grammarly service is unavailable in their country
Users who have IP addresses in Russia or Belarus and who are using an application that has integrated any version of the SDK older than the ones listed above will experience the following:
- The Grammarly Text Editor Plugin will not show any suggestions
- The Grammarly button will display a red dot on top of the Grammarly logo
- Hovering over the Grammarly button will show a tooltip indicating Grammarly service is not available