Embedding fiddles on other websites

It's possible to embed fiddles in another page (e.g., in documentation or a blog post), 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. These will tell you to 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"
    }
  ]
}
</script>

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.

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

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@Edge 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.