I Built a 4-in-1 Web Playground — JS/TS, HTML/CSS/JS, React, and Regex — That Runs Entirely in the Browser

#typescript #javascript #opensource #react

As a frontend developer, my workflow was scattered across tools. I test JS in the console, prototype HTML in CodePen, try React components in StackBlitz, and debug regex in regex101. None of them talk to each other, most require accounts, and switching between them breaks my flow.

So I built TryJS — a single, free, open-source playground with 4 modes. Everything runs client-side. No backend, no signup.

JS/TS Playground

This is the core mode. Write JavaScript or TypeScript, see output instantly.

What makes it different from a basic REPL:

Real TypeScript IntelliSense — not just syntax highlighting. I wired up ts.createLanguageService() with getCompletionsAtPosition() for semantic completions and getQuickInfoAtPosition() for hover type info. TypeScript 5 is lazy-loaded from CDN only when you switch to TS mode, so it doesn't bloat the initial load.
NPM imports just work — write import confetti from "canvas-confetti" and it runs. Bare specifiers are rewritten to esm.sh URLs at transpilation time and executed inside a sandboxed iframe.
REPL-style evaluation — bare expressions display their result in the console, like Chrome DevTools. No need to wrap everything in console.log().
60+ snippet completions — type fn for a function template, tc for try/catch, uef for useEffect, etc. Plus dot-access completions for console., Math., JSON., Array., Promise., and more.

Web Playground (HTML/CSS/JS)

Sometimes you need more than just JS. The Web Playground gives you a tabbed HTML/CSS/JS editor with a live iframe preview.

Write HTML, CSS, and JS in separate tabs
Preview updates live as you type
Built-in console drawer captures logs, warnings, and errors
Great for prototyping layouts, testing CSS animations, or building vanilla components

React Playground

This is the mode I use most. Write JSX with hooks and see your component render live — no create-react-app, no bundler config.

Full hook support — useState, useEffect, useRef, useMemo, etc.
CSS tab for styling alongside your JSX
NPM imports work here too — import { motion } from "framer-motion" just works
Powered by React 19 loaded from CDN via esm.sh
Error boundaries catch render errors and show them in the console

One click to share your component as a URL or embed it in docs.

Regex Playground

I added this because I was constantly switching to regex101. Now it's built in.

Real-time matching — enter a pattern and test string, see matches highlighted as you type
Flag toggles — enable/disable g, i, m, s, u, d with one click
Explain mode — breaks down any regex into human-readable steps, token by token. For example, \d{2,4} becomes "Match a digit, between 2 and 4 times"
Match details — inspect indices, captured groups, and named groups in a table
Pattern library — 15+ curated common patterns (email, URL, phone, date, IP address) with explanations and use cases

How It's Built

Layer	Choice	Why
UI	Preact + Signals	Small bundle (~30KB), reactive without boilerplate
Editor	CodeMirror 6	Modular, pluggable completion sources, great mobile support
TS Transpiler	Sucrase	Fast, lightweight, handles JSX and TypeScript
TS Compiler	TypeScript 5 (CDN)	Lazy-loaded only when needed, powers IntelliSense
Build	Vite	Fast dev server, optimized production builds
Hosting	Vercel	Edge deployment, analytics