What is Anyfiddle Snippets?

Convert your code snippets into runnable code.

Anyfiddle Snippets converts your existing code snippets in your documentations into runnable code snippets. Anyfiddle Snippets makes your docs interactive and easy to use with very minimal changes.

How to get started

Start adding the Anyfiddle script tag to your existing docs (This is similar to script tags provided by many analytics services).

Now add some data- attributes to the container of the code snippet.

<div
data-anyfiddle-snippet-container
data-anyfiddle-snippet-runtime="node:alpine"
data-anyfiddle-snippet-command="node index.js"
>
<code data-anyfiddle-snippet-file="index.js">
console.log('Hello world');
</code>
</div>

Attributes

Description

data-anyfiddle-snippet-container

Defines the container element. All extra elements like Run button and output containers will be added to this.

data-anyfiddle-snippet-runtime

The docker container image to be used to run the code snippet.

data-anyfiddle-snippet-command

The command to execute in the runtime on clicking the Run button.

data-anyfiddle-snippet-file

The contents of this block will be added as a file to the runtime. Multiple blocks can be defined to add multiple files. The attribute's value will be the name of the file created. These files are created before the command (data-anyfiddle-snippets-runtime) is run.

All elements with the above attributes will be converted into runnable snippets and a Run is added to the bottom right corner.

Javascript SDK

Javascript SDK (added via script tag) can be used to customize the styling of the Run button and the output display. Dynamic variables can be added to the code snippets like API keys etc. using the SDK.