Frontend Playground

How to use Frontend Playground

A small prototype is easier to reason about when source, output and diagnostics are close together. Codipry keeps the editing experience on the main page and runs your HTML, CSS and JavaScript in a separate sandboxed frame.

1. Choose a starter or type in the HTML, CSS and JS editors. The HTML field is body content; CSS is placed in a style element and JavaScript runs after that content. Use plain text mode if Monaco is unavailable or you prefer a simpler editor.
2. Run starts a fresh preview. Live mode debounces edits by about 400 ms. Stop removes the frame and its timers. JavaScript is parsed and instrumented in a worker to interrupt common runaway loops; a heartbeat watchdog tears down unresponsive frames. Inline scripts written directly into HTML are outside the loop instrumenter, so keep executable code in the JS editor.
3. Save stores a named project locally; drafts are also saved after edits. Recovered, shared and imported projects start paused for review. Projects supports loading, renaming via title + Save, duplicating and confirmed deletion.
4. Export standalone HTML for one-file delivery, ZIP for separate index.html/style.css/script.js, or project JSON to retain editable source. Share encodes source in a compressed URL fragment; links over the size limit require a file export.
5. Open Responsive Lab to compare viewport sizes. Width/height, rotate, zoom and device presets change the simulated viewport; media-query inspection recognizes pixel min/max-width conditions. CSS and source changes require Run when Live is off.

A practical starting point

A tiny interactive counter needs only a button and a click listener. Keep the JavaScript separate so the loop guard can inspect it before execution.

<!-- HTML -->
<button id="count">Count: 0</button>

// JavaScript
let count = 0;
document.querySelector("#count").addEventListener("click", (event) => {
  event.target.textContent = `Count: ${++count}`;
});

Common mistakes

• The preview cannot read the parent page, access main-origin localStorage, open popups, submit forms, or contact the network by default. Those restrictions are intentional.
• Allow external resources enables HTTPS script/style/image/font assets only in the configured separate runner. Fetch/XHR stays blocked. External providers can receive requests for those assets; keep the toggle off for a private offline experiment.
• The loop guard is best effort, not a full resource limiter. It does not promise interruption of every possible program. Large synchronous tasks, HTML inline scripts, or intentionally evasive code can still be problematic.
• Responsive simulation changes layout dimensions, not device hardware, touch behavior, rendering engine, performance or actual browser chrome. Arbitrary external sites are not embedded: their CSP or X-Frame-Options can forbid it.

Frequently asked questions