A powerful, browser-based HTML/CSS/JavaScript code editor and live preview tool. Write, test, and debug your web code with real-time execution and an integrated console.
- HTML Editor with syntax highlighting and auto-completion
- CSS Editor with live styling preview
- JavaScript Editor with linting and error detection
- Syntax Highlighting powered by CodeMirror
- Auto-indentation and bracket matching
- Real-time Preview of your HTML/CSS/JS code
- Auto-run Mode for instant feedback as you type
- Error Handling with detailed stack traces
- Console Integration for debugging
- Integrated Console with log filtering (log, error, warn, info)
- Code Formatting using Prettier
- Export Functionality - Download your project as a ZIP file
- Copy to Clipboard for individual editors or console output
- Responsive Split-Panel layout
- State Management - Uses the Sairin path-based reactive store to manage editor content, UI state, and persistence.
- Dark/Light Mode toggle
- Tabbed Interface for easy navigation
- Persistent State - Your work is automatically saved
- Keyboard Shortcuts for power users
- Mobile Responsive design
- Real-time JavaScript console output
- Object inspection with expandable views
- Stack trace display for errors
- Filter logs by type (log, error, warn, info)
- Copy individual messages or entire console
- Timestamp for each log entry
Visit the live version at: https://htmltoolkit.github.io/HTMLRunner/
You can build a single, standalone HTML file with all assets embedded:
npm run build:singleThis creates a self-contained file perfect for sharing or offline use.
- Write HTML in the HTML editor tab
- Style with CSS in the CSS editor tab
- Add JavaScript in the JS editor tab
- Click "Run" or enable Auto-run for live preview
- Debug using the integrated console
- Export your project when ready
Ctrl/Cmd + Enter- Run codeCtrl/Cmd + FandCtrl/Cmd + H- Find or Replace codeCtrl/Cmd + /- Toggle commentTab/Shift + Tab- Indent / Unindent
HTMLRunner comes with a demo project to get you started:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<script src="main.js"></script>
<h1>Hello, HTMLRunner!</h1>
<p>This is a demo page.</p>
<button onclick="testFunction()">Click me!</button>
</body>
</html>CSS:
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
}
button {
background: #2196f3;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #1976d2;
}JavaScript:
function testFunction() {
console.log('Button clicked!');
console.warn('This is a warning');
console.error('This is an error');
console.info('This is an info');
console.log('Object:', { name: 'Alice', age: 25, hobbies: ['coding', 'reading'] });
}- Code Editor: CodeMirror 6
- Code Formatting: Prettier
- UI Layout: Split.js for resizable panels
- Build Tool: Vite for fast compilation
- PWA Support: vite-plugin-pwa for offline support
- Single File Build: vite-plugin-singlefile for standalone HTML
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/HTMLToolkit/HTMLRunner.git cd HTMLRunner/Build -
Install dependencies
npm install
-
Start development server
npm run dev
This starts Vite's dev server with hot reloading at
http://localhost:5173 -
Build for production
npm run build
Output is in
dist/ -
Build single-file standalone version
npm run build:single
Creates a self-contained HTML file with all assets embedded
-
Preview production build
npm run preview
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
HTMLRunner works on all modern browsers:
- ✅ Chrome 80+
- ✅ Firefox 75+
- ✅ Safari 13+
- ✅ Edge 80+
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
⭐ If you find HTMLRunner useful, please consider giving it a star on GitHub!
For questions, suggestions, or issues, please open an issue on GitHub.