In this post, I will create a small web app using react.js to create your own HTML, CSS, and Javascript code editor using the the library codemirror.

How to start

Before getting started make sure you have initialized your React project using vite

Install Libraries

I will @uiw/react-codemirror library. This library is used to build code editors with great features, such as theme, light / dark mode, language support, etc. However, we need to install many a dependency to add these functionalities.

yarn add @uiw/react-codemirror

This library supports many programming languages with intelligence support. However, you have to install each language support separately. For this tutorial, I’m using Javascript language for the editor

yarn add @codemirror/lang-javascript

You can also add the syntax support of other language

Here is a list of a few dependencies supporting different languages.

• @codemirror/lang-html
• @codemirror/lang-css
• @codemirror/lang-python
• @codemirror/lang-cpp
• @codemirror/lang-php
• @codemirror/lang-sql
• @codemirror/lang-json
• @codemirror/lang-xml
• @codemirror/lang-java
• @codemirror/lang-markdown
• @codemirror/lang-rust

and the following languages under legacy support

• @codemirror/legacy-modes/mode/haskel
• @codemirror/legacy-modes/mode/julia
• @codemirror/legacy-modes/mode/brainfuck
• @codemirror/legacy-modes/mode/clojure
• @codemirror/legacy-modes/mode/cobol
• @codemirror/legacy-modes/mode/coffeescript
• @codemirror/legacy-modes/mode/go
• @codemirror/legacy-modes/mode/cypher
• @codemirror/legacy-modes/mode/erlang
• @codemirror/legacy-modes/mode/fortran
• @codemirror/legacy-modes/mode/hasket
• and many more…

Let’s add the code now

Create a component CodeEditor

import ReactCodeMirror from '@uiw/react-codemirror'
import { javascript } from '@codemirror/lang-javascript'

function CodeEditor() {
	return (
		<div className='editor'>
			<h1>Code editor</h1>
			<ReactCodeMirror
				value={"console.log('Hello');"}
				height='200px'
				extensions={[javascript({ jsx: true })]}
			/>
		</div>
	)
}

export default CodeEditor

The value prop is the code string that you want to display on the editor

Theme

This library also provides a lot of themes for your editor.

You can use these themes by installing their dependency

yarn add @uiw/codemirror-theme-okaidia

import { okaidia } from "@uiw/codemirror-theme-okaidia"
.......

<ReactCodeMirror
.......
theme={okaidia}
/>

Using Custom Theme

You can even define your custom themes with your desired color-scheme. For adding custom themes, You need two more libraries to define your theme. Here is the example

yarn add @uiw/codemirror-themes @lezer/highlight

Create a theme.js file

import { createTheme } from '@uiw/codemirror-themes'
import { tags as t } from '@lezer/highlight'

export const myTheme = createTheme({
	theme: 'light',
	settings: {
		background: '#ffffff',
		foreground: '#75baff',
		caret: '#5d00ff',
		selection: '#036dd626',
		selectionMatch: '#036dd626',
		lineHighlight: '#8a91991a',
		gutterBackground: '#fff',
		gutterForeground: '#8a919966'
	},
	styles: [
		{ tag: t.comment, color: '#787b8099' },
		{ tag: t.variableName, color: '#0080ff' },
		{ tag: [t.string, t.special(t.brace)], color: '#5c6166' },
		{ tag: t.number, color: '#5c6166' },
		{ tag: t.bool, color: '#5c6166' },
		{ tag: t.null, color: '#5c6166' },
		{ tag: t.keyword, color: '#5c6166' },
		{ tag: t.operator, color: '#5c6166' },
		{ tag: t.className, color: '#5c6166' },
		{ tag: t.definition(t.typeName), color: '#5c6166' },
		{ tag: t.typeName, color: '#5c6166' },
		{ tag: t.angleBracket, color: '#5c6166' },
		{ tag: t.tagName, color: '#5c6166' },
		{ tag: t.attributeName, color: '#5c6166' }
	]
})

Now you can pass this theme in your CodeEditor prop just like you did for themes library themes

Now you have implemented your IDE for writing code. You can add two more components for CSS, and JavaScript if you want to create 3 code screens like codepen.io