What is an Online Code Editor?

A code editor gives developers an environment to write code using a specific programming language. It is a tool that resides on a remote server and is accessible via browsers. While the code editor’s primary purpose is to assist with coding, most of the editors go beyond and help developers with pointing errors, autocomplete suggestions and running the programs.

Some online code editors have basic features more similar to text editors while others are like complete IDEs. Also, some online code editors are focused on one language or even a framework i.e. specific to JavaScript or else.

Why an Online Code Editor?

• Collaboration

• Sharing and developer relations

• For online interviews and hiring

• Prototyping

• Learning

How to choose an Online Code Editor?

Editors include great features like auto-completion, git integration, plugin support, CI/CD pipelines, and others. Other aspects that should be included are:

• How fast an application works

• Ease of setup

• Languages support

• A number of text and layout settings

• For free editors: how much ads it shows

List of Online Code Editors

1. StackBlitz

StackBlitz online code editor goes beyond the regular HTML, CSS, and JavaScript-based project support. You can create projects using React, Angular, Vue and many others.

With the free plan, you can connect to any public GitHub repository and work on the source code. The NPM dependency management is another support provided by them. It also supports native support for Firebase. You can edit the code offline if not connected!

2. CodePen

CodePen is a very popular tool in the online code editor market. Browsing, working, and playing with Pens are a great way to understand how they were built and how the code works. It is fast, easy to use, and allows a web developer to write and share HTML/CSS/JS code online.

It's features includes file system, autocomplete, website deployment, collaboration mode and much more!

3. CodeSandBox

CodeSandBox is an online code editor and prototyping tool that helps with web development. It also supports project structure creation using web development libraries, frameworks. You can connect with and edit your GitHub projects.

It is built on Monaco editor, the same beast that powers the favorite VSCode editor. This brings powerful features like “Go To,” “Find References,” and necessary refactoring to your fingertips! Npm support and file structure management are the other features.

You can deploy a production version of your app from CodeSandbox to some well-known providers like Netlify or GitHub Pages. Also, You can collaborate with other developers in real-time by inviting them to edit the code along with you.

4. JSFiddle

JSFiddle is another popular online code editor that helps in web development. You can create projects with simple JavaScript, HTML5, React, Angular, Vue and others.

While JSFiddle can’t replace a full-fledged text editor, it does a damn good job of handling one-off frontend scripts. Also, StackOverflow supports the embedding of JSFiddle links directly in their platform.

It's free to use with code collaboration features and multiple layout options.

5. GitPod

GitPod provides you with a collaborative environment by enabling you to connect to the git repositories and edit the code. You can connect to git repositories with:

• GitHub

• GitLab

• Bitbucket

You can also create a new workspace instance from other templates. After creating workspace, you will be able to edit and run the code using your preferred editor online. Pre-built dev environments, Integrated Docker build and Integrated code reviews are it's other popular features.

6. Replit

Replit is a free, collaborative, in-browser IDE to code in 50+ languages. The product supports a wide range of languages and frameworks including modern popular Haskell, Kotlin and well-known Javascript, C++, Ruby and many more.

It is the best tool for quickly starting, sharing, and developing projects in any programming language. Here, no "deployment" stage of your projects is available, rather it instantly hosts.

Even in the free version, you are able to create the file structure, control the version and install packages. In the settings, you can edit layout, theme, font size, and indent size. GitHub integration, API and Plugins are it's other available features. There is also another big feature called Classrooms, where you can create classrooms, invite students and track progress.

7. AWS Cloud 9

AWS Cloud 9 was probably the first browser-based IDE that offered serious features and took the idea of browser-as-an-editor mainstream. Amazon later acquired it, and today, Cloud9 is part of the AWS offerings.

Cloud9 supports JavaScript, Python, PHP, and several other programming languages. It supports code collaboration and pair programming, enabling you to share your code environment with a co-developer.

With AWS Cloud9, it is easy to write and debug a serverless application. It also provides the environment for testing and debugging Lambda functions locally. You can connect Cloud9 to an existing/new AWS compute instance, and you pay only for that instance. It’s also possible to connect to a third-party server over SSH for free.

Other editors you may search for:

• PlayCode

• Glitch

• GitHub CodeSpaces

• JS Bin

• Theia

• Coder

• W3Schools