Customization
You can customize the Grammarly Text Editor Plugin to suit your application's UX. In this guide, we'll cover how to change aspects of the plugin's appearance and behavior using custom CSS variables and EditorConfig properties.
If you're not familiar with the Grammarly experience, we suggest reading the Grammarly UX guide first.
To try out different color, theme, and config options for the plugin, use the Configuratoropen in new window. When you're happy with your configuration, copy the code blocks on the page directly into your project, or click Share to generate a URL that you can share with your friends and teammates.
Theming
You can theme the plugin by customizing:
- The font family
- The color of interactive elements (buttons and links)
- The
border-radius
open in new window for buttons and cards to create rounded or square corners
Here are three examples of how suggestion cards can be styled (the default is on the left):

Note that theming will also apply to settings menus in the plugin.
Name | Default | Description |
---|---|---|
--grammarly-default-font-family | Arial, sans-serif | Default font family |
--grammarly-interactive-color | #2551DA | Primary color of interactive elements |
--grammarly-default-border-radius | 4px | Border radius for buttons |
--grammarly-card-border-radius | 8px | Border radius for suggestion cards |
For example, you can theme the plugin as shown in the right-most card in the image above:
grammarly-editor-plugin {
--grammarly-default-font-family: Optima, sans-serif;
--grammarly-interactive-color: #e00697;
--grammarly-default-border-radius: 30px;
--grammarly-card-border-radius: 0px;
}
Grammarly’s default theme is designed to meet WCAG 2.1open in new window AA color contrast guidelines for font sizes 14px and below. When customizing the colors of your theme, we recommend choosing a color that passes a color contrast ratio of 4.5:1.
Light and dark modes
The plugin supports both light and dark modes.
- In light mode, the background is white and the Grammarly button has a black background.
- In dark mode, the background is dark gray and the Grammarly button has a white background.
You can configure whether the plugin renders in light or dark mode using the color-schemeopen in new window CSS property. color-scheme
is an inherited propertyopen in new window, so setting the color-scheme
on parent elements will impact how the plugin is rendered.
color-scheme | Description |
---|---|
normal (default) | Render the plugin in light mode |
light | Render the plugin in light mode |
dark | Render the plugin in dark mode |
light dark | Render the plugin in light or dark mode based on the end user’s operating system preference |
Two examples are provided below. Use one of the following methods, not both:
- With the HTML
<meta>
tag, setcolor-scheme
via thename
attribute. - With CSS, set the
color-scheme
CSS property.
<meta name="color-scheme" content="light dark" />
grammarly-editor-plugin {
color-scheme: light dark;
}
If you choose to customize the plugin’s interactive color, be mindful of how the color will look against the plugin’s light or dark mode rendering. If you use the light dark
color scheme, you may want to set a different interactive color for each scheme. You can set the interactive color based on the user’s preference for light or dark mode using the prefers-color-schemeopen in new window CSS media feature:
@media (prefers-color-scheme: light) {
grammarly-editor-plugin {
--grammarly-interactive-color: #e00697;
}
}
@media (prefers-color-scheme: dark) {
grammarly-editor-plugin {
--grammarly-interactive-color: #f7b2e0;
}
}
Activation
By default, the plugin is activated when a text editor that uses the plugin receives focus. You can set the activation
EditorConfig property to immediate
to have the plugin initialize as soon as the page loads instead.
Or, you can use the following code to initialize the plugin only when you’re ready to show it:
Grammarly.init().then((grammarly) => {
grammarly.addPlugin(
document.querySelector("textarea"), // or input, [contenteditable]
);
});
You can turn the plugin off at any time using the disconnect
function:
document.querySelector("grammarly-editor-plugin").disconnect();
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.
Note that <grammarly-button>
will not inherit any theming or light/dark treatment from <grammarly-editor-plugin>
. You will need to set CSS variables on both <grammarly-editor-plugin>
and <grammarly-button>
or on an element that is a parent to both of them:
grammarly-editor-plugin,
grammarly-button {
color-scheme: dark;
}
Menu position
You can set the position of the Grammarly button menu relative to the Grammarly button:
Integration | Default | Values | Example |
---|---|---|---|
JavaScript | "left" | "left" , "right" | <grammarly-button menu-position="right"></grammarly-button> |
React | "left" | "left" , "right" | <GrammarlyButton menuPosition="right"/> |
Vue | "left" | "left" , "right" | <GrammarlyButton menu-position="right"/> |
Tone detector position
You can set the position of the tone detector (if present) relative to the Grammarly button:
Integration | Default | Values | Example |
---|---|---|---|
JavaScript | "left" | "left" , "right" | <grammarly-button tone-position="right"></grammarly-button> |
React | "left" | "left" , "right" | <GrammarlyButton tonePosition="right"/> |
Vue | "left" | "left" , "right" | GrammarlyButton tone-position="right"/> |
Underlines
You can decide to programmatically turn underlines off and on, and also change the z-index if needed.
Programmatically turning off underlines
The plugin displays underlines beneath words and phrases that can be improved. Users can turn off underlines from the Grammarly button menu. You can also control whether underlines are on or off programmatically by using the underlines
EditorConfig property.
const editor = document.querySelector("grammarly-editor-plugin");
editor.config = {
underlines: "off",
};
Z-index
You can customize the z-indexopen in new window of suggestion underlines if they are not appearing correctly in your app. This may happen if your app already includes z-index values that the Editor SDK cannot automatically detect.
Name | Default | Description |
---|---|---|
--grammarly-underline-z-index | auto | Underline z-index |
Suggestion cards
You can decide to programmatically turn suggestion cards off and on, and also change the introductory text.
Programmatically turning off suggestion cards
In some cases, you may want to programmatically turn off suggestion cards and then turn them back on. For example, you may want to turn off suggestion cards while a user is interacting with a menu or interactive element in your app and then turn them back on when the user is done.
You can configure whether suggestion cards are displayed by setting the suggestionCards EditorConfig property to on
or off
:
const editor = document.querySelector("grammarly-editor-plugin");
editor.config = {
suggestionCards: "off",
};
Introductory text
To provide context for users who are less familiar with Grammarly, suggestion cards include introductory text that appears until users accept or dismiss a suggestion for the first time.
This text can be customized using the introText EditorConfig property to include, for example, your app name:

Writing suggestions
Writing suggestions are the main way Grammarly delivers communication assistance. You can customize dialect and domain regardless of your app's plan, and if your app is on the Plus plan, you can customize suggestion categories.
For more information on how Grammarly delivers communication assistance, check out the full feature page on writing suggestions.
Dynamic CSS 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 Grammarly Text Editor 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 })
);