HTMLRunner by NellowTCS

About HTMLRunner

HTMLRunner is a browser-based code editor designed for writing, testing, and debugging HTML, CSS, and JavaScript with real-time execution. Built with TypeScript, it features syntax highlighting powered by CodeMirror, code formatting with Prettier, and resizable panels using Split.js.

Ideal for developers and learners, HTMLRunner offers a responsive interface, integrated console, and live preview for seamless web development.

Features

Web Code Editor: HTML, CSS, and JavaScript editors with syntax highlighting and auto-completion.
Live Code Execution: Real-time preview with auto-run mode for instant feedback.
Console Integration: Debug with real-time JavaScript console output, log filtering, and stack traces.
Code Formatting: Format code using Prettier (note: formatting currently unavailable in web version).
Export Functionality: Download projects as ZIP files.
Responsive Split-Panel Layout: Adjustable panels for code and preview using Split.js.
Dark/Light Mode: Toggle between themes for comfortable coding.
Persistent State: Automatically saves your work.
Keyboard Shortcuts: Streamline coding with shortcuts like Ctrl+Enter to run code.
Mobile Responsive: Adapts to smaller screens for mobile use.

Gallery

Getting Started

Option 1: Use Online

1. Visit the Live Demo.
2. Write HTML, CSS, and JavaScript in the respective editor tabs.
3. Enable auto-run or click "Run" for live preview.
4. Debug using the integrated console and export your project as a ZIP file.

Option 2: Run Locally

1. Clone the repository:

git clone https://github.com/HTMLToolkit/HTMLRunner.git

2. Navigate to the Build directory: cd HTMLRunner/Build
3. Install dependencies: npm install
4. Build and serve: npm start or build for production: npm run build
5. Open in a modern browser to start coding.

Option 3: Single File Local Version

1. Download HTMLRunner from the Releases page.
2. Open the file in a modern browser (Chrome, Safari, Firefox, Edge).
3. Start using the editor.

Note: The single-file version is available but large due to Webpack; the online version is recommended.

Keyboard Shortcuts

Shortcut	Action
Ctrl/Cmd + Enter	Run code
Ctrl/Cmd + F	Format current editor
Ctrl/Cmd + /	Toggle comment
Tab / Shift + Tab	Indent / Unindent

Dependencies

CodeMirror 5 - Syntax highlighting and code editing

Prettier - Code formatting

Split.js - Resizable split-panel layout

Webpack - Code bundling and optimization

No server-side dependencies; runs entirely in the browser.

Contributing

Contributions are welcome! To contribute:
1. Fork the repository.
2. Create a feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m "Add some AmazingFeature").
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

Report bugs or request features via the Issues page.

License

HTMLRunner is licensed under the GNU General Public License v3.0. See the LICENSE file for details.

Acknowledgements

Built by NellowTCS.
Powered by CodeMirror, Prettier, Split.js, and Webpack.
Inspired by modern web development tools.