A JavaScript console you can drop into any page

Add one script tag and your readers get an interactive console with step-by-step code blocks and output that looks just like the browser’s dev tools.

Try it now Get started See examples

<script src="https://cdn.jsdelivr.net/npm/yourjs-box@1/dist/yourjs-box.min.js"></script>

Press Run (or Ctrl/⌘+Enter) to step through the code. Hover over code that already ran to copy it back into the editor.

Or let the code control your page

By default code runs in a Web Worker, safely away from your page. Add data-runner="window" and it runs in the page itself, so it can use your page’s DOM and functions.

I’m part of this page

Run the code to change me.

Everything you need to teach or demo JavaScript

No build step, no framework and nothing to configure.

One script tag

Put your code inside the script tag and the console appears right where the tag is.

Step-by-step blocks

Comments ending in \\ split your code into blocks that run one at a time.

Dev tools-style output

Expandable objects, Maps, Sets, classes, console.table() and familiar errors.

Sandboxed by default

Code runs in a Web Worker away from your page (Reset even stops infinite loops), or in your page with data-runner="window".

TypeScript too

Add data-language="typescript" and write typed code. Errors still point to the right line and column.

Hidden setup code

Hide helper code that still runs, with a click to reveal it for the curious.

Light & dark themes

Follows the visitor’s system theme, or pick one with data-theme.

Style-proof

The console lives in an iframe so your CSS and its CSS never collide.

Get started

Add the script wherever you want the console to appear. The console fills its container, so give the container a height.

<div style="height: 400px">
  <script src="https://cdn.jsdelivr.net/npm/yourjs-box@1/dist/yourjs-box.min.js">
    // Say hello \\
    console.log('Hello world!');

    // Show a table \\
    console.table([{name: 'Ada', born: 1815}, {name: 'Grace', born: 1906}]);
  </script>
</div>

Attribute	Description
`data-block-type`	`"classic"` (default) runs each block like a regular script so variables carry over. `"module"` runs each block as a module so top-level `await` and `import` work.
`data-language`	`"javascript"` (default) or `"typescript"`. TypeScript has its types removed (not checked) by Babel before each block runs.
`data-show-results`	`"false"` hides the value of the last expression in each block.
`data-imports-url`	Where npm packages imported by name (eg. `import _ from 'lodash'`) load from. Uses esm.sh by default.
`data-libraries-url`	Where to load Vue, Ace, Prism, Acorn and Babel from (eg. `/node_modules/{name}/` to host them yourself). Loaded from unpkg by default.
`data-runner`	`"worker"` (default) runs code in a Web Worker. `"window"` runs it in the page.
`data-divider-orient`	`"vertical"` puts the editor beside the output and `"horizontal"` puts it below. By default it’s beside the output unless the console is narrower than 600px.
`data-hide-empty-output`	`"true"` (default) only shows the editor until there’s something in the output. `"false"` always shows the output.
`data-hide-prefix`	Blocks whose header starts with this prefix are hidden but still run (eg. `// SETUP: Helpers \\`).
`data-loading`	`"lazy"` (default) loads the console when it’s about to be scrolled into view. `"eager"` loads it right away.
`data-rulers`	The columns where lines are shown in the editor, eg. `"80, 120"`. Defaults to `"80"` and `""` shows none.
`data-theme`	`"light"` or `"dark"`. Follows the system’s theme by default.
`data-word-wrap`	`"true"` wraps long lines in the editor instead of scrolling sideways.

Or create consoles with JavaScript

Put the script in your page’s <head> and use YourJSBox.create(), which works great with React, Vue and other frameworks. Try it on the API example. Already have code blocks (eg. from Markdown)? YourJSBox.from() turns them into consoles, as in this example.

<script src="https://cdn.jsdelivr.net/npm/yourjs-box@1/dist/yourjs-box.min.js"></script>

const box = YourJSBox.create({
  target: '#lesson',       // an element or a CSS selector
  placement: 'fill',       // fill | append | prepend | replace | before | after
  code: "console.log('Hello!');",
  theme: 'dark',
});

box.destroy();  // removes the console

// Turns every JavaScript code block into a console
YourJSBox.from('pre > code.language-js');

See the README for all of the details or the kitchen sink for every feature in action.

Examples

See YourJS Box in different kinds of pages.