Solid Playground

Free plan Self-hostedWeb

What Solid Playground is

Solid Playground is a free web and self-hosted tool for exploring what the Solid compiler generates from JSX templates. It provides DOM, server-side rendering, hydration, and universal rendering modes for inspecting different output contexts. Monaco supplies the in-browser editor, and Babel Standalone provides the browser compiler. The live page includes Export to Zip and GitHub controls. REPLs can be compressed with lz-string for sharing, and public sharing is supported. A login feature lets users create and save REPLs; the project describes Stytch OAuth through Solid’s custom API service and Supabase as its backend. The official app is playground.solidjs.com, with source in the solidjs GitHub organization under an MIT license. Self-hosting instructions cover cloning, pnpm dependency installation, local development, and building. Listed technologies include solid-js, Windi CSS, Vite, and Workbox.

Who it suits

Solid Playground suits developers learning or inspecting Solid compiler output in a browser. The self-hosting option fits users who want to run and build the project locally.

What it does well

Offers DOM, SSR, hydration, and universal modes
Uses Monaco for in-browser editing
Exports projects to ZIP files
Supports compressed public REPL sharing
MIT-licensed and self-hostable

What to know first

Focused on Solid JSX compiler exploration
Self-hosting requires cloning and pnpm setup
Saved REPLs require the login feature

Verdict

Solid Playground provides multiple rendering views, browser editing, sharing, and export tools for Solid JSX experiments. Its MIT license and documented self-hosting path also support local use.

Facts from Solid Playground's own pages

Audience: The repository describes the tool as a way to explore compiler output from Solid JSX templates. · github.com, 11 Oct 2026
Authentication integration: The Solid blog post says the new playground used Stytch OAuth through Solid’s custom API service. · solidjs.com, 10 Oct 2026
Backend integration: The Solid blog post says the playground used Supabase as its backend. · solidjs.com, 10 Oct 2026
Code editor: The project uses Monaco as its in-browser code editor. · github.com, 11 Oct 2026
Compiler: The project uses Babel Standalone as its in-browser compiler. · github.com, 10 Oct 2026
Editor: The project uses Monaco as its in-browser code editor. · github.com, 10 Oct 2026
Export: The live playground page offers an “Export to Zip” control. · playground.solidjs.com, 10 Oct 2026
GitHub: The live playground page offers a GitHub control. · playground.solidjs.com, 10 Oct 2026
In-browser compiler: The project uses @babel/standalone as its in-browser compiler. · github.com, 11 Oct 2026
Integrations: The README identifies solid-js, Babel standalone, Monaco, Windi CSS, Vite, Workbox, pnpm, and lz-string as technologies used. · github.com, 11 Oct 2026
License: The public solid-playground repository is marked as MIT licensed. · github.com, 11 Oct 2026
Maker: The playground source repository is in the solidjs GitHub organization. · github.com, 10 Oct 2026
Modes: The repository README lists DOM, SSR, hydration, and universal custom renderer modes. · github.com, 11 Oct 2026
Official web app: The repository links to playground.solidjs.com as the Solid Playground website. · github.com, 11 Oct 2026
Purpose: Solid Playground lets users discover what the Solid compiler generates from JSX templates. · github.com, 11 Oct 2026
Saved REPLs: A Solid blog post says the playground login feature lets users create and save REPLs. · solidjs.com, 10 Oct 2026
Security: The project repository links to a security policy. · github.com, 10 Oct 2026
Self-hosting: The README provides instructions to clone the project, install dependencies with pnpm, start a development server, and build it. · github.com, 11 Oct 2026
Sharing: The project uses lz-string to compress shared REPLs. · github.com, 11 Oct 2026

Where Solid Playground stands on Freedom251

Code Playground Software#46 of 58