Embedding fiddles on other websites

It's possible to embed fiddles in another page (e.g., in documentation or a blog post). They show up like this:

To do this, click the Embed option in the menu in the top right of the Fiddle web interface, and follow the instructions. You will import the Fiddle embed client at the end of your page:

<script async defer src="https://fiddle.fastly.dev/embed.js"></script>

Then, where you want the fiddle to appear, link to an existing fiddle with an /embedded extension, and it will be converted into an inline-embedded, interactive fiddle:

<p><a href='https://fiddle.fastly.dev/fiddle/d629eb91/embedded'>Go look at this fiddle</a></p>

If you prefer to capture the fiddle data immutably in the host page, you can use a <script> tag to define a JSON data model for the fiddle:

<script type='application/json+fiddle'>
"title": "Beacon termination at the edge",
"origins": ["https://httpbin.org"],
"type": "vcl",
"src": {
"recv": "if( req.url ~ \"beacon\" ) {\n error 950 \"Fastly Internal\";\n}",
"error": "if (obj.status == 950) {\n set obj.status = 204;\n set obj.response = \"No Content\";\n synthetic {\"\"};\n return(deliver);\n}"
"requests": [
"path": "/beacon?some=1&log=2&parameters=3&in=4&the=5&querystring=6",
"method": "GET"

Choosing the default tab

Unlike the main Fiddle UI, embedded fiddles show only one source file at a time. To select a specific file, add a data-default-src="..." data attribute to the <a> or <script> tag defined above.

<a href="https://fiddle.fastly.dev/fiddle/d629eb91/embedded" data-default-src="error">
Look at the error subroutine of this fiddle

VCL fiddles have one source file per VCL subroutine: recv, hash, miss, hit, pass, fetch, deliver, error, log, and one for declarations called init. If no default tab is specified, the first non-empty source will be the active tab when the embedded fiddle loads.

Compute fiddles have main for the program source code and deps for dependencies. If no default tab is specified, main will be the active tab when the fiddle loads.

Script-less embedding

The embed client handles automatically resizing the iframe to fit the fiddle, and provides placeholder content while the fiddle is loading, but if you prefer not to load the embed.js client, you can create an IFRAME yourself and set the href attribute to the fiddle URL with /embedded appended, like this:

<iframe href="https://fiddle.fastly.dev/fiddle/d629eb91/embedded"></iframe>

The full set of options which can be passed as query parameters is:

defaultSrcrecvThe source tab which should be selected and displayed when the fiddle loads.
embedID172636An arbitrary number which Fiddle will send back in any postMessage for identification.
tabssrcs,runA comma separated list of tabs to display on the tab bar. Valid options include all the source names individually (for VCL fiddles, recv, hash, hit, miss, pass, fetch, error, deliver and log, and for Compute fiddles, deps and main), the names of the functional tabs run, install and info, and the special alias srcs, which expands to all the source names that apply to the fiddle.
edit1When displayed in embedded mode, fiddles are read-only by default. However, if the fiddle is not locked or frozen, this parameter will make it editable.

When in embedded layout and not the topmost browsing context (i.e. Fiddle is being displayed in an IFRAME), a postMessage will be dispatched to the parent frame when triggered by the following events:

EventMessage propertiesDescription
resizeembedID, contentHeightThe content of the embed has changed in height.
executeembedIDThe fiddle is executing.
resultembedID, resultThe result data has changed (note that because Fiddle instrumentation is collected asynchronously, this may be triggered multiple times following an execute event, as the result data gradually builds)