html/playground
Interactive HTML Playground for Testing HTML, CSS and JavaScript
Experiment with layouts, components and front-end ideas in an interactive playground where a grid, a flex rule or an animation renders the instant you type it.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
@container (min-width: 40rem) {
.card { flex-direction: row }
}01 platform
Why layout questions need somewhere to try them
CSS is the part of the web you cannot reason your way through. Grid, flexbox, stacking contexts and containment all behave in ways that are obvious once seen and opaque until then.
-
Grid and flexbox are learned by fiddling
auto-fitagainstauto-fill,minmaxagainst a fixed track,fragainst percentages — nobody derives these from the spec. They are three edits and a look. -
Container queries need a container to query
@containeronly makes sense with real content at a real width, which is exactly what a snippet box with no layout cannot give you. -
Stacking and overflow surprise everyone
Why
z-indexdid nothing, whyoverflow: hiddenclipped a dropdown — both are five-second reproductions here and long debugging sessions elsewhere. -
Animation timing is visual by definition
An easing curve or a
@keyframesstep is something you judge by watching. Reading the numbers tells you almost nothing about how it feels.
02 deep dive
Getting a layout right by trying it
The fastest way through a CSS problem is usually four variants and a look, not one variant and an argument.
auto-fit and auto-fill differ only when the row is under-filled. With three cards in a six-column track, one collapses the empty tracks and the other keeps them. Try both and it is settled for good.
:has() changed what CSS can express. Styling a parent from its children removes a whole category of JavaScript, and the selector is easiest to trust once you have watched it work.
Container queries scope to the component. A card that reflows because *it* is narrow rather than because the page is narrow is the right model, and seeing it side by side with a media query makes the difference obvious.
Preprocessors are here when you want them. SCSS nesting and variables compile in the browser, so a layout experiment can use whichever syntax you think in.
- grid
- auto-fit / auto-fill
- selectors
- :has(), :is()
- queries
- container + media
- scss
- Dart Sass
.card {
container-type: inline-size;
&:has(img) {
padding-block-start: 0;
}
}03 pipeline
From an idea to a working layout
Four moves. This is what settling a CSS question costs here, against the tab-switching a local project costs.
-
Sketch the markup
Emmet gets a realistic structure in one line —
section.grid>article.card*6>h3+p— because a layout tested against one element is a layout that breaks against six. -
Write the rule
The preview repaints as you type. There is no save-and-refresh step between the property and its effect.
-
Try the variants
Change one value, watch, change it back. Four attempts cost less than reading one explanation of which to pick.
-
Keep or share it
The project persists in your browser, and the link opens the same layout for whoever you send it to — useful when the question is really a disagreement.
04 features
What the playground gives a front-end experiment
Everything below matters for trying design ideas specifically, rather than for shipping an application.
-
Emmet for realistic markup
ul>li*8>a[href=#]{Item $}in one line. Testing a layout needs content, and typing it by hand is the reason people test against two elements instead of eight. -
SCSS and Less compiled live
Nesting, variables and mixins through Dart Sass in the browser, with no watcher and no config file.
-
Autocomplete for CSS values
Properties with their valid keywords, so a half-remembered value is a suggestion rather than a documentation trip.
-
Device frames beside the code
Check a breakpoint at real device dimensions while you are still writing the rule that governs it.
-
Any package from npm
Import an animation or utility library by name and try it against your own markup rather than against a demo page.
-
A link that keeps the experiment
Share it, or come back to it next month. Projects live in your browser rather than expiring on someone's server.
05 ecosystem
A page that mixes several languages
A plain .html file can sit beside a React component and a Python script; XCODX picks the right handling per file rather than per project.
06 languages
Every language the editor highlights
Highlighting and IntelliSense cover 70+ languages. These are the ones XCODX also compiles or executes for you.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
07 questions
Using the HTML playground — common questions
Questions about experimenting specifically.
How is this different from CodePen?
CodePen is a community and a portfolio as much as an editor, and it is very good at that. This has no social layer — it is a private scratchpad that keeps working offline, holds real files rather than three panes, and lets an experiment become a project without exporting it somewhere.
Does the preview really update as I type?
Yes, and without a full reload. A style change repaints in place, so scroll position and page state survive — which matters as soon as you are working on something below the fold or inside an open dialog.
Can I test container queries and :has()?
Yes. The preview is a real browsing context, so anything your browser supports works — container queries, :has(), view transitions, <dialog> and the rest of the modern platform.
Can I use SCSS in the playground?
Yes. Dart Sass compiles in the browser, so nesting, variables and mixins work with no watcher to start and no configuration to write.
Can I check a layout at phone width?
Yes, in real device frames rather than a resized window. Pixel ratio and pointer type are matched, which is where hover-only interactions reveal themselves as unusable on touch.
Do my experiments persist?
Yes, indefinitely. Each is its own project in your browser's storage — nothing expires after a retention window and nothing is tied to a plan tier.
Can I share a layout with someone?
Yes, by link. They open the same files in the same state, which is what makes this useful when the real question is a disagreement about how something should behave.
Is this a good place to learn CSS?
Yes, and the instant repaint is why. Grid, flexbox and stacking contexts are learned by changing a value and watching, and anything that puts a save-and-refresh step in between slows that down more than it sounds.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the HTML playground
A layout rendering the instant you type it, with device frames beside the code and a link to share when it works.