How to Integrate Grammarly’s Text Editor Into a React Application

Are you finding it hard to deliver timely work without making typos and grammar errors? It can be stressful especially when you want to make sure everything is perfect—using Grammarly can improve your productivity and writing experience.

Grammarly is a cloud-based grammar-checker and proofreader. It detects and corrects grammar, spelling, punctuation, and other writing errors. It also offers vocabulary enhancement suggestions that help you improve the quality of your writing.

Follow along to learn how to integrate Grammarly into a text editor built with React.

What Is Grammarly for Developers?

Grammarly is widely recognized for its browser extension which you can use to correct grammatical mistakes in a website’s text editor. Grammarly for Developers is a feature on Grammarly that helps you integrate Grammarly’s automated proofreading and plagiarism detection tools into your web applications.

You can now use Grammarly to create a built-in real-time text editing feature into your web application using Grammarly’s Software Development Kit (SDK). This gives your users access to all Grammarly features without needing to download the browser extension.

Create a New Application on Grammarly Developer Console

Set up a new application on Grammarly’s developer console by following these steps:

1. Head over to the Grammarly for Developers console and sign up for an account. If you already have a Grammarly account, you can use it to sign into the console.
2. After signing in, on the console’s dashboard, click on the New app button to create a new application. Fill in the name of your app and hit Create to finish the process.
3. Next, on the left pane of your application’s dashboard, select the Web tab to view your application’s credentials on the web client settings page.
4. Copy the Client ID provided. On the same page, notice the quick guide on how to integrate Grammarly SDK on a web client. The SDK is compatible with React, Vue.js, and plain JavaScript clients. You can also integrate the SDK into HTML by adding the SDK as a script tag.

The Grammarly Text Editor SDK supports the latest versions of popular desktop browsers: Chrome, Firefox, Safari, Edge, Opera, and Brave. There is currently no support for mobile browsers.

Integrate Grammarly’s SDK in a React Text Editor

First, create a React application. Next, in the root directory of your project folder, create an ENV file to hold your environment variable: your ClientID. Head over to your application’s web settings page on Grammarly’s Developer Console, and copy your ClientID.

 REACT_APP_GRAMMARLY_CLIENT_ID= ClientID 

1. ​​Install the Required Packages

Run this command on your terminal to install the Grammarly React Text Editor SDK in your app:

 npm install @grammarly/editor-sdk-react 

2. Create a Text Editor

After installing the Grammarly React text editor SDK, create a new folder in the /src directory of your React application, and name it, components. Inside this folder, create a new file: TextEditor.js.

In the TextEditor.js file, add the code below:

 import React from 'react'
import { GrammarlyEditorPlugin } from '@grammarly/editor-sdk-react'
function TextEditor() {
  return (
    <div className="App">
      <header className="App-header">
        <GrammarlyEditorPlugin 
           clientId={process.env.REACT_APP_GRAMMARLY_CLIENT_ID}
           config={{ activation: "immediate" }}
        >
          <input placeholder="Share your thoughts!!" />
        </GrammarlyEditorPlugin> 
      </header>
    </div>
  );
}
export default TextEditor; 

In the code above, you import the GrammarlyEditorPlugin from the Grammarly-React SDK and wrap an input tag with the GrammarlyEditorPlugin.

The GrammarlyEditorPlugin takes in two properties: clientID, and a config property which sets the activation to immediate. This property activates the plugin and makes it available to the user as soon as the page loads.

If you have the Grammarly browser extension, you need to disable it or uninstall it for this tutorial since the plugin on your project will throw an error once it detects the extension on your browser.

Grammarly’s editor plugin has other additional config properties that you can use to customize your editor. They include:

• Autocomplete: This property completes phrases for your users as they type.
• ToneDetector: This shows the tone detector interface.

3. Render the Text Editor Component

Add the code below in your app.js file to render your text editor component:

 import TextEditor from './components/TextEditor';
function App() {
  return (
    <div className="App">
      <header className="App-header">
      <TextEditor />
      </header>
    </div>
  );
}
export default App;
 

Now, run this command on your terminal to spin up the development server and view the results on your browser:

 npm start 

Your Grammarly-enabled editor should look something like this:

Notice, you wrapped an input tag with the GrammarlyEditorPlugin. You can also wrap a textarea element or any element with the useful contenteditable attribute set to “true”.

