Grammarly Text Editor SDK

Using the Grammarly Text Editor SDK in your application allows you to bring real-time writing suggestions to your users. The SDK lets you easily add and configure the Grammarly Text Editor Plugin. In text fields and editors that use the plugin, your users will get Grammarly’s best-in-class writing support as they type, without needing to download Grammarly or create an account.

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 accounts.)

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 add the Grammarly Text Editor Plugin to 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.

You can customize the plugin to match the look and feel of your application.

Integration

Integrating the Text Editor SDK with your application is simple.

  1. Create a new Grammarly for Developers app.
  2. Install the Text Editor SDK.
  3. Add the Grammarly Text Editor Plugin to the text editors you’d like Grammarly to check.

That’s it! The plugin 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. Interested in trying it out? See our demo.

How it works

The plugin is encapsulated as a web component. Using a custom element and shadow DOMopen in new window, the SDK draws underlines, highlights text, and shows suggestion cards in an invisible overlay. It does not manipulate the DOM or trap user events.

Grammarly's communication assistance services are hosted in a secure AWS cloud platform, and all data is encrypted in transit and at rest (anonymous users' text is discarded within 24 hours). Learn more about security and privacy at Grammarly.

Supported text editors

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

  • <input type="text">
  • <textarea>
  • contenteditable="true" that are not readonly or disabled

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

We regularly test the SDK with the following frameworks for building rich text editors:

  • CKEditor 5
  • Quill 1.3
  • Slate
  • TinyMCE 5 & 6

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

Last Updated: 11/22/2022, 9:58:49 PM