How to Add Writing Assistance to Any JavaScript App in Minutes

Youve launched your app. Maybe its the next great blogging platform, marketplace, or social media platform. Whatever it is, your users are writing, and its important to you and them that they can write well. Thankfully, youve armed your users with a rich text editor that can do things like mark up their text, embed rich media, and tag posts with hashtags. But what about making sure that the text itself is clear, compelling, and grammatically correct? In just five minutes, you can use the Grammarly Text Editor SDK to add writing assistance to any JavaScript application.

Whats the Grammarly Text Editor SDK?

The Grammarly Text Editor SDK provides a JavaScript plugin that lets you add Grammarlys writing assistance to any <textarea>,<input>, or 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 applications 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

Lets walk through integrating Grammarly with an app.

If youd like to code along with this article, you can fork our starter templates for React, Vue, vanilla JavaScript, and HTML on Codesandbox.io. You can also clone the Grammarly for Developers repository on GitHub. The starter templates are under examples and follow the naming pattern demo-[framework-name].

If you have the Grammarly browser extension, make sure its turned off, or the Grammarly Text Editor plugin will not initialize.

Create a Grammarly for Developers account

If you dont 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 youve signed in, youll be taken to the My Apps page, where you can create your first Grammarly for Developers app. After youve created your first app, youll automatically be taken to the App Console. There are two steps youll 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

Next, depending on which framework youre using, youll install the appropriate npm package for the Grammarly Text Editor SDK. We have a core JavaScript library as well as framework-specific wrapper libraries for React and Vue.

React

If youre using React, you can install the React wrapper library:

npm install @grammarly/editor-sdk-react

Vue

If youre using Vue, you can install the Vue wrapper library:

npm install @grammarly/editor-sdk-vue

JavaScript

If youre using plain JavaScript or a framework other than React or Vue, install the core library:

npm install @grammarly/editor-sdk

HTML

If you dont want to use a build step or are building a prototype, you can also use a content delivery network (CDN) like jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/@grammarly/editor-sdk?clientId=your_client_ID"></script>

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, were wrapping a <textarea>, but the plugin works with <input>, or contenteditable elements as well.

React

In React and Vue, youll import the component and use it to wrap your text editor. Make sure to pass in your client ID.

import { GrammarlyEditorPlugin } from '@grammarly/editor-sdk-react'...export function GrammarlyEditor() {  <GrammarlyEditorPlugin clientId="your_client_ID">    <textarea />  </GrammarlyEditorPlugin>}

Vue

<script setup>  import { GrammarlyEditorPlugin } from '@grammarly/editor-sdk-vue'</script>...<template>  <GrammarlyEditorPlugin clientId="your_client_ID">    <textarea />  </GrammarlyEditorPlugin></template>

JavaScript

In plain JS and HTML, youll wrap your text editor with a <grammarly-editor-plugin> component and pass your client ID when initializing the SDK. If youre using the core JavaScript library, youll do this by calling Grammarly.init() and passing in your client ID.

import * as Grammarly from '@grammarly/editor-sdk'Grammarly.init(your_client_ID) // initialize the SDK with your client ID...<grammarly-editor-plugin>  <textarea></textarea></grammarly-editor-plugin>

HTML

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 isnt meant for production.

<grammarly-editor-plugin>  <textarea></textarea></grammarly-editor-plugin>...<script src="https://cdn.jsdelivr.net/npm/@grammarly/editor-sdk?clientId=your_client_ID"></script>

Now your writing assistance integration is complete!

Try writing some text in your text editor. The Grammarly button should appear in the bottom right corner of your web page. If it isnt showing, check out our article on diagnosing issues.

Wrapping up

Youve learned how to add writing assistance to any JavaScript application using the Grammarly Text Editor SDK, but this is just the beginning. You can explore our docs to learn how to configure the behavior of the plugin, set the default English dialect, and use CSS to customize the plugins theme. You can also demo configuration options in real time without writing a line of code using the Configurator.

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 SDKs development as we add new features, follow @GrammarlyDevs on Twitter. Wed love to hear about what youre building.

The post How to Add Writing Assistance to Any JavaScript App in Minutes appeared first on Grammarly Blog.