# CodePen for NGINX OSS Core

**URL:** <https://community.nginx.org/t/codepen-for-nginx-oss-core/284>\
**Category:** Community Showcase\
**Tags:** tutorial\
**Created:** [February 10, 2025, 8:30pm UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284 "2025-02-10T20:30:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![davemc](https://drob5swvtjqxg.cloudfront.net/user_avatar/community.nginx.org/davemc/32/24_2.png) [@davemc](https://community.nginx.org/u/davemc)\
**Post date:** [February 10, 2025, 8:30pm UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284/1 "2025-02-10T20:30:21Z")

</div>

A recent post on [Reddit r/nginx](https://www.reddit.com/r/nginx/comments/1ilkd3i/i_built_a_codepen_for_nginx/) pointed out the availability of “Codepen for NGINX.”

This looks seriously cool. So I am posting the information with permission from the OP.

> I’ve been working on a sort of[CodePen for nginx](https://tech-playground.com/playgrounds/nginx/).
> 
> It starts NGINX with a configuration supplied by you and then lets you run commands against it. There’s also some backends and static files available to allow testing more varied scenarios.
> 
> It also support creating snippets, which allows sharing of specific configurations in a cool “try, change & play with it” kind of way.
> 
> Would love to know what you think about a tool like this!

I’d like to know what you think and will pass pertinent comments over to “ProfessorLogout” as well.

davemc  
Check it out

---

<div class="post-metadata">

**Author:** ![heo](https://drob5swvtjqxg.cloudfront.net/user_avatar/community.nginx.org/heo/32/5_2.png) [@heo](https://community.nginx.org/u/heo)\
**Post date:** [February 10, 2025, 8:33pm UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284/2 "2025-02-10T20:33:49Z")

</div>

Whoa, this is rad. I’d love to know peoples’ thoughts too. Shout out to our friendlies at r/nginx!

---

<div class="post-metadata">

**Author:** ![ProfessorLogout](https://drob5swvtjqxg.cloudfront.net/user_avatar/community.nginx.org/professorlogout/32/246_2.png) [@ProfessorLogout](https://community.nginx.org/u/ProfessorLogout)\
**Post date:** [February 10, 2025, 8:51pm UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284/3 "2025-02-10T20:51:23Z")

</div>

Found my way over from Reddit, thanks a lot for the share and kind words @davemc!

Gonna keep my eyes on this thread as well in case any comments pop up.

---

<div class="post-metadata">

**Author:** ![heo](https://drob5swvtjqxg.cloudfront.net/user_avatar/community.nginx.org/heo/32/5_2.png) [@heo](https://community.nginx.org/u/heo)\
**Post date:** [February 10, 2025, 10:17pm UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284/4 "2025-02-10T22:17:46Z")

</div>

> [@ProfessorLogout](#):
>
> Gonna keep my eyes on this thread as well in case any comments pop up.

Is there anything you’ve particularly enjoyed doing so far with the “change & play with it” approach? It’ll be interesting to see how people use it. I’m all for play 🛝

---

<div class="post-metadata">

**Author:** ![ProfessorLogout](https://drob5swvtjqxg.cloudfront.net/user_avatar/community.nginx.org/professorlogout/32/246_2.png) [@ProfessorLogout](https://community.nginx.org/u/ProfessorLogout)\
**Post date:** [February 11, 2025, 7:11am UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284/5 "2025-02-11T07:11:27Z")

</div>

Happy to elaborate a bit on how I’m using it:

**For teaching:**  
I’ve originally built this to facilitate me teaching trainees at work, which is still what I use it for a lot.  
In that regard it’s becoming kind of my snippet library, which was just a folder of markdown files before.

Since I’ve also added more web servers, not only NGINX core, I also use it to explain the same concept, for example something like “how to pass headers to upstreams”, using different styles/paradigms of configuration.

**For learning:**  
I also enjoy learning new things as well, so I have been using this to adapt things I know how to do with one web server to different web servers.

**Isolated testing:**  
I find it quite useful for extracting out a specific part of a larger configuration and just tweaking it, having a very fast feedback cycle for changes.

**Feedback from others:**  
From the feedback I’ve gotten from others they do similar things with the tool as of yet.  
One thing I’m hoping to support in the near future that was highly requested is embedding of snippets for things like docs or blogs

Edit: Don’t know if the snippet feature might be a little bit too hidden on the UI currently, looks something like this once you create one: [https://tech-playground.com/snippet/vehement-crafty-slug/](https://tech-playground.com/snippet/vehement-crafty-slug/)

---

<div class="post-metadata">

**Author:** ![MikeJang](https://drob5swvtjqxg.cloudfront.net/user_avatar/community.nginx.org/mikejang/32/233_2.png) [@MikeJang](https://community.nginx.org/u/MikeJang)\
**Post date:** [February 18, 2025, 4:34pm UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284/6 "2025-02-18T16:34:32Z")

</div>

Pretty cool, @ProfessorLogout !

What’s the backing for this? Are you running an instance of NGINX in the cloud with some configuration? Or does this all run from [httpbin.org](http://httpbin.org)?

---

<div class="post-metadata">

**Author:** ![ProfessorLogout](https://drob5swvtjqxg.cloudfront.net/user_avatar/community.nginx.org/professorlogout/32/246_2.png) [@ProfessorLogout](https://community.nginx.org/u/ProfessorLogout)\
**Post date:** [February 18, 2025, 5:09pm UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284/7 "2025-02-18T17:09:18Z")

</div>

Thanks @MikeJang !

It‘s basically a custom „function as a service“ system that starts a container in an isolated network for each request, mounts through the nginx config and commands and then runs both

Since I want it all isolated from the internet I host my own instance of httpbin in that isolated network and fudge a bit with name resolution to make it feel „like normal“

There’s also some other backends available: [https://tech-playground.com/docs/server-playgrounds/#backends-and-isolation](https://tech-playground.com/docs/server-playgrounds/#backends-and-isolation)  
And I‘d be happy to add some more, if you have any suggestions.

---

<div class="post-metadata">

**Author:** ![ProfessorLogout](https://drob5swvtjqxg.cloudfront.net/user_avatar/community.nginx.org/professorlogout/32/246_2.png) [@ProfessorLogout](https://community.nginx.org/u/ProfessorLogout)\
**Post date:** [June 4, 2025, 7:54pm UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284/8 "2025-06-04T19:54:48Z")

</div>

Once again thanks for all the awesome feedback from everyone!

To make tech-playground even more useful I’ve now create a JavaScript widget that allows anyone to embed interactive playgrounds into blog posts, docs and more.

Just load a bit of JS, wrap your existing code blocks into [1] and you’re off to the races!

On top there is a bunch of customizations for the controls and output, to make things work just like you want.

[Find out more in the docs.](https://tech-playground.com/docs/embedding/)

[1]  
A full example of how I do it in my own Hugo-based blog:

````markdown
<tech-playground
    playground="nginx"
    show-file-names="false"
    show-version-selector="true"
    output-style="boxed"
    output-order="command.stdout,command.stderr"
>

```nginx {title="nginx.conf"}
worker_processes 1;
worker_rlimit_nofile 8192;

events {
  worker_connections 4096;
}

http {
  include /etc/nginx/mime.types;
  index index.html index.htm index.php;

  server {
    location / {
      set $maintenance 0;
      if (-f /app/maintenance.on) {
        set $maintenance 1;
      }
      if ($maintenance = 1) {
        return 503 "We are performing a maintenance, come back later";
      }

      proxy_pass http://httpbin.org;
    }
  }
}
```

```bash {title="test.sh"}
echo "Normal Operations"
curl http://127.0.0.1/headers

mkdir /app/ && touch /app/maintenance.on

echo "Maintenance Mode"
curl http://127.0.0.1/headers
```

</tech-playground>

````

---

<div class="post-metadata">

**Author:** ![jodie.p\_nginx](https://drob5swvtjqxg.cloudfront.net/user_avatar/community.nginx.org/jodie.p_nginx/32/203_2.png) [@jodie.p\_nginx](https://community.nginx.org/u/jodie.p_nginx)\
**Post date:** [June 4, 2025, 10:01pm UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284/9 "2025-06-04T22:01:56Z")

</div>

Thanks for sharing this, @ProfessorLogout! The NGINX docs site also runs on Hugo, so this is particularly fun and interesting for us. 😀

---

<div class="post-metadata">

**Author:** ![s.miller](https://drob5swvtjqxg.cloudfront.net/user_avatar/community.nginx.org/s.miller/32/39_2.png) [@s.miller](https://community.nginx.org/u/s.miller)\
**Post date:** [June 23, 2025, 7:27pm UTC](https://community.nginx.org/t/codepen-for-nginx-oss-core/284/10 "2025-06-23T19:27:51Z")

</div>

For anyone interested in this topic, the latest episode of `NGINX Community Chats` features @ProfessorLogout and @davemc diving into CodePen for NGINX!

[![](https://d7a5pgbt9tjl6.cloudfront.net/original/2X/7/7d32b468bc52788c9c686dabaf734a504160e695.jpeg "Bits & Bytes with Marco Kamner – NGINX Community Chats – Ep. 16") ](https://www.youtube.com/watch?v=tZGOnPHZf4I)