Grammarly Text Editor SDK

Integrating the Grammarly Text Editor SDK with your application allows you to bring real-time writing suggestions to your users. When they type in the text fields and boxes that you specify, they’ll get Grammarly’s best-in-class writing support without needing to download Grammarly or create an account.

Apply now for early access to the Text Editor SDK.

Writing suggestions

With the Text Editor SDK, you’ll be able to offer writing assistance across several dimensions. Below are some examples of the type of writing feedback Grammarly can provide. (Note: Some suggestions may only be available to paid Grammarly users who connect their account, if you activate Connected Accounts. Not all suggestions will be available during the beta phase.)

Correctness

  • Eliminate grammar, spelling, and punctuation mistakes
  • Ensure word choices sound natural and fluent

Clarity

  • Make every sentence concise and easy to follow
  • Rewrite hard-to-read sentences

Engagement

  • Choose the most compelling words
  • Use varied, engaging sentence structure

Delivery

  • Strike the right tone
  • Eliminate hedging language to sound more confident
  • Finesse phrases to have tact and empathy for readers
  • Get support in using respectful and current language practices

Want to get additional writing suggestion types in the Text Editor SDK? Let us knowopen in new window!

User experience

When you integrate the Text Editor SDK with your application, your users will experience Grammarly’s real-time writing suggestions.

As your users type, Grammarly will underline issues in their text. Red underlines indicate a grammar, spelling, or punctuation issue. Blue underlines mean Grammarly has detected the potential for writing improvements relating to clarity, style, or other areas of refinement. (Grammarly Business users who connect their accounts will also see gray underlines, which indicate a suggestion relating to their organization’s style guide.)

To see Grammarly's suggestion, users click the underlined text. They can then apply the suggested change by clicking Accept or hide the suggestion for their current writing session by clicking Dismiss.

Grammarly user experience

The Grammarly button appears by default in the bottom right-hand corner of the page. It shows how many suggestions Grammarly has for the user, across all text input fields on the page. Users can click the button to review their suggestions.

How it works

Integrating the Text Editor SDK with your application is simple.

  1. Register your application with Grammarly and create a client ID.
  2. Use a <script> tag to add the Text Editor SDK to your application with your client ID.
  3. Specify which text fields you would like Grammarly to check by adding the data-grammarly attribute to the appropriate HTML elements, or by wrapping your text fields with the provided web components.

That’s it! The Text Editor SDK will load dynamically with your page, connect to Grammarly’s cloud services, and check any text your users write in the text boxes and fields you indicated.

Supported text editors

The Text Editor SDK works with the following HTML elements and attributes:

  • <input>
  • <textarea>
  • contenteditable="true"

Additionally, the Text Editor SDK provides thin wrappers for React and Vue applications.

Ready to add Grammarly to your application? Follow our simple guide to get up and running in a few minutes!

Last Updated: 10/14/2021, 7:00:57 PM