Grammarly UX

The Grammarly user experience is composed of three core elements:

1. The Grammarly button shows the number of suggestions available to review and opens a settings menu.
2. Suggestion underlines show words and phrases that can be improved as users write in your app's text fields and editors.
3. Suggestion cards show information, options, and actions related to the specific changes Grammarly suggests.

These components are used across every Grammarly product offering, and their behavior in the Grammarly Text Editor Plugin will be familiar to those who have tried Grammarly before.

Grammarly button

The Grammarly button shows your users how many suggestions Grammarly has found across all text editors using the plugin on the current page. It’s also where users can connect their Grammarly account and access settings, such as turning Grammarly off or changing their dialect.

By default, the Grammarly button displays at the bottom right corner of the screen. You can learn how to customize the position of the Grammarly button here.

Suggestion underlines

Grammarly will underline words and phrases where it has a suggestion for improvement. Different colors of underlines indicate different types of suggestions.

• Red underlines: Correctness suggestions related to spelling, grammar, and punctuation.
• Blue underlines: Advanced suggestions related to clarity, engagement, and delivery.
• Gray underlines: Custom style guideopen in new window suggestions (available to Grammarly Business users who connect their accounts).

If your app is on the Free planopen in new window, users will receive suggestions for correctness only. If your app is on the Plus plan, users will additionally receive suggestions for clarity, engagement, and delivery. Users who connect their Grammarly Premium or Grammarly Business accounts will always receive suggestions for correctness, clarity, engagement, and delivery, regardless of your app’s plan.

Your users can choose to turn off underlines from the Grammarly button menu. If you need to adjust the z-index of the underlines or programatically turn them off and on, see this guide.

Suggestion cards

A suggestion card appears whenever the user hovers over an underline. The card will display the context of the suggestion, provide options when relevant, and present actions for the user to accept or dismiss the suggestion.

1. Title: Summarizes the suggested change
2. Close: Allows the user to close the suggestion card
3. Content: Displays the text that will be changed by the suggestion
4. Options: Allow the user to choose a type of text change when options are available
5. Actions: Allow the user to accept, dismiss, or report the suggestion
   • Dismissed suggestions will be remembered for users who connect their accounts. Otherwise, they may appear again if the user refreshes the page.

To learn how to theme the suggestion cards and hide them if necessary, see our Customization guide.

Keyboard shortcuts

The plugin supports keyboard shortcuts, as described below.

Command	Shortcut
Navigate suggestions	←, →
Accept suggestion	a, A
Select suggestion option	1, 2, ... 9
Dismiss suggestion	d, D
Close suggestion card	esc

To help you learn these shortcuts, we created a keyboard mode that places the shortcuts alongside their corresponding options and actions.

You can enter keyboard mode with the following commands, depending on your operating system.

• Mac: Cmd+Ctrl+G
• Windows: Ctrl+Alt+G

When you're ready to leave keyboard mode, press the escape key.

TIP

Depending on your browser, you can use other shortcuts, like Tab and Shift + Tab, to navigate around suggestion cards, and you can use Enter to accept the active, highlighted option/action.