ES6 Presentation with Babel.js

There are alot of ES6 presentations out there. I recently also did a ES6 presentation on my work to an audience of developers with mixed background (embedded, backend and front-end developers).

The presenation (in swedish) can be found here:
Note: The presentation will only work in Google Chrome version 47+

The focus in the presentation was on the ES6 code, which were (sometimes) edited and executed by pressing Shift + Enter in a <code> element. To be able to support as much ES6 features as possible all ES6 code was first compiled down to ES5 with the help of Babel.js.

Here is the code that handled the Babel.js transpile and execution:

class ReadyHandler {  
  constructor(nodes) {
    nodes.forEach(el => el.addEventListener('keydown', e => this.consumeKeyDownEvents(el, e)));

  consumeKeyDownEvents(el, e) {
    if (e.shiftKey && e.keyCode === 13) {

class Transpiler {  
  static execute(es6String) {
    // Use Babel to transpile ES6 to ES5
    const transpiled = babel.transform(es6String, {
      stage: 0

    // Run the ES5-code
    new Function(transpiled)();

document.addEventListener('DOMContentLoaded', () => {  
  new ReadyHandler([...document.querySelectorAll('code[contenteditable]')]);

The code above is used in the presentation, and it will currently only work in Google Chrome version 47+.