Traditionally, it was common for developers to create websites from scratch using everyday text editors. From the local machine to the server, terminal-based text editors like VIM and Emacs (as well as GUI-based text editors like SublimeText) are still the go-to options for many developers. However, the increasing popularity of cloud services leads to the rise of cloud IDEs. In this post, we cover the most popular and functional options of today, and try to find the best cloud IDE in 2024.
But first, how is an IDE different from a text editor? In addition to advanced text editor features like syntax highlighting, the most significant difference is that an IDE allows you to compile and run the code that you are writing. Further, some IDEs have advanced features like debugging. The best IDEs provide a one-stop solution for all your development needs — with extra perks like version control and continuous integration.
1. CodePen
CodePen is a cloud-based editor for HTML, CSS and JavaScript that lets you render snippets in real time and then share them with others. The primary objective of CodePen is to enable developers to create demos of their front-end work.
CodePen demo
You can use stylesheets and scripts hosted externally on your CodePen demo. Additionally, CodePen gives you access to a JavaScript console to debug your code if you are creating an element within the platform.
CodePen demos can be embedded in your website too. Embedded pens have previews of the code, which makes them ideal for technical writers while creating tutorials for front-end technologies.
CodePen allows you to fork the work of other developers and build upon it. Various views of your code are provided, but some are only available on the pro version, starting at $8/month billed annually.
While the strength of CodePen is creating and sharing pens, it introduced Projects in 2017, which allow you to create entire front-end projects on the site, making it a complete IDE.
You may also be interested in:
- How to Minify JavaScript: A Step-by-Step Guide for Beginner Devs
- How to Create a “Meet the Team” Page in WordPress
- Which Is the Best Free Website Builder UK? 5 Options Compared
2. JSFiddle
JSFiddle is an early IDE that originated as a code playground, influencing many other competitors today. It allows you to create front-end elements and render them live in the browser.
JSFiddle demo
You are able to fork the work of others and build on it, in addition to embedding your work in external sites. JSFiddle is a simplified version of CodePen for those who wish to work with a simpler code editor but still have compilation abilities.
3. Microsoft Azure Notebooks
Microsoft Azure Notebooks is a complete end-to-end solution provided by Microsoft to manage projects developed through Jupyter notebooks.
Azure Notebooks is currently available through a number of Microsoft products and services, including:
- Notebooks in Visual Studio Code
- GitHub and GitHub Codespaces
- Azure Machine Learning
- Azure Lab Services
First, you need to log in to your Microsoft account and choose a plan. A free tier plan is available. Your projects may be built on Python 2, Python 3, R or F#.
You can then initialize an empty project repository with a README markdown file.
Create a project in Azure
Once the repository has been created, you can proceed to creating notebooks and working on them.
Jupyter Notebook in Azure
Azure also lets you start a terminal at the location of the project. You can run Unix commands on the terminal, as well as provide an option to debug your Python code through the terminal.
Azure Terminal
Azure also allows you to share your project with collaborators. The tutorials created by Microsoft for Azure Notebooks are also in the form of projects on the platform. For example, here is a project on accessing data from these Notebooks.
4. Observable
While Jupyter is responsible for increasing the popularity of Python in the cloud, it has also inspired the creators of Observable to build a similar solution meant for JavaScript.
Observable notebooks are JavaScript cloud notebooks that can include a mix of scripts and Markdown. The primary objective of Observable is to share JavaScript-based graphs through the cloud.
You can check out the features of Observable without creating an account through the demo notebook.
Observable demo
Upon creating an account, you will be able to save any changes you make to a notebook and share the results with others.
Let’s now move to slightly more complete end-to-end solutions to find the other best cloud IDE platforms.
5. Repl.it
The idea behind Repl.it is to let you focus on coding by letting the platform take care of setting up the environment.
Once you complete the registration, you can create an environment with a click. There is a huge number of languages to choose from. In this demonstration, let us go ahead with Python.
When you select an environment, the window that opens is divided into three columns — the file system, the text editor and an interpreter on the terminal. You can resize them to focus on the part of the project you are concentrating on.
Repl.it environment
From the left menu, you can also select the packages that you would like to work with in your current project. There is even a multiplayer option on Repl.it that makes it useful for collaboration! When you activate it, you can create a URL with a potential collaborator to either contribute to or view the status of the project in real time.
Repl.it collaboration
6. Codenvy
Codenvy is another cloud-based IDE that lets you configure your development environment, write your code within the platform and then execute it. In this demonstration, let us create a PHP-based environment.
In Codenvy, a development environment in the cloud is called a workspace. After registration, you need to first create a workspace with a pre-defined stack. Stacks include popular programming languages like PHP, Python, Go and Rails with a 3GB of RAM in the free tier. Teams with up to three developers can also use the free plan.
Create a workspace on Codenvy
Once you create a workspace, the functionality is similar to Repl.it. Your work area is divided into the file management, text editor and terminal. Unlike Repl.it, you are able to use Unix commands in the terminal rather than just the Python interpreter to debug your code.
Sample PHP project in Codenvy
Codenvy also lets you import a project from GitHub or clone a repository from a remote location. Further, Codenvy also lets you share your project with collaborators in real time.
7. Google Cloud Shell
Google Cloud Shell is a terminal in the cloud that you can run through a browser. Cloud Shell comes pre-installed with a variety of popular libraries and services such as Docker, Python, Git and VIM. It provides 5GB of storage space in your home directory.
Google Cloud Shell is a complete solution for a developer without a local development environment. If you use a Chromebook, this option should take care of most of your development needs.
Google Cloud Shell terminal
Google Cloud Shell also provides you with a GUI-based text editor if you are not comfortable with terminal text editors like VIM and Emacs. To fire up the text editor with a file system viewer, use the edit icon in the top right of the terminal.
Google Cloud Shell GUI text editor
Though you can use Git to synchronize your files in the terminal, you also have an option to upload or download files through the file system that is shown on the left. Further, the public beta allows you to create a shell from a docker image.
Overall, Google Cloud Shell seems to be a viable option for use as a primary development environment. With frequent changes to the product, you should definitely give it a try.
8. Codeanywhere
Codeanywhere is the final option in our quest to find the best cloud IDE. It is a cross-platform cloud IDE that allows you to create an environment, import or create a project and then execute in the same environment.
There is no free tier for Codeanywhere, though a seven-day trial is available. The cheapest plans are $2.5 per month, billed annually.
Set up an environment in Codeanywhere
Once you log in, you need to create a development environment. You can use one of the existing stacks from the list of options. Let us use a stack centered towards Python development:
Text editor in Codeanywhere
When the build loads successfully, you can either import a Git project or create an empty repository of your own.
Terminal in Codeanywhere
With a rich-text editor, you are able to create, edit and save files. Next, you can run any code that you have created or saved through the terminal by running the appropriate command.
Codeanywhere provides support for syncing with Dropbox, OneDrive and Google Drive, in addition to GitHub and BitBucket through version control. Further, you can also connect to your environment through FTP clients in order to transfer files to and from other locations. Codeanywhere also has a partnership with DigitalOcean to integrate with DO droplets.
Final thoughts on the best cloud IDE
There may not be a single answer to the best cloud IDE in 2024, but there are a lot of options to choose from, depending on your requirements:
If you just need to execute and share snippets of code, you should try JSFiddle or CodePen.
If you would like to create notebooks with a combination of Markdown and code outputs, you can give Azure Notebooks or Observable a try.
If you want an alternative to a local development environment, you should try out Google Cloud Shell.
If you would like a complete end-to-end solution, you should try Codeanywhere, Codenvy or Repl.it.
Which of these is the best cloud IDE of 2024 in your opinion? Did we miss your favorite? Do let us know in the comments below.
…
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:
Layout and presentation by Karol K.
