Skip to main content

Getting Started with Building Editors


This page provides a list of links to the technologies and practices that we recommend using for building editors. These technologies are used in the Editor Template - Create React App and TypeScript. If you are familiar with React, TypeScript, and Sass, then you can skip this overview and go straight to the of the Editor Template.


  • GitHub - A website to store the source code of your editor and to host a usable copy of your editor

Programming Languages#

We recommend using the following programming languages to build editors:

  • HTML - A programming language for conveying meaning
  • CSS - A programming language for conveying style
  • SCSS - A programming language that is like CSS but is easier to write
  • JavaScript - A programming language for performing tasks
  • TypeScript - A programming language that is like JavaScript but is easier to check for errors


To get started with building editors, we recommend downloading the following technologies on your desktop computer:

  • Node.js - An environment where you can run JavaScript code to run
  • NPM or Yarn - A package manager for the JavaScript programming language. NPM comes with Node.js, but we use Yarn
  • Visual Studio Code - A text editor to edit the source files of your editor
  • Git Bash - A tool to interact with your file system

Packages and Libraries#

We recommend using the following packages and libraries:

  • Prettier - A package for formatting your code
  • ESLint - A package for checking your JavaScript and TypeScript code for errors
  • React - A library for building web applications using JavaScript
  • Create React App - A package that makes it easy to get started with React


We recommend that you follow these practices:

  • Conventional Commits - A specification for adding human and machine readable meaning to commit messages


The Editor Template - Create React App and TypeScript has the following files:

โ”œโ”€โ”€ .gitignore
โ”œโ”€โ”€ .prettierrc
โ”œโ”€โ”€ LICENSE
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ tsconfig.json
โ”œโ”€โ”€ yarn.lock
โ”œโ”€โ”€ public
โ”‚ โ”œโ”€โ”€ favicon.ico
โ”‚ โ”œโ”€โ”€ index.html
โ”‚ โ”œโ”€โ”€ logo192.png
โ”‚ โ”œโ”€โ”€ logo512.png
โ”‚ โ”œโ”€โ”€ manifest.json
โ”‚ โ”œโ”€โ”€ package.json
โ”‚ โ”œโ”€โ”€ robots.txt
โ”‚ โ””โ”€โ”€ sample.ext.json
โ””โ”€โ”€ src
โ”œโ”€โ”€ Editor.test.tsx
โ”œโ”€โ”€ index.scss
โ”œโ”€โ”€ index.tsx
โ”œโ”€โ”€ logo.svg
โ”œโ”€โ”€ react-app-env.d.ts
โ”œโ”€โ”€ reportWebVitals.ts
โ”œโ”€โ”€ setupTests.ts
โ”œโ”€โ”€ components
โ”‚ โ””โ”€โ”€ Editor.tsx
โ””โ”€โ”€ stylesheets
โ”œโ”€โ”€ dark.scss
โ”œโ”€โ”€ main.scss
โ””โ”€โ”€ print.scss

When you are familiar with these technologies, follow the instructions in the of the Editor Template.

Last updated on