Using a textarea tag:

 <GrammarlyEditorPlugin 
  clientId={process.env.REACT_APP_GRAMMARLY_CLIENT_ID}
  config={{ activation: "immediate" }}
>
    <textarea placeholder=" Share your thoughts!!" />
</GrammarlyEditorPlugin> 

Run this command on your terminal to view the results on your browser:

 npm start 

You should then see your Grammarly-enabled textarea:

Integrate With a Rich Text editor Like TinyMCE

You can also wrap a fully-fledged text editor with the GrammarlyEditorPlugin. The Grammarly Text Editor SDK is compatible with several rich text editors such as:

• TinyMCE
• Slate
• CKEditor
• Quill

TinyMCE is an easy-to-use text editor with a lot of formatting and editing tools that enable users to write and edit content within a user-friendly interface.

To integrate TinyMCE’s editor into a React application with Grammarly writing assistant enabled, first, visit TinyMCE and sign up for a developer account. Next, on the Onboarding dashboard, provide a domain URL for your application and click the Next: Continue to your dashboard button to finish the setup process.

For local development, you don’t need to specify the domain since the localhost URL is set by default, however, once you ship your React application to production, you need to provide the live domain URL.

Lastly, copy your API key from your developer dashboard and go back to your project on your code editor and add the API key in the ENV file you created earlier:

 REACT_APP_TINY_MCE_API_KEY="API key" 

Now, head over to your TextEditor.js file and make the following changes:

• Make the following imports:

   import React, { useRef } from 'react';
  import { Editor } from '@tinymce/tinymce-react';
   

  Add the useRef hook and import the TinyMCE Editor component from the installed package.

• In the functional component, add the code below:

    const editorRef = useRef(null); 

  The useRef hook allows you to persist mutable values between renders. You will use the editorRef variable to maintain the state of the data typed on the editor.

• Finally, return the editor component from TinyMCE library:

   <Editor
    apiKey={process.env.REACT_APP_TINY_MCE_API_KEY}
    onInit={(evt, editor) => editorRef.current = editor}
    initialValue="<p>This is the initial content of the editor.</p>"
    init={{
      height: 500,
      menubar: false,
      plugins: [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
        'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
        'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
      ],
      toolbar: 'undo redo | blocks | ' +
        'bold italic forecolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
      content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    }}
  /> 

• The component defines the editor properties i.e. the API key, the initial value, an object with the height of the editor, the plugins and toolbar properties, and lastly the editorRef.current method which assigns the value of the “editor” parameter to the “editorRef” variable.
• The “editor” parameter is an event object that is passed in when the “onInit” event is fired.

The complete code should look like this:

 import React, { useRef } from 'react';
import { GrammarlyEditorPlugin } from '@grammarly/editor-sdk-react';
import { Editor } from '@tinymce/tinymce-react';
function TextEditor() {
  const editorRef = useRef(null);
  return (
    <div className="App">
      <header className="App-header">
      <GrammarlyEditorPlugin 
           clientId={process.env.REACT_APP_GRAMMARLY_CLIENT_ID}
            config={
              { activation: "immediate" }}
      >
        <Editor
          apiKey={process.env.REACT_APP_TINY_MCE_API_KEY}
          onInit={(evt, editor) => editorRef.current = editor}
         initialValue="<p>This is the initial content of the editor. </p>"
          init={{
            height: 500,
            menubar: false,
           plugins: [
              'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
              'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
              'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
           ],
            toolbar: 'undo redo | blocks | ' +
              'bold italic forecolor | alignleft aligncenter ' +
              'alignright alignjustify | bullist numlist outdent indent | ' +
              'removeformat | help',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
          }}
        />
     </GrammarlyEditorPlugin> 
      </header>
    </div>
  );
}
export default TextEditor;
 

​​In this code, you wrap the TinyMCE editor component with the GrammarlyEditorPlugin to integrate the Grammarly assistance feature on TinyMCE text editor. Finally, spin up the development server to save the changes and navigate to in your browser to view the results.

Use Grammarly to Improve User Productivity

Grammarly’s SDK provides a powerful tool that can help improve the quality and accuracy of your content in a React text editor.

It’s easy to integrate with existing projects and provides comprehensive grammar and spell-checking capabilities that can improve the user writing experience.