web/css
Online CSS Editor with Instant Live Preview
Write stylesheets the way you would locally — several files, real imports, custom properties and a preprocessor if you want one — with the page repainting as you type.
:root {
--space: clamp(1rem, 2vw, 2rem);
--ink: light-dark(#111, #eee);
}
.card {
padding: var(--space);
color: var(--ink);
}01 platform
Writing a stylesheet, not styling a snippet
A single CSS box is fine for one rule. Everything that makes a stylesheet maintainable — splitting it, importing it, sharing tokens — needs real files.
-
Several stylesheets, imported properly
tokens.css,layout.css,components.csswith@importor separate<link>tags. One file stops being workable around the two-hundredth line. -
Custom properties that cascade for real
A
:roottoken block inherited by everything below it behaves as it does in production, because the preview is a real document rather than a scoped fragment. -
Preprocessors when you want them
SCSS, Sass and Less compile in the tab through Dart Sass. Nesting and mixins are available without a watcher, and plain CSS stays an option.
-
The repaint is instant and partial
Changing a rule repaints without a reload, so the element you were looking at stays put and any open state survives.
02 deep dive
The features that replaced the old workarounds
CSS changed more in the last three years than in the decade before it, and most of what people still work around is now native.
Native nesting works everywhere current. The & selector is supported across modern browsers, which means a lot of projects no longer need a preprocessor at all — worth knowing before adding a build step.
light-dark() and color-mix() remove a whole layer. Theming that used to need two token sets and a class toggle is now one declaration.
Container queries scope to the component. A card that reflows because it is narrow, rather than because the viewport is, is the model most design systems actually wanted.
:has() styles a parent from its children. That removes a category of JavaScript that existed only to add a class to an ancestor.
- nesting
- native, no build
- theming
- light-dark()
- queries
- container + media
- selectors
- :has(), :is()
.card {
container-type: inline-size;
& .title { font-weight: 600 }
&:has(img) { padding-block-start: 0 }
}03 features
What ships with a CSS project
Everything below is active the moment the editor opens — no plugin to choose and no configuration file to write.
-
Autocomplete for properties and values
Properties with their valid keywords, so a half-remembered value is a suggestion rather than a documentation trip.
-
Dart Sass in the browser
SCSS and Sass compile client-side with no watcher.
@useand@forwardwork across files. -
Less, on the same path
Less compiles alongside, so an existing project using it opens without conversion.
-
Device frames for breakpoints
Check a media or container query at real device dimensions rather than a resized window.
-
Find and replace across files
Rename a class used in four stylesheets with one regular expression rather than four passes.
-
Fonts and assets in the project
Drop a
.woff2in,@font-faceit, and the preview uses it — the only way to judge how a face actually sets.
04 ecosystem
A project that mixes languages
A stylesheet can sit beside a React component and a Python script; XCODX picks the right handling per file rather than per project.
05 languages
Every language the editor styles
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
06 questions
CSS on XCODX — common questions
The questions that decide whether this fits your work.
How is this different from the HTML playground?
The playground is for trying a layout — grid, flexbox and container queries, one idea at a time. This is for writing and maintaining stylesheets: several files, shared tokens, imports and a preprocessor. Same editor, different job.
Do I still need SCSS now that CSS has nesting?
Often not. Native nesting works across current browsers, and color-mix() and light-dark() cover much of what variables and functions were used for. SCSS still earns its place for loops, @use across many partials and large mixin libraries — and it compiles here either way.
Which Sass compiler is this?
Dart Sass, the reference implementation, compiled to WebAssembly and running client-side. Nesting, variables, mixins, @use and @forward all behave as they do locally.
Can I split my CSS across several files?
Yes, and you should past a certain size. Use @import or separate <link> tags — both resolve, because the preview serves a real directory rather than concatenating text areas.
Can I test container queries and :has()?
Yes. The preview is a real browsing context, so anything your browser supports works — container queries, :has(), light-dark(), view transitions and the rest.
Can I check a breakpoint 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 styles reveal themselves as unusable on touch.
Can I use custom fonts?
Yes. Upload a .woff2 into the project and reference it from @font-face with an ordinary relative path. It exports and commits with everything else.
Is it free and does it need an account?
Free, and no account. Projects live in your own browser rather than on a server, which is also why editing and previewing keep working with no connection.
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 CSS editor
A stylesheet repainting as you type, with real files, a preprocessor if you want one, and no account in the way.