I'm trying to put together a list of interactive playgrounds. Here's a list of what I have so far (playgrounds for floating point, CSS, DNS, nginx, postgres, sqlite, git, unicode, compilers, Rust, Go, and other languages). https://gist.github.com/jvns/3cfd81a58bcecb11c7f097ebcc8e923d

What other great interactive playgrounds am I missing?

list-playgrounds.md

GitHub Gist: instantly share code, notes, and snippets.

Gist
@b0rk Are you considering tools like rubular.com? Python has a similar site
@b0rk Definitely jsbin.com for html/css/js. Also I don't know if https://the-echoplex.net/flexyboxes/ is too niche for that list, but I use it all the time.
Flexy Boxes — CSS flexbox playground and code generation tool

Online CSS flexbox playground and code generator. Supports all existing flexbox implementations.

regex101: build, test, and debug regex

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.

regex101

@janl @b0rk
see also https://regexper.com/ and https://www.debuggex.com/ , the visualisations can be very helpful.

E.g. the regex to detect log4shell is much easier to follow in a visual format: https://www.debuggex.com/r/xMOkIpADRPR-HWCy

Regexper

Regular expression visualizer using railroad diagrams

@b0rk https://godbolt.org , for many languages
Compiler Explorer

Compiler Explorer is an interactive online compiler which shows the assembly output of compiled C++, Rust, Go (and many more) code.

@llimllib
Came here to post that.

And it's also a great way for exploring computer architectures as well (at least their assembly syntax).

@b0rk

@b0rk I built a little bloom filter playground: https://llimllib.github.io/bloomfilter-tutorial/
Bloom Filters by Example

explainshell.com - match command-line arguments to their help text

match command-line arguments to their help text

@b0rk https://www.shadertoy.com is a shader playground

@llimllib @b0rk And paired with shadertoy.com is vertexshaderart.com
@llimllib thank you, can't believe I forgot shadertoy!
@b0rk I'd name it "awesome-playgrounds" as many list of links start with "awesome"

@b0rk There are many regular expression playgrounds, https://regex101.com is the one I've used.

This is an extremely broad topic that could have a very long list!

regex101: build, test, and debug regex

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.

regex101
@b0rk https://fffuel.co/sssvg/ for playing with SVG shapes/fills/strokes/gradients etc
SSSVG: An Interactive SVG Reference

A visual & interactive SVG reference. Quickly look up how to define SVG shapes, transforms, masks, patterns, gradients, text and more.

fffuel.co

@b0rk

https://xsltfiddle.liberty-development.net

XSLT fiddle is great for testing XML transforms. Can use Saxon, MSXML or the browsers built in processor.

.NET XSLT Fiddle

@b0rk https://xqueryfiddle.liberty-development.net/

They also have something for XQuery!

.NET XQuery Fiddle

@b0rk http://immersivemath.com/ila/index.html is an interactive playground for linear algebra? Really not sure if your list intends to cast this broad a net, but it's certainly fun
Immersive Math

@b0rk I use https://lapo.it/asn1js/ for exploring the encoding of certificates all the time, though I'm not sure it fits exactly as "interactive"
ASN.1 JavaScript decoder

Python Tutor - Python Online Compiler with Visual AI Help

Online Swift Playground

Self hosted and embeddable Swift Playground solution with a third-party module support baked in.

@b0rk For the #CBOR data encoding, there is https://cbor.me/
CBOR playground

Free Online Tools For Developers - FreeFormatter.com

Free online tools for developers, including formatters (JSON, XML, HTML, SQL, etc.), minifiers (JavaScript, CSS), validators, compactors and many more!

@b0rk

GopherJS, Go in the browser: https://gopherjs.github.io/playground/

GopherJS Playground

@b0rk Thanks for your list! I'll integrate it into my bookmark set shortly…

https://pinboard.in/search/u:amcgregor?query=tool (interactive tooling) and https://pinboard.in/search/u:amcgregor?query=%23webdev (#webdev IRC learning channel curated picks; fewer interactive playgrounds… for now) are mine, and where your contributions will end up. 😉

See also: https://pinboard.in/search/u:amcgregor?query=generator (arbitrary tools generating "things" like code, fonts, CSS, or even RPG tools from donjon 😝)

Oh! And you mentioned floating point? That's its own tag: https://pinboard.in/u:amcgregor/t:ieee/

Pinboard: Searching amcgregor

TryRuby: Learn programming with Ruby

Learn to program in Ruby in 30 minutes

@b0rk I'm about to push an update to the Trustfall query engine's web playground.

Folks can use it to run database-like queries over public APIs and data sets like:
- HackerNews: https://play.predr.ag/hackernews
- Rust crates' APIs: https://play.predr.ag/rustdoc

I'm also planning to add more data sources over time.

Trustfall Query Playground

Query data sources like HackerNews and Rust crates directly in your browser.

@b0rk We made a language syntax playground for Langium: https://langium.org/playground/
Langium

Langium is an open source language engineering tool with first-class support for the Language Server Protocol, written in TypeScript and running in Node.js.

Langium
@b0rk wow "Mess With DNS" is an awesome idea. I put some random stuff in the box and expected it to just output some analysis. But I made a subdomain with a non-routable address!
@Rob_Russell yeah the whole point of it is that it runs a real DNS server :)
@b0rk Not sure if in scope, but frequently I have to re-explore the sites that tell me my IP, IPv6 and VPN or censorship status. But I never found the ultimate one. It could be a fit to the list.
@b0rk Haskell playground https://play.haskell.org/
Haskell Playground

