Community
FAQ
Which browsers are supported?
The Grammarly Text Editor SDK supports modern versions of all desktop browsers. For example:
- Chrome
- Firefox
- Safari
- Edge
- Opera
- Brave
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?
We regularly test the SDK with the following frameworks for building rich text editors:
- CKEditor 5
- Quill 1.3
- Slate
- TinyMCE 5 & 6
Which JavaScript libraries and frameworks are supported?
In addition to vanilla JavaScript, we support thin wrappers for React and Vue.
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 Chrome Extension?
+If the user has the Grammarly browser extension installed, the Extension will override the Grammarly Text Editor Plugin experience.
What kinds of Grammarly suggestions will users receive in my app?
All apps, regardless of plan, will receive suggestions for correctness. Only apps on the Plus plan will receive suggestions for clarity, engagement, and delivery. Additionally, users who connect their Grammarly Premium or Grammarly Business account to your app will also receive suggestions for clarity, engagement, and delivery, regardless of your app's plan. Visit the plansopen in new window page for more details.
How is the Text Editor SDK adding UI elements to my text editor? Is it manipulating the DOM?
The Text Editor 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 unpkg.com:
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:;
Do you support TypeScript?
Yes. In fact, the 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.
If I add the Grammarly 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 checked.
Here’s an example:
<grammarly-editor-plugin>
<div contenteditable>
<p>This is text that should be checked.</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>
I use div or 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 b, em, and 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 div or span rather than semantic elements like p or 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 Grammarly what an element represents semantically:
<div class="custom-text" data-grammarly-is="p">
By telling Grammarly 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 SDK will report the error to Grammarly, and you can also be notified by setting a callback function in EditorConfig’s onPluginError property.
How do I debug issues with the SDK?
Here are the steps that we recommend:
- Upgrade to the latest version of the SDK and check if the error still occurs.
- Check the console in your browser's developer toolsopen in new window for warnings and error messages. As of version
1.7.5and above, some error codes may direct you to the Error Explainer page to view the complete message. - Run
Grammarly.printLogs()from the console. - Check the Network tab in your browser's developer tools and filter by “grammarly” to see if any requests are being blocked.
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
