What’s the Grammarly Text Editor SDK?
contenteditable element in your application. As they type, your users will automatically get real-time writing suggestions for correctness, clarity, tone, and more, without needing to sign up for a Grammarly account. You can also customize the plugin to tailor it to your application’s UX. The core functionality is free, and you can sign up for the paid Plus plan to get advanced writing features.
Adding writing assistance to your web app
Let’s walk through integrating Grammarly with an app.
Create a Grammarly for Developers account
If you don’t already have one, sign up for a free Grammarly account at developer.grammarly.com. If you already have a Grammarly account, you can use your existing credentials to log in.
Set up your Grammarly for Developers app
Once you’ve signed in, you’ll be taken to the My Apps page, where you can create your first Grammarly for Developers app. After you’ve created your first app, you’ll automatically be taken to the App Console. There are two steps you’ll need to take in the App Console: getting your client ID and configuring your origins.
Get your client ID
Your app has a client ID that identifies your Grammarly Text Editor SDK integration. To get your client ID, navigate to the web client page located under “Clients” in the navigation menu. Then, you can grab your client ID from the quick start or find it under the Credentials header at the bottom of the page.
Configure your web app origins
Add the origin of your web app to the list of origins. You can find it in the Credentials section at the bottom of the page, just below the client ID.
Add the Grammarly Text Editor SDK dependency
If you’re using React, you can install the React wrapper library:
If you’re using Vue, you can install the Vue wrapper library:
If you don’t want to use a build step or are building a prototype, you can also use a content delivery network (CDN) like jsDelivr:
Add the plugin to your text editor
The last step is to add the Grammarly Text Editor Plugin to your text editor.
Using the Grammarly Text Editor component
The fastest way to add the plugin is to wrap your text editor with a Grammarly Text Editor Plugin component. In the examples below, we’re wrapping a
<textarea>, but the plugin works with
contenteditable elements as well.
In React and Vue, you’ll import the <GrammarlyEditorPlugin> component and use it to wrap your text editor. Make sure to pass in your client ID.
In plain JS and HTML, you’ll wrap your text editor with a
Grammarly.init() and passing in your client ID.
In HTML, you can initialize the SDK by passing your client ID to the script tag as a parameter. Loading the SDK through a CDN is a good approach for development but isn’t meant for production.
Now your writing assistance integration is complete! 🎉
The Grammarly Text Editor Plugin running in a text editor. The Grammarly button appears in the bottom right corner.
Try writing some text in your text editor. The Grammarly button should appear in the bottom right corner of your web page. If it isn’t showing, check out our article on diagnosing issues.
If you have questions about the Grammarly Text Editor SDK or want to make a feature request, join us on the Grammarly for Developers discussion board on GitHub. To stay up to date on the SDK’s development as we add new features, follow @GrammarlyDevs on Twitter. We’d love to hear about what you’re building.