Customization

You can customize the Text Editor SDK to match the look and feel of your application using CSS variables (officially called CSS custom propertiesopen in new window).

Heads up

Customization options are a work-in-progress. As more options become available, they will be documented here.

Suggestion cards

The first suggestion card shown to a user will have a small introduction that helps provide context for users who are less familiar with Grammarly.

This text can be customized using the introText option to include, for example, your app name:

Suggestion card with custom intro text

Grammarly button

By default, the Grammarly button appears in a fixed position relative to the bottom right of the viewport. You can customize its position using the following CSS variables:

NameDefaultDescription
--grammarly-button-position-bottom24pxGrammarly button fixed position relative to bottom edge of viewport
--grammarly-button-position-leftGrammarly button fixed position relative to left edge of viewport
--grammarly-button-position-right24pxGrammarly button fixed position relative to right edge of viewport
--grammarly-button-position-topGrammarly button fixed position relative to top edge of viewport
--grammarly-button-z-index1000Grammarly button z-indexopen in new window.

For example, to shift the Grammarly button over to avoid conflicting with an existing button:

grammarly-editor-plugin {
  --grammarly-button-position-right: 100px;
}
Grammarly button shifted to the left

Dynamic theme updates

CSS variables can be accessed and updated using getPropertyValueopen in new window and setPropertyopen in new window:

const element = document.querySelector("grammarly-editor-plugin");
element.style.setProperty("--grammarly-button-position-left", "8px");

console.log(element.style.getPropertyValue("--grammarly-button-position-left"));

If updating CSS variables after the SDK has already initialized, you may need to dispatch the following event for the UI to update:

document.documentElement.dispatchEvent(
  new Event("grammarly-theme-change", { bubbles: true })
);
Last Updated: 11/3/2021, 10:46:44 PM