This is a good question. There are plenty of playgrounds around, so why another one? Well, in theory, a playground is not that complicated to build (big <em> on theory here) and we wanted it integrated with MDN. So we thought why not write one, famous last words.
Jokes aside, the idea of having a playground on MDN had been floating around forever. Having interactive examples in our articles was a great start, but some things need more space and more freedom. Sharing your ideas and solutions is key and this should not be a third party experience. But one thing that felt like a small game changer was the integration with our existing live samples.
You can now break out any existing live sample on MDN into the Playground (look for that little Play button above the live samples). This empowers you to make some changes to the code you just read, which helps to better understand what’s going on or to send a customized version to your friends. Don’t get lost there yet, but check out this random animation example that you can now remix.
<h1>Hello MDN Playground</h1>
I hope this somehow covers the why. This will allow us to unify how we display and interact with code, interactive examples being next on the list.