executor-editor :: demo

Auto-evaluate & autofocus (blue skin)

class Cake {
    toString() {
        return '[Cake]';
    }
}

console.log(String(new Cake()));

Vertical layout, evaluate on demand

class Animal {
    toString() {
        return '[Animal]';
    }
}

console.log(String(new Animal()));

Maximize mode (show the code only)

class Plant {
    toString() {
        return '[Plant]';
    }
}

console.log(String(new Plant()));

Normal skin, auto-evaluate

const sum = (a, b) => a + b;

console.log('2 + 3 =', sum(2, 3));

Logging different value types

console.log('string', 42, true, null);
console.log({ name: 'executor', stars: 3 });
console.log([1, 2, 3].map((n) => n * n));

Runtime errors are shown in red

function boom() {
    throw new Error('Something went wrong');
}

boom();

Asynchronous output (setTimeout)

console.log('before timeout');

setTimeout(() => {
    console.log('after 500ms');
}, 500);

How to embed editor like that above?

<pre
        class="executor-editor"
        data-autofocus="true"
        data-autoevaluate="true"
        data-skin="blue"
>
class Cake {
    toString() {
        return '[Cake]';
    }
}

console.log(String(new Cake()));
</pre>

<link href="https://piecioshka.github.io/executor-editor/dist/executor-editor.css"/>
<link href="https://piecioshka.github.io/executor-editor/dist/skins/blue-skin.css"/>
<link href="https://piecioshka.github.io/executor-editor/dist/skins/normal-skin.css"/>

<script src="https://piecioshka.github.io/executor-editor/dist/executor-editor.js"></script>
<script>ExecutorEditor.setup();</script>