You’ve launched your app. Possibly it’s the following nice running a blog platform, market, or social media platform. No matter it’s, your customers are writing, and it’s essential to you and them that they’ll write properly. Fortunately, you’ve armed your customers with a wealthy textual content editor that may do issues like mark up their textual content, embed wealthy media, and tag posts with hashtags. However what about ensuring that the textual content itself is evident, compelling, and grammatically right? In simply 5 minutes, you should utilize the Grammarly Textual content Editor SDK so as to add writing help to any JavaScript utility.

What’s the Grammarly Textual content Editor SDK?

The Grammarly Textual content Editor SDK supplies a JavaScript plugin that allows you to add Grammarly’s writing help to any <textarea>, <enter>, or contenteditable aspect in your utility. As they kind, your customers will robotically get real-time writing strategies for correctness, readability, tone, and extra, without having to enroll in a Grammarly account. You can even customise the plugin to tailor it to your utility’s UX. The core performance is free, and you may join the paid Plus plan to get superior writing options.

Including writing help to your net app

Let’s stroll by means of integrating Grammarly with an app.

In case you’d wish to code together with this text, you may fork our starter templates for React, Vue, vanilla JavaScript, and HTML on Codesandbox.io. You can even clone the Grammarly for Builders repository on GitHub. The starter templates are beneath examples and observe the naming sample demo-[framework-name].

Create a Grammarly for Builders account

In case you don’t have already got one, join a free Grammarly account at developer.grammarly.com. If you have already got a Grammarly account, you should utilize your present credentials to log in.

Arrange your Grammarly for Builders app

When you’ve signed in, you’ll be taken to the My Apps web page, the place you may create your first Grammarly for Builders app. After you’ve created your first app, you’ll robotically be taken to the App Console. There are two steps you’ll want to absorb the App Console: getting your shopper ID and configuring your origins.

Get your shopper ID

Your app has a shopper ID that identifies your Grammarly Textual content Editor SDK integration. To get your shopper ID, navigate to the online shopper web page positioned beneath “Shoppers” within the navigation menu. Then, you may seize your shopper ID from the fast begin or discover it beneath the Credentials header on the backside of the web page.

Configure your net app origins

Add the origin of your net app to the checklist of origins. You could find it within the Credentials part on the backside of the web page, just under the shopper ID.

Add the Grammarly Textual content Editor SDK dependency

Subsequent, relying on which framework you’re utilizing, you’ll set up the suitable npm bundle for the Grammarly Textual content Editor SDK. We have now a core JavaScript library in addition to framework-specific wrapper libraries for React and Vue.

React

In case you’re utilizing React, you may set up the React wrapper library:

Vue

In case you’re utilizing Vue, you may set up the Vue wrapper library:

JavaScript

In case you’re utilizing plain JavaScript or a framework aside from React or Vue, set up the core library:

HTML

In case you don’t need to use a construct step or are constructing a prototype, it’s also possible to use a content material supply community (CDN) like jsDelivr:

Add the plugin to your textual content editor

The final step is so as to add the Grammarly Textual content Editor Plugin to your textual content editor.

Utilizing the Grammarly Textual content Editor element

The quickest means so as to add the plugin is to wrap your textual content editor with a Grammarly Textual content Editor Plugin element. Within the examples under, we’re wrapping a <textarea>, however the plugin works with <enter>, or contenteditable parts as properly.

React

In React and Vue, you’ll import the <GrammarlyEditorPlugin> element and use it to wrap your textual content editor. Ensure to go in your shopper ID.

Vue

JavaScript

In plain JS and HTML, you’ll wrap your textual content editor with a <grammarly-editor-plugin> element and go your shopper ID when initializing the SDK. In case you’re utilizing the core JavaScript library, you’ll do that by calling Grammarly.init() and passing in your shopper ID.

HTML

In HTML, you may initialize the SDK by passing your shopper ID to the script tag as a parameter. Loading the SDK by means of a CDN is an efficient method for growth however isn’t meant for manufacturing.

Now your writing help integration is full! 🎉

The Grammarly Textual content Editor Plugin operating in a textual content editor. The Grammarly button seems within the backside proper nook.

Strive writing some textual content in your textual content editor. The Grammarly button ought to seem within the backside proper nook of your net web page. If it isn’t displaying, take a look at our article on diagnosing points.

Wrapping up

You’ve realized how you can add writing help to any JavaScript utility utilizing the Grammarly Textual content Editor SDK, however that is just the start. You possibly can discover our docs to discover ways to configure the conduct of the plugin, set the default English dialect, and use CSS to customise the plugin’s theme. You can even demo configuration choices in actual time with out writing a line of code utilizing the Configurator.

When you have questions concerning the Grammarly Textual content Editor SDK or need to make a function request, be part of us on the Grammarly for Builders dialogue board on GitHub. To remain updated on the SDK’s growth as we add new options, observe @GrammarlyDevs on Twitter. We’d love to listen to about what you’re constructing.