All tools

Code playground

Write HTML, CSS and JavaScript and see the page they make as you type, with its console beside it, in a sandbox on your device. Free, with no account or uploads.

Write HTML, CSS and JavaScript

Three editors and the page they make, side by side, with the page's console. It runs as you type, in a sandbox of its own. Open an HTML file, its stylesheets and scripts, or a zip of them, by choosing them or dropping them here.

Start with
A web pageReady to changeA blank pageNothing in itA React appJSX and ReactA Tailwind designTailwind classes

Your code runs on this device and is never uploaded. The project is kept in this browser only if you turn that on.

How it works and help

A little help along the way

Follow these steps. Every option is explained underneath, and nothing you write leaves your device.

  1. Open the playgroundChoose what to start with: A web page, a small page that shows each part at work; A blank page, to start from nothing; or A React app or a Tailwind design. Then press Start coding. Every other starter (a grid, a form, a canvas and more) is under More options. The playground opens in its own window, as large as the screen.
  2. WriteThe HTML goes in the page's body, the CSS styles it and the JavaScript runs after both. The editors suggest tags, properties and names as you type, close brackets and tags, fold blocks and find and replace (Ctrl or ⌘ + F). Write a whole document, with <html> and <head>, in the HTML editor and it is kept as it is.
  3. Watch the pageThe result runs again a moment after you stop typing. Press Run (Ctrl or ⌘ + Enter) to run it at any time, for example after turning off Run as I type. Show it as wide as a phone, a tablet or a laptop, or open it in a window of its own.
  4. Read the consoleWhat the page writes with console.log, console.table and the rest shows under the result, with errors and the line they came from: press script.js:12 to go to that line. Objects and arrays open to show what they hold. Filter by errors, warnings or logs.
  5. Try things in the consoleType JavaScript into the line at the bottom of the console and press Enter: it runs in the page, and its answer is shown. Up and down bring back what you typed before.
  6. Arrange the windowDrag the lines between the parts, or focus one and use the arrow keys. In Settings, put the editors on the left, on top or on the right; fold an editor away with its minus button. On a phone, each part has a tab.
  7. Choose a languageEach editor's title is a menu: write Markdown instead of HTML, SCSS instead of CSS, or TypeScript, JSX or TSX instead of JavaScript. They are turned into HTML, CSS and JavaScript on your device before the page runs, and a line that cannot be is marked and named in the console.
  8. Use packages and TailwindImport a package by its name, such as import confetti from "canvas-confetti", and the page fetches it from esm.sh; JSX brings React the same way. Turn on Tailwind CSS in Settings to style with its classes and @apply.
  9. Tidy and type lessThe wand in an editor's title tidies its code with Prettier; Shift + Alt + F tidies all three, and Ctrl or ⌘ + Z puts it back. In HTML and CSS, type an Emmet abbreviation such as ul>li*3 and press Tab.
  10. Open your own filesPress Open files (under More options on the start), or drop them on the start or the window: an HTML page with its stylesheets and scripts, a few code files, or a zip of them. The page's own <style> and <script> go into the CSS and JavaScript editors, and links to the files you opened with it are taken out.
  11. Add libraries and fontsIn the menu, Head and outside files takes the address of a stylesheet or script on another site, such as a CDN, and writes it into the page before your code. Anything else for the page's <head>, such as a font's link or an import map, goes in the head editor below.
  12. Save it or share itSave writes one HTML file with your CSS and JavaScript inside, to open in any browser; the menu also saves a zip of index.html, style.css and script.js. Share as a link puts the whole project in the link itself. Turn on Keep this project on this device in Settings to find it again in the list when you come back.
Every option explained
Run as I type
On, the page runs again 0.7 seconds after you stop typing. Off, it runs only when you press Run, which suits code that is slow or that you are halfway through.
Stop endless loops
A loop that never ends would freeze the tab. With this on, every for, while and do loop checks how long the script has run without a pause, and stops after two seconds; the console says which loop. Turn it off for code that is meant to run that long.
The sandbox
The page runs in a frame of its own origin, so it cannot read KeepSimp's storage or anything else of the site's. It can still reach the internet like any page: a script or picture from another site is fetched from that site.
Storage in the page
A page in a sandbox has no localStorage of its own. The playground gives it one kept in memory, which works the same way and is emptied each time the page runs; the console says so the first time it is used.
Modules
JavaScript with an import or export, or with await outside a function, runs as a module. Anything else runs as a plain script, so what it declares can be reached from the console.
Packages from esm.sh
On unless you turn it off. A name in an import that is not a path or an address, such as react or lodash-es, is fetched by the page from esm.sh, which serves npm packages as modules; the console says which each time. Your code is not sent, only the request for the package.
Tailwind CSS
Tailwind's own browser build runs in the page and makes the CSS for the classes it finds, with your CSS pane read as Tailwind's (@apply, @theme). It is served by KeepSimp itself, loaded only when you turn it on, and kept for working offline once used.
Share links
The project is squeezed and written after the # of the link. That part of a link is never sent to any server, KeepSimp's included, but anyone who has the link can read the code. Opening a link asks first, and a very long link can be cut short by chat apps.
Outside files
Stylesheets and scripts from other sites are fetched by the page each time it runs, so that site sees the request, as with any page. Only http and https addresses are taken.
Keep this project on this device
Off for each new project unless you turn it on. On, the project is kept in this browser after every change, so it is still there if the page closes, and it is listed on the start card to open again. Turning it off, or deleting it from the list, deletes it.
Privacy
Your code is run in your browser and saved only where you save it. Nothing is uploaded, and there is no account.
Read the step-by-step guide

Guides

Same tool, other jobs

Tools nearby