Diagnosing Issues
The Grammarly Text Editor SDK is designed to work as seamlessly as possible in most apps, but integration issues occasionally arise. Below, we cover a few common situations and how to address them. For additional help, check out our Support page.
Operational status
We track uptime for core features of the SDK, like writing suggestions, on Grammarly's status pageopen in new window.
General debugging
Check the console in your browser's developer toolsopen in new window for warnings and error messages. Note that if you can't find the Grammarly
object in your console, you may need to change the selected frame.
To debug issues with the Text Editor SDK, first try these steps:
- Upgrade to the latest version of the SDK and check if the error still occurs.
- Check your console for warnings and error messages. Some error codes may direct you to the Error Explainer page to view the complete message.
- Check the Network tab in your browser's developer tools and filter by “grammarly” to see if any requests are being blocked. Follow the steps in Network errors to debug.
- Run
Grammarly.debug()
from the console and look for potential problems. - Or, for cleaner and more detailed logs, run
Grammarly.printLogs(true)
from the console. Be sure to select theVerbose
level to get the full logs.
Network errors
If you encounter CORSopen in new window or HTTPopen in new window errors, try these steps:
- Check that you're running your application on an HTTP web server. Your request will be blocked due to a null origin if you use the
file://
protocol to load from a local file. - Confirm that your
clientId
is provided and is correct.- From the Network tab in your browser's developer tools, you can view the
clientId
in thetoken
request payload.
- From the Network tab in your browser's developer tools, you can view the
- For web clients, double-check that the origin of the request is on the list of allowed origins.
- From the Network tab in your browser's developer tools, you can view the
origin
in thetoken
request headers.
- From the Network tab in your browser's developer tools, you can view the
- If trusted authentication is turned on, verify that your authentication key is provided and is correct.
- Ensure Grammarly has been added to your Content Security Policy (CSP).
TIP
You can use Python to create an HTTP web server. For more information, see How do you set up a local testing server?open in new window
The Grammarly button is not appearing
If the Grammarly button is not appearing in your editor(s), follow these steps:
- If you're not using the
activation
EditorConfig property, make sure that you've focused (e.g., clicked into) the editor. - If you have the Grammarly browser extension, make sure it’s turned off.
- Check the Network tab in your browser's developer tools and filter by “grammarly” to see if any requests are being blocked. Follow the steps in Network errors to debug.
Reviewing configurations for writing suggestions
If Grammarly is not surfacing certain writing suggestions, or not surfacing suggestions for the intended dialect or domain, try these steps:
- Confirm that the specified dialect is correct. Note that users can always override the dialect via the Grammarly button menu.
- Confirm that the specified domain is correct. Note that you may want to try specifying a different domain—for example, the
"casual"
domain expects less formal text. - Review suggestion categories to surface or hide (i.e., mute) writing suggestions.
- Review the Grammarly-specific attributes on your HTML elements.
- If Grammarly is not surfacing suggestions on an element, check to see if the element contains the
data-grammarly-skip
attribute. Any text from elements using this attribute won't be analyzed by Grammarly. - Review elements that contain the
data-grammarly-is
attribute. This attribute lets Grammarly know what an element represents semantically. For example, if text intended to be italicized is wrapped in a<div>
, we recommend setting the element that contains this attribute todata-grammarly-is="em"
.
- If Grammarly is not surfacing suggestions on an element, check to see if the element contains the
Finally, please note that if a user has connected their Grammarly account to your application, the full set of customized suggestions from their user profile will always take precedence.
The Grammarly button is covered or positioned wrong
To control the position or z-index
of the Grammarly button use the --grammarly-button-position-{DIRECTION}
and --grammarly-button-z-index
CSS properties.
For more information, see the instructions within Customization.
Underlines are not syncing with text
If you encounter syncing issues—for example, underlines not staying in sync while scrolling—try manually setting your viewport.
Here is an example of how to sync underlines with text for TinyMCE rich text editors:
// Initialize Grammarly
const grammarly = await Grammarly.init();
// Add Grammarly suggestions to the element
const grammarlyPluginElement = grammarly.addPlugin(
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
grammarlyPluginElement.connect(editor, viewport);
Underlines are "left over" after text value changes
We don't currently catch programmatic changes to <input>
or <textarea>
.
If you explicitly assign myTextarea.value = "something"
, Grammarly will not notice until the next time the input is changed. To make sure Grammarly picks up these programmatic changes, you can dispatch a change event in your app's code. For example, if you're trying to clear out an input to make room for a new entry, you could use the following code:
function addTodo() {
const newTodoText = input.value;
todos.push(newTodoText);
input.value = ""; // clear out the input to make room for a new entry
input.dispatchEvent(new Event("change")); // trigger change listeners, including Grammarly
}
If you need to temporarily turn off underlines, you can do so with the underlines EditorConfig property.
Suggestion cards are covered or positioned wrong
If suggestion cards are appearing in the wrong positions, or occluded by other elements, check the element for position: absolute;
or position: fixed;
style rules, and/or check if the element includes a transform
. For these fixed positioning rules, we recommend moving these rules to a parent element—a parent element of both the Grammarly Text Editor Plugin and editor of your text editor framework.
If you need to temporarily turn off suggestion cards, you can do so with the suggestionCards EditorConfig property.
A feature is not working
If a feature is not working as expected, please check that the feature is available as part of your app's planopen in new window.
You can also check your console: The SDK shows a warning when using a feature that is unavailable for your current plan or when using a configuration name that is not spelled correctly.