Aspendos
Dashboard
Sandbox
Agents
Playground
Billing
Settings
Toggle Menu
Code Sandbox
Create, edit, and preview your code in real-time
Playground
Templates
Copy
Download
Export HTML
🌐 HTML
⚡ JavaScript
⚛️ React JSX
🎨 CSS
Load Template
Code Editor
<!DOCTYPE html> <html> <head> <title>HTML Sandbox</title> <style> body { font-family: Arial, sans-serif; margin: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; } .container { max-width: 800px; margin: 0 auto; background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .demo-box { background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0; border-left: 4px solid #667eea; } .button { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background 0.2s; } .button:hover { background: #5a6fd8; } </style> </head> <body> <div class="container"> <h1>🎨 HTML Sandbox</h1> <p>Welcome to the HTML playground! Start building your ideas here.</p> <div class="demo-box"> <h2>✨ Interactive Demo</h2> <p>This is a styled demo box. Try editing the HTML and CSS!</p> <button class="button" onclick="alert('Hello from HTML Sandbox!')"> Click Me! </button> </div> <div class="demo-box"> <h3>📝 Getting Started</h3> <ul> <li>Edit the HTML in the left panel</li> <li>See live changes in the right panel</li> <li>Try adding more CSS styles</li> <li>Create interactive elements with JavaScript</li> </ul> </div> </div> </body> </html>
Live Preview