Live Code Playground

Write, test, and experiment with HTML, CSS, and JavaScript code in real-time

HTML

<div class="container">
    <h1>Hello, World!</h1>
    <p>Welcome to Myritebook Live Playground</p>
    <button class="btn" onclick="showMessage()">Click Me</button>
</div>

CSS

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    animation: fadeIn 0.5s ease;
}

h1 {
    color: #4F46E5;
    margin-bottom: 15px;
}

p {
    color: #6B7280;
    margin-bottom: 20px;
}

.btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 25px;
    cursor: pointer;
    transition: transform 0.3s;
}

.btn:hover {
    transform: translateY(-2px);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

JavaScript

function showMessage() {
    alert('🎉 Welcome to Myritebook Live Playground!');
    console.log('Button clicked!');
}

// Add more interactive features
document.addEventListener('DOMContentLoaded', function() {
    console.log('Playground ready!');
});

Live Preview Ready

Try These Examples

Pro Tips:

Write HTML, CSS, and JavaScript code in the panels above
Click "Run Code" to see the live result
Try the example buttons to see different projects
Use "Fullscreen" mode for better coding experience
Your code runs completely in your browser - no server required!