RunLocalTools

Free Online HTML Editor with Live Preview and Versions

Write HTML, CSS and JavaScript in separate tabs and watch the page update as you type. The preview runs in a sandbox with a console and device sizes, so you can test a layout on a phone, a tablet and a desktop without leaving the page.

Your project is saved on this device, not on a server. You can save named versions, compare any two of them line by line, import a zip or a folder, and download everything again as a zip. Nothing is uploaded unless you choose the one optional feature that needs the network, and the tool tells you before it does.

What you can do with it

  • Edit in tabs. HTML, CSS, JavaScript, JSON, SVG and text files, with folders, renaming, reordering and duplicating.
  • See it live. A sandboxed preview updates as you type. Choose a phone, tablet or desktop size, rotate it, zoom it, or go full screen.
  • Check your work. A console with an input line, a problems panel that finds common HTML, CSS and JavaScript mistakes, and an outline of your page.
  • Write faster. Emmet-style abbreviations, autocomplete (in the advanced editor), your own snippets, and Format and Minify buttons.
  • Keep versions. Save a named version at any time. The editor also saves one before risky changes such as Format, Minify, loading a template or replacing your project.
  • Compare and restore. See exactly which lines changed between two versions, or between a version and your current project. Restore a whole version or just one file, and undo it.
  • Bring your work in. Open a zip, pick a folder, paste code, or import a page from a web address.
  • Take your work out. Download the whole project as a zip, one file, or a single self-contained HTML page. Print the preview or save it as a PDF from the print dialog.
  • Test safely. Safe mode stops scripts from running, so you can open code you do not trust.

How it works

  1. You type in a tab. Each file is a tab. The editor keeps your project in memory and saves it on your device a moment after you stop typing.
  2. The preview is built from your files. The editor joins your HTML with your CSS, JavaScript and images and shows the result in a sandboxed frame. The frame cannot reach this page, your cookies or your other tabs.
  3. The network is off by default in the preview. A page you write cannot load outside stylesheets, scripts or images unless you tick the box that allows it.
  4. Versions are snapshots of your text files. Each one keeps every text file as it was. Comparing two versions shows the lines that were added, removed or left the same.
  5. Everything stays on your device. Your project, versions and snippets are stored in your browser’s local storage for this site.

How to use it

Start a project

  1. Open the tool. A small starter page is already there.
  2. Pick a template from the list if you want a different start, or edit the starter files.
  3. Type in any tab and watch the preview.

Save and compare versions

  1. Click Save version and give it a name.
  2. Keep working. When you want to see what changed, click Compare next to a version.
  3. Pick a file on the left. Removed lines are marked with a minus sign and added lines with a plus sign.
  4. Click Restore this file to put one file back, or Restore in the list to put the whole version back. Both can be undone.

Import a zip, a folder or pasted code

  1. Click Import .zip or Import folder, or drop a .zip on the drop zone.
  2. If you already have work in progress, choose Replace project or Add to project.
  3. To paste code instead, click Paste code, paste it, check the file name, and click Add file. For a full page, tick the box to split its inline style and script into separate files.

Download your work

  1. Click Download project as .zip for every file, with its folders and images.
  2. Click Download this file for the file you are editing.
  3. Click Download as .html for one self-contained page.

Print or save as a PDF

  1. Click Print above the preview.
  2. In the print dialog, choose Save as PDF as the destination.

Privacy: what stays on your device and what does not

Most of this tool is local. Here is the full picture.

Always local: typing, the preview, the console, problems and outline, Emmet, snippets, versions, compare, restore, paste, importing a zip or folder from your computer, Print and Full screen. Your files are not uploaded.

Loads a public script file when you first use it: Format (a code formatter) and zip import or download (a zip library). The request contains no part of your project.

Optional and off unless you turn it on:

  • Let the preview load outside files. Unticked by default and never remembered. If you tick it, a page you wrote can request stylesheets, scripts and images from other sites.
  • Import from a web address. Unticked by default and unticked again every time you open the tool. If you tick it, the address you type is sent to this site’s fetch service, which downloads that one page and returns its HTML. Only the page’s HTML is imported, not its stylesheets, scripts or images.

Versions keep your text files, not images or other assets. They are stored in your browser on this device and can be cleared from the Versions section at any time.

FAQ

Is the HTML editor free? Yes. There is no account, no sign-up and no limit on how many projects you open.

Does my code leave my device? No, except for the optional web address import, which sends the address you type to this site’s fetch service. Everything else, including the preview, versions and zip handling, runs in your browser.

Where is my project saved? In your browser’s storage for this site, on this device. If you clear your browser data or use a different browser, it will not be there, so download a zip for anything you want to keep.

How many versions can I keep? Up to 50, or 24 MB of text, whichever comes first. When the list is full the editor drops the oldest automatic versions first. It never deletes a version you named without asking: it tells you to delete one yourself.

Do versions include my images? No. A version keeps your text files and the names of your images, not the image files themselves. When you restore a version, your images stay as they are.

Can I open a zip of a website? Yes. Click Import .zip or drop the file on the drop zone. The editor skips system files and folders such as .git and node_modules, strips a wrapping folder, and refuses file names that try to leave the project. Very large zips are checked before they are unpacked: up to 300 files and 60 MB in total.

What happens to my current project when I import a zip? If it is still the untouched starter, it is replaced. Otherwise you choose Replace project (a version is saved first) or Add to project (nothing is lost, and a file with a clashing name is renamed).

Can I import a live web page? Yes, with the optional “From a URL” box. It fetches the page’s HTML only. Its stylesheets, scripts and images are listed but not imported, and relative links are turned into full web addresses so the page can still find them if you let the preview load outside files.

Why does the preview not show an image from another site? By default the preview blocks all network requests. Tick “Allow the preview to load external resources” to let your page load outside files.

Can I print the preview or save it as a PDF? Yes. Click Print and choose Save as PDF in the print dialog.

Does it work on a phone? Yes. The layout adapts, and the preview has phone and tablet sizes. Full screen shows the preview over the whole window.

What is safe mode? It stops scripts in the preview from running, so you can look at untrusted code. You can still edit and download it.

Can I use it offline? Once the page has loaded, editing, the preview, versions and compare work without a connection. Format, zip import and zip download need to load a small script file the first time, and the web address import needs a connection.

Related tools