We tried 10 online code editors

12 mei 2020 om 16:46 by ParTech Media - Post a comment

An online code editor resides on a remote server (or local cache) and is accessible via a browser. Some online code editors have basic features (more like text editors) while others are like a complete IDE (Interactive Development Environment).

There are several reasons to consider using online code editors -

  • To access to your code anywhere.
  • To share snippets and interactive sections of code.
  • To have a solution with nearly zero setup when you have limited time.
  • To collaborate with your team in real-time. Several online IDEs have collaboration tools built-in that work without setup.

Irrespective of the why you want to or need to use an online IDE, there are lots out there for you to choose from, each with different strengths and weaknesses respectively and that serve different functions for web developers.

In this blog, we will take a look at 10 useful online code editors.

JSFiddle

JSFiddle is an extremely fast and efficient and popular online code editor. It lets you to rapidly share the code and envisage the outcome for the look. JSFiddle is so widespread and simple that Stack Overflow integrated it. However, JSFiddle is only for front-end work, it does not support the notion of files and folders and there is no way to build CI/CD pipelines. JS Fiddle is free and offers a lot of boilerplates (jQuery, Vue, React + JSX, TypeScript, CoffeeScript, SCSS, CSS Grid, Bootstrap, and others) to get started rapidly.

Overall, this is one of the most logical choice for testing new frameworks, demonstrating code in articles and for demos of new products.

Try JSFiddle

StackBlitz

StackBlitz is very similar to full IDE, specifically as the tool is built on VS code. It is powered by Visual Studio. StackBlitz is a solid IDE for those who prefer online code editors, instead of a snippet sharing service or coding sandbox.

StackBlitz automatically takes care of installing dependencies, compiling, bundling and hot reloading as you type. Importing libraries is vital for web development and StackBlitz includes an in-browser (Node Package Manager) NPM client that supports installing multiple packages at a time and specific version. StackBlitz also has the ability to save, share, and connect to your GitHub account.

Try StackBlitz

AWS Cloud9

AWS Cloud9 is a cloud-based IDE that lets you write, run, and debug your code with just a browser. It includes a code editor, debugger, and terminal. Cloud9 comes pre-packaged with essential tools for prevalent programming languages, including JavaScript, Python, PHP, and more; so, you don’t need to install files or configure your development machine. As your Cloud9 IDE is cloud-based, you can work on your projects from your office, home, or anywhere using an internet-connected machine. Cloud9 provides a seamless experience for developing serverless applications enabling you to easily define resources, debug, and switch between local and remote execution of serverless applications.

The collaboration features in Cloud9 are also noteworthy, allowing reviews to be conducted seamlessly. Another awesome feature is a video-style playback of the changes made to a file, making the review process a delightful pleasure.

Try AWS Cloud9

CodePen

CodePen is an online code editor and online social development environment for web designers and developers. CodePen is free and creating an account is not mandatory; you can start writing code and create a new web application straight from your web browser quickly and efficiently. Developers can share their best practices and pins across the platform and get approval from the community. CodePen allows web designers and developers to write and share HTML 5/CSS 3/JS code online. The code snippets in CodePen are known as pens; create a code pen and share to others. You can build, test and deploy code on CodePen.

A remarkable feature of CodePen is learning and discovering new technologies and best practices. Working, playing and browsing with Pens are a great way to understand how they are built and how the code works. Some other prominent features are - File system, Autocomplete, Private sandboxes, Website deployment and Collaboration mode.

Try CodePen

CodeEnvy

CodeEnvy is a robust cloud editor that makes use of Docker containers to let you run pre-configured and isolated dev environments.

It is built on the open source Eclipse Che cloud IDE and offers lots of scalability and DevOps choices.

Try CodeEnvy

CodeSandbox

CodeSandbox is an amazing online code editor for web applications that lets developers quickly create applications using existing programming languages and technologies such as Angular.js, Vue.js and React. It is specifically focused around web application development to make the experience easy and smooth. You can simply open your browser and start coding.

CodeSandbox has a lot of templates. Furthermore, you can create your own templates for your specific use-case with file structure and dependencies, just like in IDE. CodeSandbox is integrated with GitHub. There is NPM support in the online code editor. And, every sandbox has a secure URL with HTTPS support for sharing and feedback.

Try CodeSandbox

Codeply

Codeply is an online responsive design playground and front-end code editor for web designers and developers to swiftly edit JavaScript and its frameworks. It is utilized to compare and test responsive frameworks. Codeply allows you to edit Angular, React, Vue, HTML bootstrap and JavaScript. Codeply is suitable for fast prototyping, creating mock-ups, learning and exploring new popular libraries, APIs, plug-ins and frameworks. The features include layout settings, a preview of the result, ready-made templates and elements of a social network.

Try Codeply

JSBin

JSBin is an online code editing tool that enables you to learn and experiment code for free. JSBin is primarily focused on JavaScript, with a fast and simple interface. Each of your code snippets can be tested through the web browser, and then exported into a text file. The code snippets in JSBin are known as bins.

JSBin can import popular HTML/CSS/JS frameworks such as jQuery and Bootstrap to generate modern pages and web applications. JSBin is primarily a site to share code. It is good to have an account and stay logged-in as JSBin automatically saves your progress on any code that you work on. And, even if you are simply experimenting you will not lose your work.

Try JSBin

Gitpod

Gitpod is a cloud IDE and is one of the best online code editors and lets you to launch ready-to-code dev environments for your GitHub or GitLab project with a single click. Gitpod aims to keep your code continuously tested and up to date. Gitpod offers full integration with GitHub. And, Gitpod has a VS code interface and supports all major back-end/front-end languages and frameworks (Django, Rails, Revel and more).

Try Gitpod

PlayCode

Play Code is an online text editor for front-end web development. It lets you use libraries for HTML, CSS and JavaScript (jQuery, React, Vue, etc) while you can see the result in real time. There is an option to select editor-style, font size, and other text editing features. With PlayCode, you can open multiple files that run together in a single project, just like you would with multiple files in a typical directory structure using VS Code.

PlayCode has pre-made templates along with real-time results and built-in console debugging right in the browser. PlayCode is a simple tool for quick prototyping and viewing the result of coding. PlayCode has a characteristic three-window layout - console, code editor and the result view. PlayCode has a basic file structure but doesn’t have a version control and other IDE features.

Try PlayCode

Conclusion

These are some of the most feasible online code editors and IDEs and most online code editors won’t replace your local dev environment. Generally, they provide a solid and simple means to edit code, make backups, share snippets and experiment with new features in a secure and protected location in real-time. If you haven’t once played around with online editors, there’s no better time to start now.

If you contemplate something more justifies to be included in this blog, please do let us know!