SB Code Editor

LIVE EDIT

HTML </>

<div class="container"> <h1>Welcome to SB Code Editor Pro</h1> <p>अपना HTML, CSS, और JavaScript लिखें और तुरंत देखें!</p> <button id="actionBtn" class="action-btn">Click Me!</button> <div id="output"></div> </div>

CSS #

* { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 40px; border-radius: 15px; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.2); max-width: 500px; } h1 { font-size: 2.5rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } p { font-size: 1.1rem; margin-bottom: 25px; line-height: 1.6; opacity: 0.9; } .action-btn { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; padding: 12px 30px; font-size: 1rem; font-weight: 600; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); margin-top: 10px; } .action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .action-btn:active { transform: translateY(0); } #output { margin-top: 20px; padding: 15px; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-height: 30px; font-size: 0.95rem; }

JavaScript JS

let clickCount = 0; document.getElementById('actionBtn').addEventListener('click', function() { clickCount++; const output = document.getElementById('output'); output.textContent = `Button clicked ${clickCount} time${clickCount !== 1 ? 's' : ''}!`; // Add animation this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 100); }); console.log('SB Code Editor Loaded Successfully!');

LIVE OUTPUT PREVIEW

Editor Settings

Background Color:

Text Color:

Font Size: Small Normal Large Extra Large

Tab Size: 2 spaces 4 spaces 8 spaces

Auto-Save Interval (ms):