@b0rk For #Fastly (a CDN)'s language VCL (Varnish) they have an open interactive playground at https://fiddle.fastly.dev/
Fiddle - Fastly

Play with the full features of the Fastly Edge cloud without logging in.

@b0rk @predrag's Trustfall playground: https://play.predr.ag
Trustfall Query Playground

Query data sources like HackerNews and Rust crates directly in your browser.

@b0rk replit has support for a lot of stuff: https://replit.com/

There was also a SQL one I used a couple of times. I'll try to remember the name.

Replit – Build apps and sites with AI

Build and deploy software collaboratively with the power of AI without spending a second on setup.

replit
@b0rk Hmm. Have you seen Nicky Case's interactive explainers? Not all focused on tech, but maybe some of them are in scope for you. https://ncase.me/ and in particular https://explorabl.es/
It's Nicky Case!

i make shtuff for curious & playful peeps

@b0rk

- CSS/HTML/JS: [flems](https://flems.io) by Rasmus Porsager

Flems

Flems is a Playground for web development. Use it for examples, presentations, documentation, issues and what not.

@b0rk Unparalleled as far as responsivity goes. IT loads and refreshes instantly.
@b0rk Hello Julia, I forgot "https://" in the link above, and now the link to flems.io on https://jvns.ca/blog/2023/04/17/a-list-of-programming-playgrounds/ is broken
A list of programming playgrounds

A list of programming playgrounds

Julia Evans
@b0rk https://xstate.js.org/viz/ is an interactive playground for statecharts/state machines. #xstate
XState Visualizer

@b0rk I enjoyed playing with the raft protocol simulator, not sure if it’s full featured enough to count as a playground https://raft.github.io/
Raft Consensus Algorithm

Raft is a consensus algorithm that is designed to be easy to understand.

@b0rk Bézier curves: https://www.jasondavies.com/animated-bezier/

Jason Davies has a bunch of good ones in this field

Animated Bézier Curves

Animated Bézier curves.

@b0rk tree-sitter has a playground for writing and testing programming language parsers https://tree-sitter.github.io/tree-sitter/playground#
Tree-sitter|Playground

SharpLab

C#/VB/F# compiler playground.

@b0rk I wrote an interactive playground/tool for CSS shape-outside some time ago:

https://olivierforget.net/css-shape-outside/

shape-outside-editor

@b0rk I made a decent explainer for how to use this tool and how to use shape-outside. And I even made a Unsplash gallery of photos that are well-suited to use with shape outside.

Good work younger me!

https://olivierforget.net/css-shape-outside/static/welcome/index.html

https://unsplash.com/collections/1312739/css-shape-outside-images

Looking back at this tool it's clear I put a lot of work into it. No idea why 😅

CSS Shape Outside Playground Welcome

@teleclimber @b0rk for an introduction to css, i once wrote an article https://www.shopify.com/partners/blog/intro-to-css and built four playgrounds to explore concepts

typography:
https://codepen.io/tylerchilds/full/ZEYXOvw

box model:
https://codepen.io/tylerchilds/full/YzPrqLo

transforms:
https://codepen.io/tylerchilds/full/dyPaOxj

animations:
https://codepen.io/tylerchilds/full/QWwZMOX

i think originally, i put so much effort into those to build the foundation for a low-code tool but have never come back around to the idea.

Intro to CSS: A Beginner’s Guide to Cascading Style Sheets - Shopify

This intro to CSS will help you gain an understanding of the role CSS plays in web applications and everything you should know about this key tool.

Shopify
@tychi @b0rk Lol yeah I think I was exploring similar ideas. I think in my case I was realizing that my project http://Cicerone.co was turning into a web design tool instead of a rich content authoring environment and I was exploring whether I wanted to go there. The answer was "no". 😆😭
Cicerone

@b0rk https://wokwi.com/ for boards! (C, C++, Circuit Python, Rust)

and maybe https://mermaid.live for markdown diagrams though that is more of a tool than a playground

Wokwi - World's most advanced ESP32 Simulator

IoT and Embedded System Simulator: ESP32, STM32, Arduino, Raspberry Pi Pico, displays, sensors, motors and WiFi simulation.

@logicalelegance thank you!! I'd seen that before and I was so impressed but I forgot about it
@b0rk Hi Julia. I throw tryapl.org (interactive APL REPL) and shell.duckdb.org (modern in-browser SQL engine based on DuckDB) into the mix.
@b0rk the TypeScript playground is great to write quick snippets and see how they behave, but also to check the resulting JavaScript code: https://www.typescriptlang.org/play
TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

@b0rk Microsoft has a dotnet playground project people can embed on their own sites https://dotnet.microsoft.com/en-us/platform/try-dotnet and also use it themselves https://dotnet.microsoft.com/en-us/learn/dotnet/in-browser-tutorial/1
Try .NET | Runnable .NET code on your site

Try .NET is a service that allows you to embed runnable .NET code snippets into your website, blog, or documentation. Go beyond copy and paste samples to live snippets.

Microsoft
Scastie - An interactive playground for Scala.

//> using scala 3.8.3 transparent inline def !!!(msg: String="Unreachable") = throw new AssertionError(msg) @main def example = (Some("a"), Some("b")).match { case (Some(_), Some(_)) => println("a") case (None, None) => println("b") case _ => !!!("because I say so!") }

@b0rk There is a playground for JSON-LD: https://json-ld.org/playground/

Also, our team has been working on a playground for the metadata transformation tool kit @metafacture : https://metafacture.org/playground/

JSON-LD Playground