Skip to main content

Getting Started Guide

This guide will walk you through creating your first project in LiveCodes.

Try the completed project below:

.

show code
import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "html": "<div class=\"container\">\n  <h1 id=\"greeting\">Hello, World!</h1>\n  <input type=\"text\" id=\"nameInput\" placeholder=\"Enter your name\">\n  <button id=\"greetBtn\">Greet Me!</button>\n</div>\n",
    "css": ".container {\n  max-width: 600px;\n  margin: 50px auto;\n  text-align: center;\n  font-family: Arial, sans-serif;\n}\n\nh1 {\n  color: #007bff;\n  font-size: 2.5rem;\n}\n\ninput {\n  padding: 10px;\n  font-size: 1rem;\n  margin: 10px;\n  border: 2px solid #007bff;\n  border-radius: 5px;\n}\n\nbutton {\n  padding: 10px 20px;\n  font-size: 1rem;\n  background-color: #007bff;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background-color: #0056b3;\n}\n",
    "js": "const greeting = document.getElementById('greeting');\nconst nameInput = document.getElementById('nameInput');\nconst greetBtn = document.getElementById('greetBtn');\n\ngreetBtn.addEventListener('click', () => {\n  const name = nameInput.value.trim();\n  if (name) {\n    greeting.textContent = `Hello, ${name}!`;\n  } else {\n    greeting.textContent = 'Hello, World!';\n  }\n});\n"
  }
};
createPlayground('#container', options);

Prerequisites​

  • A web browser (Chrome, Firefox, Safari, or Edge)
  • Basic knowledge of HTML, CSS, and JavaScript

Step 1: Open LiveCodes​

  1. Navigate to livecodes.io
  2. You'll see the editor interface with three panels:
    • HTML
    • CSS
    • JavaScript

Step 2: Create a Simple Page​

Let's create a simple interactive greeting card.

HTML Panel​

<div class="container">
  <h1 id="greeting">Hello, World!</h1>
  <input type="text" id="nameInput" placeholder="Enter your name">
  <button id="greetBtn">Greet Me!</button>
</div>

CSS Panel​

.container {
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
  font-family: Arial, sans-serif;
}

h1 {
  color: #007bff;
  font-size: 2.5rem;
}

input {
  padding: 10px;
  font-size: 1rem;
  margin: 10px;
  border: 2px solid #007bff;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

JavaScript Panel​

const greeting = document.getElementById('greeting');
const nameInput = document.getElementById('nameInput');
const greetBtn = document.getElementById('greetBtn');

greetBtn.addEventListener('click', () => {
  const name = nameInput.value.trim();
  if (name) {
    greeting.textContent = `Hello, ${name}!`;
  } else {
    greeting.textContent = 'Hello, World!';
  }
});

Step 3: See Your Results​

The result panel automatically updates as you type. Try:

  • Entering your name in the input field
  • Clicking the "Greet Me!" button
  • Modifying the colors in the CSS

Step 4: Save Your Project​

  1. Click on the "Project" menu button in the toolbar
  2. Click "Save" to save the project (on this device)
  3. You can open it later from "Project menu > Open"
  4. Use "Project menu > Share" to get a permanent URL to your project that you can share

Congratulations!​

You've just built your first interactive app with LiveCodes!

Compare your version with the completed project above. Did you add any personal touches?

Next Steps​

Now that you've created your first project, explore:

Tips​

  • Use Ctrl/Cmd + S to manually save
  • Press Ctrl/Cmd + Alt + S to open share panel
  • Press Ctrl/Cmd + K to open the command menu
  • Enable Auto-save in user settings for automatic saving
Sponsors