CSS & layout
LiveMarkup
Paste HTML, CSS and JS, see it render instantly. No account, no project setup, nothing to save.
- Runs at
- livemarkup.js.org
- Cost
- Free · MIT licensed
- Your data
- Stays in your browser
Three editors, one preview, no ceremony. Open the page and start typing.
The gap it fills
You want to check whether a snippet of HTML and CSS does what you think it does, and every option in front of you wants an account first.
CodePen and JSFiddle are better tools with far more in them. They also want you to log in and create a “pen” to answer a question that will take fifteen seconds. LiveMarkup opens empty and renders as you type. Nothing gets created, so there’s nothing to name or save or clean up afterwards.
What’s in it
Three panes for HTML, CSS and JavaScript with syntax highlighting through ACE,
and a live preview that re-renders as you type with a few device-size presets.
There’s a console in the page so console.log output doesn’t need devtools open,
and Prettier formatting on a keystroke.
The part I use most is framework injection: Tailwind, Bootstrap, MUI and Bulma from a dropdown, which turns “does this utility class do what I think” into a five-second check.
ZIP export is there for when a scratch turns into something worth keeping, and localStorage persistence means a reload doesn’t lose your work.
Where your work lives
In your browser’s localStorage and nowhere else. There’s no account system and no server component, just static files.
That has a consequence worth being blunt about: clear your browser data and it’s gone. Export the ZIP for anything you care about.
Libraries load from a CDN with Subresource Integrity hashes, so a compromised CDN can’t quietly serve you different code.
How it’s built
Vanilla JavaScript. No build step, no bundler, no framework. The whole thing is HTML, CSS and JS files served statically, which is why it has needed no maintenance since I wrote it and costs nothing to run.
That was a constraint I set deliberately rather than a limitation I worked around. A tool this small doesn’t need a toolchain, and anything with a build pipeline is something I’d eventually have to come back and update for reasons that have nothing to do with the tool itself.
What it isn’t
It’s not a project editor. One file per language, no imports, no npm, and that’s the trade for opening instantly. There’s no sharing either, because there’s no server, so there’s no URL to send anyone: export the ZIP instead. Plain HTML, CSS and JS only, so no TypeScript and no preprocessors. And it’s usable on a phone but genuinely cramped, since three panes plus a preview want a wide screen.
If you need collaboration, saved URLs or a package manager, CodePen and StackBlitz are the right answer. This is for when opening one of those is more work than the question deserves.
A couple of things people ask
It’s free and MIT licensed, with no account, no limits and no tracking. To run it
yourself, clone the repo and open index.html. There’s no build step, so that’s
the entire process, and it works from a file:// URL too.
As for the domain: js.org hands out free subdomains to open-source JavaScript projects through a reviewed pull request. Felt like the right home for something that costs nothing to run.
Related tools
- LiveMarkdown Write Markdown and watch it render, including the maths and diagrams most quick previewers skip.
- PX to Tailwind converter Turn a pixel value into the Tailwind utility that produces it, and find out when there isn't one.
- PX to REM converter Pixels to rem and back, at whatever root font size your project uses.