DevKit.tools

HTML, CSS and JS Editor

Write HTML, CSS and JavaScript with a live preview and a working console. Runs entirely in your browser, saves as you type, and exports one self-contained file.

Download

Console

console.log, warnings and uncaught errors from your code appear here.

Your work is saved in this browser as you type, so a refresh or a closed tab does not lose it. It stays on this device and is never uploaded. Both downloads are built here too, with nothing sent anywhere.

.html gives you one self-contained file with the CSS and JavaScript inlined, which is the right shape for something you want to email, open straight from your desktop or drop on a server as a single page. .zip gives you index.html, style.css and script.js separately, linked the normal way, which is the shape to start a real project from. An empty pane is left out of the zip rather than shipped as an empty file with a broken link to it.

The preview runs in a sandboxed frame with no access to this site, which is what makes it safe to paste in code from anywhere. The trade is that a few browser APIs are unavailable inside it: localStorage and cookies throw, and requests to other sites are usually refused, because the frame has no origin of its own. Layout, styling, DOM work and logic are all unaffected.

Links open in a new tab. A href needs its protocol to go anywhere: www.example.com is read as a file next to the page, so nothing happens when you click it, while https://www.example.com works. That is how a browser treats it in any HTML file, not something this preview does differently.

One thing worth knowing while you are mid-edit: an unclosed tag swallows everything after it, including your own script, so half-typed markup can briefly show your JavaScript as text on the page. Closing the tag fixes it. This is the browser's own parsing, and the file you download behaves identically.

Your loops are guarded. The preview shares a thread with this page, so awhile (true)would otherwise freeze the editor along with it, leaving nothing to click and no way out but closing the tab. Every loop gets a time check inserted before it runs, and a script still going after 3 seconds stops with an error in the console rather than taking the page with it.

The guard is added by parsing your JavaScript, so awhileinside a string or a comment is left alone. It is added only to the preview: the file you download is exactly what you wrote. What it does not catch is runaway recursion, which the browser stops by itself with a stack overflow.

Most online code editors want an account before they will let you keep anything, and the work then lives on their server rather than your machine. This keeps everything in your browser: the code is saved on this device as you type, a refresh does not lose it, and nothing is ever uploaded.

The preview updates as you pause typing, and console.log output and uncaught errors appear in a panel underneath, which is the part most simple editors leave out. Without it a mistake in your JavaScript is silent, because the preview frame has a console nobody can see.

When you are done there are two ways out. One self-contained .html file with everything inlined, or a .zip with index.html, style.css and script.js kept separate the way a real project is laid out. Both open anywhere, need no build step, and carry no dependency on this site.

How to use it

  1. 1Pick the HTML, CSS or JS tab and start typing.
  2. 2The preview updates when you pause. Turn off Run as I type if you are writing a loop.
  3. 3Watch the console panel for logs and errors.
  4. 4Download it as one .html file, or as a .zip with the three files kept separate.

Questions

Is my code uploaded anywhere?
No. Everything runs in your browser, and your work is saved in this browser's local storage on this device. It is never sent to a server, so there is nothing for us to store, lose or leak.
Will I lose my work if I close the tab?
No. It is saved as you type and restored when you come back. It is stored per browser and per device though, so it will not follow you to another machine. Download the file if you need it elsewhere.
Why does localStorage not work inside the preview?
The preview runs in a sandboxed frame with no origin of its own, which is what stops pasted code from reading this site's data or calling its API routes as you. Storage and cookies need an origin, so they throw inside the frame. Layout, styling, DOM work and logic all behave normally.
Can I fetch from an API in the preview?
Usually not. The frame has a null origin, and most servers refuse cross-origin requests from one. Some public APIs that send a permissive CORS header will work. This is the cost of the sandbox that keeps the tool safe to paste unknown code into.
Can I add a library like React or jQuery?
Yes. Put a script tag pointing at a CDN in the HTML pane and it loads normally, since script loading is not restricted.
The preview froze. What happened?
Almost certainly an infinite loop. Turn off Run as I type before writing loops, fix the code, then press Run, which rebuilds the frame and clears the stuck one.
Is there syntax highlighting and autocomplete?
Yes, from CodeMirror, with bracket matching and Tab indentation. It loads after the page, so there is a plain text box for the first moment, which stays usable if the editor cannot load at all.
What do the downloads contain?
There are two. The .html download is a single file with your CSS in a style tag and your JavaScript in a script tag, ready to open anywhere. The .zip download gives you index.html, style.css and script.js as separate files, linked the normal way, which is how you would start a real project. Nothing from this site is included in either, not even the console bridge or the loop guard, so what you get is exactly what you wrote.

Related

The rest of the site is deterministic tools rather than an editor. Browse all of them, or jump to the HTML generators and CSS generators to produce code you can paste straight in here.