Sandboxes

Showcase small demos or full HTML pages into a responsive dual pane

2025-05-23

ITADS

Table of content
  1. Inline sandbox
  2. File sandbox

Sandboxes are simple HTML resources separated from LibDoc’s pages scope and embedded into a LibDoc page, just like a Youtube embed or any other. LibDoc sandboxes come with a custom user interface with both code and result. By default, code and result get 50% of the width each but it can be resized. There are two ways to include a sandbox:

Feature Inline sandbox File sandbox
Resizeable yes yes
Custom title yes yes
Copy code yes yes
Copy URL no yes
At least one external HTML file required no yes
Open in a new tab no yes
Reload no yes

Inline sandbox

The easiest way to display a demo, inline sandboxes use srcdoc attribute, ideal for small amount of code.

If no doctype is defined, entered code is display by default into the body tag.

Simply enter your HTML between Eleventy paired shortcodes {% sandbox %}Your code{% endsandbox %}.

Please note some limitations about inline sandboxes:

{% sandbox %}
<style>
    body {
        font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
        font-weight: 800;
        margin: 0;
        padding: 2em;
        background: dodgerblue;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        text-align: center;
        box-sizing: border-box;
    }
</style>
<h1>I am an inline sandbox!</h1>
{% endsandbox %}

Optionally add a custom title for your inline sandbox just adding an argument to the paired shortcode.

{% sandbox 'Custom title' %}
<style>
    body {
        font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
        font-weight: 800;
        margin: 0;
        padding: 2em;
        background: dodgerblue;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        text-align: center;
        box-sizing: border-box;
    }
</style>
<h1>I have a custom title!</h1>
{% endsandbox %}

An inline sandbox with doctype:

{% sandbox 'An inline sanbox with doctype' %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>doctype inline sandbox</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
            font-weight: 800;
            margin: 0;
            padding: 2em;
            background: dodgerblue;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            text-align: center;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h1>Inline sandbox with doctype</h1>
</body>
</html>
{% endsandbox %}

View examples of inline sandboxes

File sandbox

Suitable for large demos and content, file sandboxes includes physical HTML file anywhere from /sandboxes/ directory. Any resources like CSS and JS can be added.

This simple example contains only one HTML file into sandboxes/1/.

{% include 'sandbox' path: '/sandboxes/1/index.html' %}

View examples of file based sandboxes