I have created an ES6 Playground in which you can play with the latest Javascript versions.

INTRODUCTION

In my Angular and React training courses I spend hours to teach how ES6 and Babel work and I often use the official BabelJS playground to explain all the fundamentals.

After the release of Angular (version 2), I left React for a while, so in order to do some practice again, I decided to replicate the BabelJS editor by using React and, of course, Redux.

Although the BabelJS playground works really well I needed a container to quickly load snippets, transpile and share them with the attendees. I know I could use CodePen, JSBin and so on, but as I said this is mainly an “exercise in style” and anyway I have now a tool I can customize as I need.

It only took a couple of days to be developed, so it’s just a proof of concept, but it should work well and I’ll improve it in the next weeks/months.

I hope it will be useful to the whole JS community.
Enjoy it and please share your ES6 Gist to complete the collection 🙂

OPEN ES6 PLAYGROUND

FEATURES

Write ES6 -> Output ES5 Code
Resizable panels
Output Panel
Error output panel
Babel settings panel: support for ES2015-2017 versions, stage 0-3 and React/JSX
Includes a collection of ES6 snippets you can quickly load into the playground and browse as a gallery by using arrows
It also includes mock data to quickly start a new example with some content
Snippets are Gist. Click the title of the snippet to open it