Online code playgrounds are a great way to try out code snippets without setting up a project locally and firing up your IDE. You can quickly validate your idea and share it with others. The majority offer a quick and dirty solution for this. However, most of them fall short when dealing with bigger applications.
Online code playgrounds offer a variety of basic, we can say must have, functionalities:
- syntax highlighting
- preview window
- file pre-processing (like Typescript, SASS)
- sharing via a short URL
- embedding demonstrations in other pages
- zero cost for basic features
The above playgrounds are completely fine, but I wanted to share complete projects generated by framework CLIs (like Angular CLI, Vue CLI, and CreateReactApp). Although some playgrounds let you use frontend frameworks, those are usually accessed globally. The way you wouldn't write your next production application.
The features I wanted:
- use the same stack as on a production project
- import from Github
- use any NPM package
The project that surprised and me and has the above features is Codesandbox.
Codesandbox lets you import your Github projects or start a new React, Angular, Vue application generated by their CLIs. It just works and boots fast. I managed to migrate my TodoApp implemented in React Hooks within seconds.
It has some nice additional features also:
- deployment to Netlify or Zeit
- VSCode integration (like shortcuts)
- live collaboration
- devtool functionality
- Github committing
- container sandboxes for backend applications (Node.js)
- it's open-source, you can contribute
I was amazed by the simplicity, speed, and feature set of Codesandbox. It feels like THE online playground that we needed. I've tried other playgrounds, but after this, I'm not looking back.
Hope you will feel the same and try out this awesome website.