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 🙂

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

SCREENSHOTs and VIDEOs

RESIZABLE PANELS

RESIZABLE PANELS

ERROR HANDLING

TODOs

• Community -> Receive snippets / Gist from users
• Render React components in Output panel
• Include 3rd party libraries such as RxJS, Redux, MobX, Axios, …
• Other idea or feedback? Please leave a comment 🙂

---

Would you like to share an interesting ES6 Gist? Send a comment with the URL and a small description 🙂