Anyfiddle Runtime SDK (Beta)

Add runnable code in your website or application

Anyfiddle Runtime SDK lets you add or convert runnable code snippets in your app or website. Anyfiddle Runtime SDK makes your docs interactive and easy to use with very minimal changes.

Terminology

  • Runtime : Runtime is the environment in which the code will be run. The runtime is a container. There are prebuilt public runtimes available. New runtimes can be created on demand. Please reach out to us at [email protected] to get new runtimes created. (Once the SDK is out of Beta there will be a developer portal where you can create runtimes)

  • Run : Run is an entity created for every code run. Each run has properties like id, files, command, output, state etc.

  • Developer Portal : (In development) Portal for developer integrating the SDK into their apps and websites. It will allow developers to self sign up and add runtimes.

  • SDK key : This key is used to initialise the SDK . The SDK key will be issued from developer portal or via email.

Runtimes and Runs can be accessed via Developer Portal and API once the SDK is out of Beta

Get started

Get Access to Anyfiddle Runtime SDK

To get access to Anyfiddle Runtime SDK send a mail to [email protected] Once approved you will get a SDK key. You can use these to initialise the SDK.

Add SDK script tag

Start adding the following Anyfiddle Runtime SDK script tag to your existing docs.

<script src="https://cdn.jsdelivr.net/npm/@anyfiddle/[email protected]/dist/anyfiddle.js"></script>

Add Runnable Code snippets

There are 2 way to add runnable code snippets

  • Using HTML data attributes

  • Using JS to describe code snippet

  • Using custom UI and run function

Use HTML data attributes to define runnable code snippets

Add data- attributes to the container of the code snippet. In the same page call the init function with key to make this block runnable.

<div
data-anyfiddle-runtime-id="<RUNTIME_ID>"
data-anyfiddle-runtime-command="node index.js"
>
<code data-anyfiddle-runtime-file="index.js">
console.log('Hello world');
</code>
</div>
<script src="https://cdn.jsdelivr.net/npm/@anyfiddle/[email protected]/dist/anyfiddle.js"></script>
<script>
anyfiddle.runtime
.init({
key: '<SDK_KEY>',
})
</script>

Attributes

Description

data-anyfiddle-runtime-id

Runtime id to add the files in and run the command. The HTML element with this attribute will become the container of the code snippet

data-anyfiddle-runtime-command

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

data-anyfiddle-runtime-file

The contents of this block will be added as a file to the runtime. The attribute's value will be the name of the file created. Multiple blocks defining multiple files are not supported yet.

Using Javascript function to pass code

The Anyfiddle Runtime SDK provides an attach function to add runnable code snippets.

<div id="code"></div>
<script src="https://cdn.jsdelivr.net/npm/@anyfiddle/[email protected]/dist/anyfiddle.js"></script>
<script>
anyfiddle.runtime
.init({
key: '<SDK_KEY>',
})
.then(() => {
anyfiddle.runtime.attach(
{
files: [
{ name: 'index.js', content: 'console.log("Hello,World");' },
],
command: 'node index.js',
runtimeId: 'RUNTIME_ID',
},
document.getElementById('code')
);
});
</script>

anyfiddle.runtime.attach takes two arguments

  • runOptions - Run options object with

    • files : Array of files to add to runtime before running command. Currently support only one file.

    • command : Command to run on clicking Run button after adding the files.

    • runtimeId : Id of the Runtime to run the code in.

  • el : HTMLElement - HTML element to add the runnable code snippet widget.

Using custom UI and run function

Using the run function in Runtime SDK, you can pass the code and run options as an object. This lets you create custom UI and and trigger the run when required (like a button click)

<textarea id="code" name="code" rows="10" cols="50">
console.log("Hello, World!");
</textarea>
<button id="run-button">Run</button>
<pre id="output"></pre>
<script src="https://cdn.jsdelivr.net/npm/@anyfiddle/[email protected]/dist/anyfiddle.js"></script>
<script>
anyfiddle.runtime
.init({
key: '<SDK_KEY>',
});
const codeTextArea = document.getElementById('code');
const runButton = document.getElementById('run-button');
const outputEl = document.getElementById('output');
runButton.addEventListener('click', () => {
const runOptions = {
files: [
{ name: 'index.js', content: codeTextArea.value },
],
command: 'node index.js',
runtimeId: 'RUNTIME_ID',
};
anyfiddle.runtime.run(runOptions, ({output, state}) => {
outputEl.innerHTML = output;
});
})
</script>

anyfiddle.runtime.run : takes two arguments

    • files : Array of files to add to runtime before running command. Currently support only one file.

    • command : Command to run on clicking Run button after adding the files.

    • runtimeId : Id of the Runtime to run the code in.

  • callback : callback get called when the run changes like when output is generated or when the run is completed

Styling the widget UI (Beta, may change later)

You can style the widget with css. You can override the css using any of the element classnames.

How it looks (Without custom styling)

Screenshot of Anyfiddle Runtime Widget

To see it in action visit https://runtime.anyfiddle.com