A browser-based Live Code Editor built using HTML, CSS, and JavaScript. WebLab allows users to write, style, and execute code in real time while instantly previewing the output, making it a lightweight playground for front-end experimentation and learning.
🔗 https://web-lab-six-alpha.vercel.app/
- Live HTML editing and rendering
- Real-time CSS styling updates
- Instant JavaScript execution
- Interactive output preview using iframe
- Clean and responsive user interface
- Separate editors for HTML, CSS, and JavaScript
- Beginner-friendly project structure
- HTML5
- CSS3
- JavaScript (ES6)
- DOM Manipulation
- iframe
- Enter HTML code in the HTML editor.
- Add CSS styles in the CSS editor.
- Write JavaScript code in the JavaScript editor.
- The application automatically updates the preview whenever you type.
- HTML and CSS are injected into an iframe.
- JavaScript is executed inside the iframe.
- The rendered output is displayed instantly.
WebLab/
│
├── screenshots/
│ ├── CodePen-Initial-Screen.png
│ └── CodePen-Working.png
│
├── index.html
├── style.css
├── script.js
└── README.md
- Clone the repository:
git clone https://github.com/your-username/weblab.git- Navigate to the project folder:
cd weblab- Open
index.htmlin your browser.
- Syntax highlighting
- Dark/Light theme toggle
- Auto-save using Local Storage
- Download code as HTML file
- Copy code button
- Full-screen editor mode
- Multiple editor themes
This project helped practice:
- DOM Manipulation
- Event Handling
- JavaScript Functions
- Dynamic HTML Injection
- iframe Integration
- Real-Time Rendering
- HTML, CSS, and JavaScript Interaction
WebLab demonstrates how modern online code playgrounds work by combining HTML, CSS, and JavaScript into a live editing environment. The project provides hands-on experience with browser rendering, event-driven programming, and dynamic content generation.
This project is open-source and available for learning and educational purposes.