Live Code Editor
Write HTML, CSS and JavaScript in three tabs and see the result in a sandboxed preview that updates as you type. Copy everything as one HTML file.
About the Live Code Editor
This is a small playground for front-end experiments: try out a CSS layout, test a snippet from a tutorial, or build a quick demo without creating any files. Code goes into three tabs (HTML, CSS and JS), and the preview next to them reloads automatically about 300 milliseconds after you stop typing.
Behind the scenes the three tabs are combined into one HTML document. Your CSS goes into a <style> tag in the head, your HTML into the body, and your JavaScript into a <script> tag at the end of the body, so it can find the elements above it. That document is loaded into a sandboxed iframe that may run scripts but is cut off from this page, its cookies and its storage. When your script throws an error, including a syntax error, a red bar at the bottom of the preview shows the message and the line number within the JS tab.
For example, to try a click handler, add a button with the id go in the HTML tab, put document.getElementById('go').onclick = () => document.body.style.background = 'gold'; in the JS tab, and click the button in the preview.
When you are happy with the result, the Copy full HTML button gives you a single file with all three parts that you can save as index.html. Tidy it with the HTML Beautifier, or turn a finished page into a document with HTML to PDF.
How to use the Live Code Editor
- 1
Write HTML
Use the HTML tab for the page content. You don’t need html, head or body tags.
- 2
Add CSS and JavaScript
Switch to the CSS and JS tabs. The example code shows how the three parts connect.
- 3
Watch the preview
The Preview panel refreshes shortly after each change. Errors appear in a red bar at the bottom.
- 4
Use the toolbar
The icons at the top right reset the example code, copy the full HTML document and toggle fullscreen.
- 5
Keep your work
Copy the full HTML before you leave, because the editor does not store your code.
What it can do
Three-tab editor
Separate HTML, CSS and JavaScript tabs, combined into one document for the preview.
Automatic preview
Reloads about 300 ms after you stop typing, so there is no Run button to press.
Sandboxed preview
The iframe allows scripts but not same-origin access, so pasted code can’t read this site’s cookies, storage or page.
Error bar with line numbers
Uncaught errors, including syntax errors, are shown in the preview with their line number in the JS tab.
Copy as one file
Exports a complete HTML document containing your HTML, CSS and JavaScript.
Fullscreen mode
Gives the editor and the preview the whole window.
Limitations
- Your code is not saved and there is no share link; reloading the page brings back the example code.
- The sandbox blocks alert(), confirm() and prompt() dialogs, form submission, pop-ups, cookies and localStorage, so code that depends on them won’t behave as it would on a real site.
- There is no console panel; console.log output goes to your browser’s developer tools.
- The editor is a plain text box without syntax highlighting, autocomplete or line numbers.
- There is no package manager or preprocessor: write plain HTML, CSS and JavaScript, and load libraries from a CDN with a script tag if you need them.
Privacy
Your code runs inside a sandboxed frame in your browser and is never uploaded to FlexyPdf. If your code loads scripts, fonts or images from other sites, your browser requests them from those sites.
Frequently asked questions
Why doesn’t alert() do anything?
The preview iframe is sandboxed without permission to open dialogs, so the browser ignores alert(), confirm() and prompt(). Write the message into the page instead, for example with document.body.append(message), or use console.log and open your browser’s developer tools.
Can I use a library like jQuery or a CSS framework?
Yes, if it is available from a CDN. Add a script or link tag pointing at the library at the top of the HTML tab. Your browser downloads it from that CDN each time the preview loads.
Why does getElementById return null?
Your JavaScript runs at the end of the body, after the HTML has been parsed, so it should find elements from the HTML tab. If it returns null, check that the id matches exactly, including capital letters, and that the element isn’t created later by other code.
Is it safe to paste code from the internet here?
The sandbox stops the preview from reaching this site’s data, cookies or storage, but the code still runs in your browser: it can make network requests and use your processor. Paste only code you would be comfortable opening as a local HTML file.
How do I keep what I’ve built?
Click the copy icon (Copy full HTML) and paste the result into a file named something like demo.html. Opening that file in a browser shows the same page, without the error bar.
Ratings & Reviews
Rate Live Code Editor
Help others by sharing your experience. Your rating is shown without your name.
More Developer Tools
View all →Code Beautifier
Re-indent JavaScript, SQL, JSON, HTML, CSS and XML code
JSON Formatter & Validator
Validate, pretty-print or minify JSON
XML Validator
Check that XML is well-formed and see where it breaks
Markdown Editor
Write Markdown with a live GitHub-style preview