WebCraft
Initializing editor...
WebCraft
New File
Save File
Load File
Toggle Theme
Run
Open in New Tab
HTML
HTML Editor
CSS
CSS Editor
JS
JavaScript Editor
Settings
HTML
Format Code
Copy Code
<!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> /* CSS will be added here */ </style> </head> <body> <h1>Hello, World!</h1> <p>Start editing to see some magic happen!</p> <script> // JavaScript will be added here </script> </body> </html>
CSS
Format Code
Copy Code
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; } h1 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; } p { font-size: 18px; }
JavaScript
Format Code
Copy Code
// Add your JavaScript code here document.addEventListener('DOMContentLoaded', () => { console.log('Page loaded!'); // Example: Change text color on click const heading = document.querySelector('h1'); if (heading) { heading.addEventListener('click', () => { const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); heading.style.color = randomColor; }); } });
Settings
Editor Settings
Font Size
16px
Tab Size
2 spaces
4 spaces
8 spaces
Auto-complete brackets
Line wrapping
Auto-refresh preview
Theme
Default
Dark
Light
Monokai
Animation Settings
Enable animations
Animation Speed
1x
Preview
Refresh Preview
Toggle Preview
Line: 1, Column: 1
HTML | 4 spaces
Console
Console
Clear