Embedding a Code Editor in your Website Using React-Ace

Welcome message!

Welcome!

Giving your user a familiar environment to write code is important. React-Ace gives you as the developer an easy way to offer a familiar environment to your user. In this tutorial, we will embed an Ace Editor into a react component, specify the coding language expected, and add a theme!

Step 1 — Installing the react-ace NPM

npm install react-ace

Step 2 — Setting up our component

Start off with a simple react component.

import React, { Component } from 'react';
export default class Main extends Component {
  render() {
    return <div></div>;
  }
}

Now, add the following line to import your editor:

import AceEditor from 'react-ace';

Step 3 — Adding the editor to your component

To add the AceEditor to the webpage, type: <AceEditor /> in between the <div> tags in your component.

The full component should now look like:

import React, { Component } from 'react';
import AceEditor from 'react-ace';
export default class Main extends Component {
  render() {
    return (
      <div>
        <AceEditor />
      </div>
    );
  }
}

Now if you check your webpage you should see a basic code editor with the ability to type!

How simple was that?! Now let us make it more excited by adding some language recognition and themes.

Step4 — Adding modes and themes

In this section, we will make our code editor both recognize javascript as well as have a monokai theme.

At the top of your file add the following two lines:

import 'brace/mode/javascript'
import 'brace/theme/monokai'

Now, make your AceEditor component look like this:

<AceEditor mode="javascript" theme="monokai" />

Your code editor can now recognize javascript key words and has a cool new color theme!

Conclusion!

From this tutorial you can see that adding a code editor to your webpage is pretty straight forward. Adding this functionality will make your webpage much more appealing and attractive for your user. Feel free to continue exploring what AceEditor has to offer here.