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 Awesome HTML Page</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 600px;
        }
        
        h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        p {
            font-size: 1.2rem;
            line-height: 1.6;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .btn {
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            border: none;
            padding: 15px 30px;
            border-radius: 50px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 40px;
        }
        
        .feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 Welcome to InstantHTML.dev</h1>
        <p>The most beautiful real-time HTML editor on the web! Edit this code on the left and watch the magic happen instantly on the right.</p>
        
        <button class="btn" onclick="showMessage()">Click Me!</button>
        
        <div class="features">
            <div class="feature">
                <h3>⚡ Real-time</h3>
                <p>See changes instantly as you type</p>
            </div>
            <div class="feature">
                <h3>🎨 Beautiful</h3>
                <p>Clean and modern design</p>
            </div>
            <div class="feature">
                <h3>🛡️ Private</h3>
                <p>Your code stays in your browser</p>
            </div>
        </div>
    </div>
    
    <script>
        function showMessage() {
            alert('🎉 Hello from InstantHTML.dev! Try editing the code to customize this page.');
        }
        
        // Add some interactivity
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('btn')) {
                e.target.style.background = 'linear-gradient(45deg, #4ecdc4, #ff6b6b)';
                setTimeout(() => {
                    e.target.style.background = 'linear-gradient(45deg, #ff6b6b, #4ecdc4)';
                }, 200);
            }
        });
    </script>
</body>
</html>

HTML Editor

Live Preview

Cookie Settings

🔒 Essential Cookies

⚙️ Functional Cookies

📊 Analytics Cookies

🗑️ Data Management

Privacy Policy

1. Introduction

2. Information We Collect

3. How We Use Your Information

4. Data Storage and Security

5. Your Rights (GDPR)

6. Contact

Terms of Use

1. Acceptance of Terms

2. Description of Service

3. User Responsibilities

4. Intellectual Property

5. Disclaimer of Warranties

6. Limitation of Liability

7. Modifications

8. Contact

Cookie Policy

1. What Are Cookies?

2. Types of Cookies We Use

🔒 Essential Cookies (Always Active)

⚙️ Functional Cookies (Optional)

📊 Analytics Cookies (Optional)

3. Managing Cookies

4. Contact