by Aratrika Dutta
April 27, 2022
Over the past two years, several coded playgrounds have appeared, here are the best ones for you
It provides an environment for building apps and helps in testing HTML and CSS snippets. It allows you to edit the code and also debug the code. Once you’ve finalized the code, you can send it to a peer for review.
Dabblet is an interactive playground for quickly testing CSS and HTML code snippets. It uses -a format with no prefix so you don’t have to add prefixes in your CSS code. You can save your work to Github Highlights, embed it in other websites, and share it with others. It currently only supports modern versions of Chrome, Safari, and Firefox. All code displayed belongs to the poster and no license is applied. Dabblet itself is open source software and is distributed under an NPOSL-3.0 license.
CodePen is a playground for the front end of the web. It’s a question of 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 reduced test case to demonstrate and understand a bug.
CSSDesk is an online CSS sandbox. It allows users to quickly test CSS snippets and watch the result appear live. There are line numbers and syntax highlighting appear in the text box as you type. One of the greatest things is that it allows users to share their code with others.
Google’s Code Playground
Google’s Code Playground is a web tool that allows web developers to try out all the APIs provided by Google, modify 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 box
The D3.js playground is designed to allow you to play with the D3.js library interactively. Every change 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 also edit CSS live.
HTML5 Playground includes a library of code snippets that you can explore to see HTML5 in action. They include some basic starter examples, such as using the HTML5 Doctype and the audio tag (which is nonetheless a good demonstration of playback features in a compatible browser). There’s an interactive form, including HTML5 elements like range and date entries and automated email and website validation.
More trending stories
Share this article
Do the sharing