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 🙂
Leave A Comment