Open original
Info
Demo

New Demo

Files in this demo

├─ index.html
├─ style.css
└─ script.js

Let’s write some code! This is a (mostly) empty demo to help you get started.

How do I edit this demo?
  1. 1Add content to your page in the index.html file.
  2. 2Edit the design of your page in the style.css file.
  3. 3Change the functionality of your page in the script.js file.
  4. 4Switch between (or add new) files using the tabs above the editor. The files are linked together through the index.html file.
  5. 5The preview on the right updates as you edit your code.
How do I save demos?

Save and load demos using the Save Demo and Load Demo buttons in the top-right corner! Use the Download button to download all the files in your demo, as well as a .demo file. Upload this file back to DEMOLAND to load in all the files for a demo at once.

WARNING: DEMOLAND saves your demos in this browser, on this computer (including any files you upload). Clearing your browser’s site data, switching to another browser, or working in a private window means your saved demos won’t be there. Download anything you want to keep!

What does the code in the demo template do?

This demo features some pre-existing code to help make your site run better. Read the notes contained in each file to see what each line of code does!

  • The index.html file contains meta information that tells your web browser how to render your website. This file also connects your page to separate CSS and JavaScript files.
  • The style.css file contains some basic overrides for default web styles.
  • The script.js file contains a single line of code that should make a message appear in the console. If this message doesn’t appear, then the JavaScript file isn’t connected properly!
Keyboard Shortcuts
⌘ Z / ⌘ ⇧ ZCtrl Z / Ctrl ⇧ Z Undo / redo
Tab / ⇧ TabTab / ⇧ Tab Indent / unindent selection
⌘ ] / ⌘ [Ctrl ] / Ctrl [ Indent / unindent lines
⌘ ACtrl A Select all
⌘ DCtrl D Select next occurrence of selection
⌘ /Ctrl / Comment / uncomment lines
Ctrl SpaceCtrl Space Autocomplete
Ctrl EnterCtrl Enter Reset layout
⌘ ⌥ [ / ⌘ ⌥ ]Ctrl ⇧ [ / Ctrl ⇧ ] Fold / unfold block
Code
The editor didn't load — try refreshing the page. Navigation, shortcuts and the info panel still work in the meantime.
Preview
Dimensions0 × 0
Delay
Console