Customization

You can customize the Text Editor SDK to match the rest of your application. The visual appearance is managed 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.

English dialect

By default, Grammarly will try to figure out which English dialect a user is writing in, but if you already have a good idea, then it's best to specify it using documentDialect.

Note that the user can always override the dialect via the Grammarly button menu:

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:

Grammarly button

By default, the Grammarly button appears in a fixed position relative to the bottom right of the viewport. If fixed positioning works for your app, but the bottom right isn't ideal, you can customize it using Grammarly’s predefined CSS variables.

Alternatively, you can take complete control and place the Grammarly button on the page.

Fixed position

You can customize the position of the Grammarly button using the following CSS variables:

Name	Default	Description
--grammarly-button-position-bottom	24px	Grammarly button fixed position relative to bottom edge of viewport
--grammarly-button-position-left		Grammarly button fixed position relative to left edge of viewport
--grammarly-button-position-right	24px	Grammarly button fixed position relative to right edge of viewport
--grammarly-button-position-top		Grammarly button fixed position relative to top edge of viewport
--grammarly-button-z-index	1000	Grammarly 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;
}

Custom position

Another option for positioning the Grammarly button is to use the <grammarly-button> custom element. The Grammarly button will render wherever that element is found.

Note that if you do not include the <grammarly-button> custom element, the Grammarly button will still be displayed.

The following example positions the Grammarly button in the footer beside the Submit button.

<form class="feedback">
  <grammarly-editor-plugin>
    <textarea></textarea>
  </grammarly-editor-plugin>

  <footer>
    <grammarly-button></grammarly-button>
    <button type="submit">Submit feedback</button>
  </footer>
</form>

The <grammarly-button> element is available as a component in the React and Vue SDK packages.

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 you want to update the 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 })
);