We’re seeing a rise in front-end code playgrounds over the years, with most of them offering a channel on which to experiment with client-side code and share with anyone. Typical features are:
- A preview option – many update quickly without a refresh
- HAML and other HTML pre-processors
- Short URL – easy sharing
- Code forking
- Free! (or you can choose to pay for premium services)
- Showing the world your coding abilities!
But the best feature of all is that they let you test and keep experimental front-end code snippets without the nonsense of generating files, initiating your IDE, or putting together a local server. Here we give you 6 of the best:
This playground wins first place for the most aesthetically pleasing and feature-packed, hands down. The service emphasizes popular demonstrations (a.k.a. Pens) and Projects, which happens to be an online Integrated Development Environment you can utilize to build and execute web projects. It also features advanced functionality like sharing and embedding of Pens, adding external CSS and JS libraries, and more. If you’re in the mood, by upgrading to PRO, starting at $9 a month, you get cross-browser testing, pair-programming and even teaching options.
Similarly to CodePen, with Plunker you can generate working demos, also collaborating with other devs if you choose, and share your creations. You can also add files, such as community-created templates, to begin your project. Plunker’s source code is free and can be found on its GitHub repository.