WT
WixelyTools
Developer Studio
Overview
HTML Studio
HTML Studio
Preview runs in a sandboxed iframe with scripts enabled and site CSS isolated from the document.
Markup
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>HTML Studio Demo</title> <style> :root { color-scheme: light; font-family: Georgia, "Times New Roman", serif; background: radial-gradient(circle at top, #fde68a, #ffffff 42%), linear-gradient(135deg, #fff7ed, #ffffff 60%); color: #1f2937; } body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 2rem; box-sizing: border-box; } .card { width: min(40rem, 100%); border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 1.5rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.82); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16); backdrop-filter: blur(12px); } button { border: 0; border-radius: 999px; padding: 0.8rem 1.2rem; background: #ef4444; color: white; font: inherit; cursor: pointer; } #output { margin-top: 1rem; font-size: 1.1rem; color: #991b1b; } </style> </head> <body> <article class="card"> <h1>HTML Studio</h1> <p>This preview is isolated from the WixelyTools site CSS and can run JavaScript.</p> <button id="run-demo">Run JS</button> <div id="output">Waiting for interaction.</div> </article> <script> const button = document.getElementById('run-demo'); const output = document.getElementById('output'); button.addEventListener('click', () => { output.textContent = `JavaScript ran at ${new Date().toLocaleTimeString()}.`; }); </script> </body> </html>
Download HTML File
Preview
Sandboxed iframe
An unhandled error has occurred.
Reload
Dismiss
New version available
A newer build of WixelyTools is ready. Update now to switch to the latest version.
Update now
Later