Code Editor with Preview in Browser

A code editor is a tool where one can write code and perform different operations. One can write code in any application that supports the plain text but a code editor is best suited for this job. There are many code editors and these editors can be customized to fit a specific work situation, coding language, and practices. But, they all have one thing in common, i.e. they are used to develop code.

There are many online code editors for browsers, where you can write code and have a preview of it. For example, w3schools, tutorialspoint and so on. If we talk about the browser, the code that programmers wrote is parsed by the browser and is presented to the visitor as content.

In this article, we are going to create an application where a user can write an HTML program in-browser code editor, and its content is shown on the other side.

Installation

We are going to bootstrap our application using CRA. Let’s start creating our application.

npx create-react-app my-awesome-app
cd my-awesome-app
yarn start

You can open http://localhost:3000/ to see your app.

Now, we are going to create our editor. There are different editor's libraries available in npm store. We are going to use, react-ace. React-ace is a library that contains a set of React components for Ace. If you haven’t heard about Ace editor, it's an embedded code editor written in Javascript. You can embed it easily in any web application or javascript project.

yarn add react-ace

Now, let’s start writing the code. We will be creating an editor which supports HTML snippet and also has basic auto-completion for HTML.

Let’s break down the sections:

Here in this section, we are importing the HTML snippets, Monaki theme for the editor which will be used later on.

import "ace-builds/src-min-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-html";
import "ace-builds/src-noconflict/snippets/html";
import "ace-builds/src-noconflict/theme-monokai"`;

In this area, we are creating a reference, where we will render the compiled output. If there is any change in the editor, onEditorChange get’s triggered and the resulting output is shown on the right-hand side.

............
this.myRef = React.createRef();
this.onEditorChange = this.onEditorChange.bind(this) 
}
onEditorChange(newValue) {   ReactDOM.findDOMNode(this.myRef.current).innerHTML = newValue 
}
.........

Thus, we embedded the code editor in our application and also get a preview of its result.

Bonuses

It would be nice if we can show errors in our editor in real time so that we can fix them. For this, we can use a linter. It's a tool for identifying errors, it analyzes your code for stylistic and programming errors against the rules it knows. If part of your code breaks the standard rules, this can pose a problem.

Let’s add a linter to our application.

const ace = require('ace-builds/src-noconflict/ace');
ace.config.set("basePath", "https://cdn.jsdelivr.net/npm/ace-builds@1.4.3/src-noconflict/");
ace.config.setModuleUrl('ace/mode/javascript_worker', "https://cdn.jsdelivr.net/npm/ace-builds@1.4.3/src-noconflict/worker-javascript.js");

Now if there’s an error, it will show you a piece of nice descriptive information about the error.

Let’s sum up our code:

Conclusion

In this way, we can embed the react-ace editor in our application and have a preview of the result. Here, we learn to set up the editor, learn to enable different features such as snippets, basic auto-completion, and also learn to add a linter to analyze if the code is following the standards or not.

There are lots of features that have not been covered here. If you want to learn more about ace read here.

Source Code: https://github.com/sumn2u/realtime-html-server

Preview: https://sumn2u.github.io/realtime-html-server/

Thanks for reading ! 🙏