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 are only available on the Plus planopen in new window.)

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!

For the full feature documentation, including more information about how and when these suggestions are shown to users, check out writing suggestions.

User experience

When you add the Grammarly Text Editor Plugin to your application, your users will experience Grammarly’s real-time writing assistance.

To see Grammarly's suggestions, users hover over the underlined text. They can then apply the suggested change by clicking Accept or hide the suggestion by clicking Dismiss. For a comprehensive overview of the Grammarly user experience, see Grammarly UX.

The Grammarly button appears by default in the bottom right 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 connect their Grammarly account and access settings.

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 analyze.

That’s it! The plugin will load dynamically with your page, connect to Grammarly’s cloud services, and analyze 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 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.

Customization

You can customize the plugin to match the look and feel of your application. Interested in trying out different customizations? Use the Configuratoropen in new window.

Supported text editors

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

• <input type="text">
• <textarea> that are not readonly or disabled
• 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
• Editor.js 2
• Quill 1.3
• Slate
• TinyMCE 6

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