Headless Embedding

Interactive, embedded code snippets for blogs, docs and more.

From the very beginning tech playground was about making technology more interactive and easy to play around with.

Headless embedding is in effect just that, a small JavaScript widget that you can embedd directly in your blog, docs or even community forum to make a set of code-blocks executable and interactive.

Examples

Some examples of headless embedding in action:

Minimal Playground

A standard playground specifying only the required option playground
<tech-playground playground="nginx">...</tech-playground>

events {
    worker_connections  4096;
}

http {
    server {
        listen          80;
        server_name     basic;
        access_log      /dev/stdout;

        location / {
            proxy_pass      http://httpbin.org;
        }
        location /deny {
            deny all;
        }
    }
}

curl http://127.0.0.1/headers
echo "---"
curl http://127.0.0.1/deny

Control Placement

You can place the controls either above or below code blocks, using controls="bottom|top"
It defaults to controls="bottom" if not specified.
<tech-playground playground="caddy" controls="top">...</tech-playground>

:80 {
    respond /deny* "Permission denied" 403
    reverse_proxy httpbin.org:80
}

curl http://127.0.0.1/headers
echo "---"
curl http://127.0.0.1/deny

Output Placement

The same is possible for output, using output="bottom|top"
It defaults to output="bottom" if not specified.
<tech-playground playground="caddy" output="top">...</tech-playground>

:80 {
    respond /deny* "Permission denied" 403
    reverse_proxy httpbin.org:80
}

curl http://127.0.0.1/headers
echo "---"
curl http://127.0.0.1/deny

Output Styles & Ordering

Output can be styled and ordered, style is specified using output-style="default|boxed|plain".
It defaults to output-style="default" if not specified.
Default means we choose the best option for the specific playground at runtime.

Ordering is specified using output-order as a comma-separated list of these options: server.stdout,server.stderr,command.stdout,command.stderr
It defaults to output-order="default" if not specified.
Default means we choose the best option for the specific playground at runtime.
If any of the options is not specified it will not be included in the output.

Combining these two options you can create a wide variety of output styles, focusing on what truly matters.

For example the Jinja playground looks like this by default:
<tech-playground playground="jinja">...</tech-playground>
Which is the same as specifying it like this:
<tech-playground playground="jinja" output-style="plain" output-order="server.stdout">...</tech-playground>

{%- if greet_user and username -%}
Hello {{ username }}!
{% endif -%}
Here is a list of your things:
{% for thing in things %}
- {{ thing }}
{%- endfor %}

username: Marco
greet_user: True
things:
  - one
  - two
  - three

Out in the Real World

Some examples of people using headless embedding out in the real world.
If you want to be added here reach out to me

• Blog post: sed: Delimiter Issues (Shell playground)
• Blog post: Caddy Manual Maintenance Mode (NGINX & Caddy playgrounds)

Quick Start

Simply get the latest release of tech-playground.min.js from the GitLab repo and wrap your code blocks with the tech-playground custom element to create an interactive playground.

Optionally you can also use tech-playground.min.css which gives the elements a basic styling, like you can see in the above examples.

Limitations

Anyone can use headless to embedd interactive playgrounds on a website, I do however reserve the right to deny embedding to a domain.

Requests from an unknown domain are rate-limited like anonymous users by the clients public IP, if you wish to increase limits for your embedding domain, please reach out to me.