Skip to main content

Getting Started with Building Editors

Overview#

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 README.md of the Editor Template.

Platforms#

  • 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

Environment#

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

Practices#

We recommend that you follow these practices:

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

Files#

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

editor-template-cra-typescript
โ”œโ”€โ”€ .gitignore
โ”œโ”€โ”€ .prettierrc
โ”œโ”€โ”€ LICENSE
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ 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 README.md of the Editor Template.

Last updated on