0.6.1

New default status messages:

• status-running: "Running..."
• status-failed: "✘ Failed"
• status-done: "✓ Done"

0.6.0

Custom status messages

⚠️ This is an experimental feature that may be removed in future releases.

Now you can customize the default status messages:

• status-running (default "It may take a while...")
• status-failed (default "✘ Failed")
• status-done (default "✓ Took $DURATION ms")

<codapi-snippet sandbox="python"
    status-running="Running..." status-failed="✘ Error" status-done="✓ Done">

0.5.0

Sample output

⚠️ This is an experimental feature that may be removed in future releases.

Now you can show the sample code output before the user ever runs the code. To do this, add the output attribute to the codapi-snippet and add the pre block with a sample output after the snippet.

<pre>msg = "hello\nworld"
print(msg)</pre>

<codapi-snippet sandbox="python" editor="basic" output>
</codapi-snippet>

<pre>hello
world</pre>

0.4.2

Minor changes:

• Added "hide output" button and keyboard shortcut (Esc).
• Set default fetch timeout to 10 seconds.

0.4.1

Minor refactorings.

0.4.0

Major changes: custom actions and external styles.

Custom actions

You can add buttons to the toolbar:

<codapi-snippet sandbox="python" actions="Test:test Benchmark:bench">
</codapi-snippet>

Here we add two buttons:

• "Test" executes the test command in the python sandbox.
• "Benchmark" executes the bench command in the python sandbox.

┌───────────────────────────────┐
│ msg = "Hello, World!"         │
│ print(msg)                    │
│                               │
│                               │
└───────────────────────────────┘
┌─────┐
│ Run │  Test  Benchmark
└─────┘

To make a button trigger an event instead of executing a command, add @ before the action name:

<codapi-snippet sandbox="python" actions="Share:@share"> </codapi-snippet>

Here we add a "Share" button, which, when clicked, triggers the share event on the codapi-snippet element. We can then listen to this event and do something with the code:

const snip = document.querySelector("codapi-snippet");
snip.addEventListener("share", (e) => {
    const code = e.target.code;
    // do something with the code
});

If you want the button title to contain spaces, replace them with underscores:

<codapi-snippet sandbox="python" actions="Run_Tests:test Share_Code:@share">
</codapi-snippet>

External styles

The widget is unstyled by default (no more inline styles!). Use snippet.css for some basic styling or add your own instead.

Here is the widget structure:

<codapi-snippet sandbox="python" editor="basic">
    <codapi-toolbar>
        <button>Run</button>
        <a href="#edit">Edit</a>
        <codapi-status> ✓ Took 1248 ms </codapi-status>
    </codapi-toolbar>
    <codapi-output>
        <pre><code>Hello, World!</code></pre>
    </codapi-output>
</codapi-snippet>

codapi-snippet is the top-level element. It contains the the toolbar (codapi-toolbar) and the code execution output (codapi-output). The toolbar contains a Run button, one or more action buttons (a) and a status bar (codapi-status).

0.3.1

Remove syntax highlighting on first edit (otherwise it interferes with editing).

0.3.0

For larger programs, you can pass multiple files along with the main one.

0.2.1

Two new browser-only sandboxes (no Codapi server required):

• JavaScript sandbox, powered by AsyncFunction.
• Fetch sandbox, powered by Fetch API.

0.1.6

Initial version:

• Basic playground logic (execute code using the Codapi server).
• Attach to a previous element or to a specific element.
• External editor support.
• Templates.