Try HTML in the Codectionary Playground

Open a ready-to-edit HTML example

In this article, choose Edit in Playground beneath the “Study plan” example. Codectionary opens the Playground with that code in an HTML file named index.html. You can also open Playground from the site navigation; a fresh project starts with index.html, style.css and script.js. Select a filename in the Explorer or the editor’s file selector to switch files.

Edit the h1 or paragraph in index.html and watch the Preview panel. Live preview is on by default and updates after a short pause; click Run or Refresh preview to force an update. The preview shows rendered page content, while the Console panel is for logs and runtime errors. If you hide the Preview, use Show Preview to bring it back.

• Start with a local HTML file
• Understand the document structure

Create HTML, CSS and JavaScript files

On a desktop-width screen, use the + button in the Explorer to make a new HTML file, choose HTML, then select and rename the new untitled.html file if needed. The preview uses the first HTML file in the project, so simply adding a second HTML file does not make that second page appear. Keep the page you want to preview as the first HTML file or edit the existing index.html. On narrow screens the Explorer is hidden and a file selector lets you switch existing files, but the add-file control is not shown; use a wider screen for a multi-file exercise.

The Playground collects every CSS file and inserts its rules into the preview, then collects every JavaScript file and runs that code near the end of the page. A fresh project already has style.css and script.js; when you launch a documentation example, only the seeded HTML file is supplied, so create CSS and JavaScript files with the + button. In either case, you can paste the following snippets into the CSS and JavaScript files to style the study plan and make its button change the message.

Unlike a local three-file website, Playground preview does not serve your project files at paths such as <link href="style.css"> or <script src="script.js">. Do not add those references for Playground files: their contents are injected automatically. For a local site, use normal link and script file references instead.

style.css — paste into a CSS file

body { font: 1rem/1.5 system-ui, sans-serif; margin: 2rem; }
button { padding: .6rem 1rem; }

script.js — paste into a JavaScript file

document.querySelector('#next').addEventListener('click', () => {
  document.querySelector('#task').textContent = 'Try changing this page in the Playground.';
});

• Build the same idea as a local three-file project

Read the Preview and Console

The example initially shows a heading, short task and button. After adding script.js and clicking the button, the task changes. To inspect text output, add console.log("Button clicked") inside the click handler and click again: the message should appear in the bottom Console. JavaScript exceptions and unhandled rejections are also reported there, and the Errors Only filter can narrow the view.

If nothing changes, first check that the file was selected, the selectors #next and #task match the HTML id attributes, and the Console has no error. The panel is not an HTML validator and may not show every browser diagnostic. For deeper inspection, use your browser’s developer tools as you would for any webpage.

• Debugging and HTML validation

What the sandbox changes

The sandboxed Preview runs in an iframe with scripts allowed but without same-origin access or form submission permission. A button that changes page text works, but do not use this preview to test a real form submission, cookies, storage access, authentication or behaviour that depends on the top-level page. Third-party resources remain subject to normal browser and network restrictions.

Playground files are an editing session, not a project folder served by your own local web server. Copy or download code you want to keep before leaving or reloading. Use a local editor and browser when you need to test real file paths, a server, multiple pages, network requests or your deployment environment. The Playground is ideal for quick HTML structure and styling experiments, not a replacement for that full workflow.

• Set up a local editor
• Open a local HTML file

Syntax

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Study plan</title>
</head>
<body>
  <main>
    <h1>Today's study plan</h1>
    <p id="task">Read one HTML example.</p>
    <button id="next" type="button">Show next step</button>
  </main>
</body>
</html>

Examples

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Study plan</title>
</head>
<body>
  <main>
    <h1>Today's study plan</h1>
    <p id="task">Read one HTML example.</p>
    <button id="next" type="button">Show next step</button>
  </main>
</body>
</html>

Best practices

• Use the first HTML file for the page you want to preview.
• In Playground, put CSS and JavaScript in their own files without adding local link or script paths.
• Check the Console for runtime errors and keep a copy of work you need later.

Browser compatibility

Related HTML documentation

Specifications & further reading

• MDN: iframe sandbox attributes
• WHATWG HTML Standard: iframe sandbox