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:

1. Upgrade to the latest version of the SDK and check if the error still occurs.
2. Check your console for warnings and error messages. Some error codes may direct you to the Error Explainer page to view the complete message.
3. 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.
4. Run Grammarly.debug() from the console and look for potential problems.
5. Or, for cleaner and more detailed logs, run Grammarly.printLogs(true) from the console. Be sure to select the Verbose level to get the full logs.

Network errors

If you encounter CORSopen in new window or HTTPopen in new window errors, try these steps:

1. 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.
2. 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 the token request payload.
3. 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 the token request headers.
4. If trusted authentication is turned on, verify that your authentication key is provided and is correct.
5. 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:

1. If you're not using the activation EditorConfig property, make sure that you've focused (e.g., clicked into) the editor.
2. If you have the Grammarly browser extension, make sure it’s turned off.
3. 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:

1. Confirm that the specified dialect is correct. Note that users can always override the dialect via the Grammarly button menu.
2. 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.
3. Review suggestion categories to surface or hide (i.e., mute) writing suggestions.
4. 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 to data-grammarly-is="em".

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.