by Aratrika Dutta
22 October 2021
CodePen is a front-end playground for the Web. It’s all about inspiration, education and sharing. The service highlights popular demos (“Pens”) and offers advanced features such as sharing and embedding. CodePen is ideal for creating a small test case to demonstrate and resolve a bug.
CSSDesk is an online CSS sandbox. It allows users to quickly test snippets of CSS and watch the result appear live. There are line numbers and syntax highlighting appears in the text box as you type. One of the best things is that it also allows users to share their code with others.
3. Google’s code playground
Google’s Code Playground is a web-based tool that allows web developers to try all APIs provided by Google, edit the code, and see the results. Google’s Code Playground lets you play without opening an external editor, and all APIs are loaded for you in the Choose an API area.
4. JS Recycle Bin
It provides an environment for building applications and helps to test HTML and CSS snippets. It allows you to modify the code and you can also debug the code if you find an error. Once you’ve finalized the code, you can send it to a peer for review.
5. JSF medium
Dabblet is an interactive playground for quickly testing CSS and HTML snippets. It uses -prefix-free so you don’t have to add prefixes in your CSS code. You can save your work in Github Gists, embed it in other websites, and share it with others. It currently only supports modern versions of Chrome, Safari, and Firefox. All displayed code belongs to the poster and no license is applied. Dabblet itself is open source software and is distributed under an NPOSL-3.0 license.
8. Live wave
9. Playground D3
The D3.js Playground is designed to let you play with the D3.js library interactively. Each modification made (which results in an invalid code) affects the playing field in real time. Because CSS is such an important part of visualizations, you can edit CSS live as well.
10. HTML5 Playground
The HTML5 Playground includes a library of snippets that you can explore to see HTML5 in action. They include a few basic getting started examples, such as using the HTML5 Doctype and the audio tag (which is a good demonstration of playback functionality in a compatible browser nonetheless). There is an interactive form, including HTML5 elements like range and date entries and automated validation of email addresses and websites.
Share this article