A live code editor runs HTML, CSS and JavaScript and shows the result as you type. Ours shows the preview beside your code and updates it a moment after you stop typing. If you only change CSS, the preview keeps its current state, so a menu you've opened stays open while you restyle it.
All of our code snippets open in this same editor. To look at a single HTML file, the HTML Viewer is quicker.
How do you run HTML, CSS and JavaScript online?
Type HTML, CSS and JavaScript into the three panes. The preview updates as you go.
Add a framework, CSS library or Google Font from Libraries. The editor adds it to your page, so there are no script tags to paste.
Open Console under the preview to read console.log output. Select an error to jump to its line.
Save with Ctrl+S, copy a link with Share, or download the files from Export.
Turn off Auto to run the code only when you press Ctrl+Enter (Cmd+Enter on a Mac).
What other languages does the editor support?
The editor supports HTML, CSS and JavaScript, plus Markdown, Less, JSX, TypeScript and TSX. To switch, click the language name at the top of a pane. The editor turns your code into plain HTML, CSS or JavaScript before the preview runs, and the Compiled tab shows the result.
You can import npm packages by name, for example import confetti from 'canvas-confetti'. The editor fetches the package for you, so there's nothing to install. Emmet abbreviations such as ul>li*3 expand when you press Tab, and class names from the CSS libraries you add appear as suggestions.
How do you find bugs in your code?
Five tabs under the editor's preview help you find bugs.
Console shows your logs and errors and links each error to its line. You can also type JavaScript at the bottom to run it in the preview.
Problems checks your code for mistakes such as unclosed tags, unknown CSS properties and JavaScript syntax errors. It can also check the preview for accessibility issues, such as images without alt text.
Inspector lists every rule in your CSS that styles an element. Press Pick and click the element in the preview to see them.
Animations records CSS animations and transitions, so you can replay them slowly or drag through them on a timeline.
Changes shows what you've edited since you opened or last saved the code.
Loop protection stops any loop that runs longer than 1.5 seconds, so a mistake can't freeze the tab.
How do you test a page at different screen sizes?
Pick a size from the menu above the editor's preview. Presets run from a 390-pixel phone to a 1440-pixel desktop, and Responsive lets you drag the preview to any width. All three sizes shows phone, tablet and desktop widths side by side.
The ruler above the preview shows the width in pixels and marks each media query breakpoint in your CSS. Open in a new window shows the preview in a separate window that updates as you edit.
How are projects saved and shared?
Press Ctrl+S to save a project in your browser. Saved projects stay on that device, so use Export all in the Saved panel to copy them to another browser. The editor also saves a draft as you type, and History keeps the last 40 versions of each project in this browser.
Share creates a link with your code stored inside it. When someone opens the link, they see the code and press Run to start it. Export downloads one HTML file, or a ZIP with separate HTML, CSS and JavaScript files.
Frequently asked questions
Is this online code editor free?
Yes, the editor is free and needs no account. Saving, sharing and exporting all work without signing in.
Where are saved projects stored?
Saved projects and drafts are stored in your browser, on the device you used. Clearing your browser data deletes them, so export anything you want to keep.
Does the editor support React and TypeScript?
Yes, switch the JavaScript pane to JSX, TypeScript or TSX, or start from the React template. The editor compiles the code with Babel before the preview runs.
Why did my loop stop with a RangeError?
Loop protection in the code editor stops any loop that runs longer than 1.5 seconds. Turn it off in Settings if the loop is meant to run that long.
Do shared code links expire?
No, shared links don't expire because the code is stored inside the link. Projects too long for a link can be downloaded as a ZIP instead.
Add from a URL
Added to the page’s <head> before your CSS. Use it for meta tags, a <base> tag or a font link.
×
Nothing to show yetType HTML, CSS or JavaScript and your page appears here.
Click any element to find its code Esc
Check this code before you run it
It came from a shared link. It runs with fewer permissions, so it cannot open pop-ups, submit forms or start downloads.
0.00s / 0.00s
Nothing has animated yet. Hover, click or type in the preview and each CSS animation, transition or element.animate() call shows up here as it plays.
Pick an element in the preview to find its codeGo to lineOpens the indentation settingsRuns the code as you type
