WYSIWYG HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
      line-height: 1.6;
    }
    h1 {
      color: #2563eb;
      border-bottom: 2px solid #e5e7eb;
      padding-bottom: 0.5rem;
    }
    .card {
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 1.5rem;
      margin: 1rem 0;
    }
  </style>
</head>
<body>
  <h1>Welcome to WYSIWYG HTML Editor</h1>
  <p>This is a <strong>live HTML editor</strong> with instant preview. Start editing the code on the left to see changes here!</p>
  
  <div class="card">
    <h2>Features</h2>
    <ul>
      <li>Real-time preview</li>
      <li>AI-powered improvements</li>
      <li>Undo/Redo support</li>
      <li>Keyboard shortcuts (Ctrl+Z, Ctrl+Y)</li>
      <li>Export and copy functionality</li>
    </ul>
  </div>
  
  <p>Try adding your own HTML, CSS, and JavaScript!</p>
</body>
</html>

1142 chars • 46 lines

HTML Editor

1142 chars • 46 lines

Live Preview

AI-Powered Improvements

Use quick actions or describe custom improvements in natural language.

Quick Actions:

Custom Improvement: