oerli
HTML Live Preview
Preview
Source
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> body { font-family: system-ui; padding: 2rem; background: #f8fafc; color: #1e293b; } h1 { color: #6366f1; } .card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-top: 1rem; } button { background: #6366f1; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; } </style> </head> <body> <h1>Hello from oerli.ai!</h1> <div class="card"> <p>This is a live HTML preview. Edit the code on the left to see changes instantly.</p> <button onclick="this.textContent='Clicked!'">Click me</button> </div> </body> </html>
Live Preview