Online HTML playground with live preview and modern code editor
Website • Features • Demo • Getting Started • Tech Stack • Issues
HTML Compiler is a modern, feature-rich online HTML editor designed to make web development accessible and enjoyable for everyone. Whether you're a beginner learning your first lines of code or an experienced developer testing a quick idea, we provide a powerful, user-friendly environment to bring your ideas to life.
Visit our website: https://htmlcompiler.top
- Real-time Preview: See your HTML changes instantly with live preview mode
- Manual Update: Update preview on-demand for better performance control
- Syntax Highlighting: Powered by CodeMirror 6 for the best editing experience
- Code Editor: Professional-grade code editor with IntelliSense support
- Dark & Light Themes: Elegant theme switching with system preference detection
- Mobile Responsive: Fully responsive design for coding on any device
- Fullscreen Mode: Distraction-free editing with fullscreen preview
- Quick Download: Download your HTML files instantly
- Sandboxed Preview: Secure preview environment with iframe sandboxing
- Preset Templates: Start quickly with included example HTML templates
- Clean Interface: Modern, intuitive UI designed for productivity
- Keyboard Shortcuts: Efficient coding with keyboard navigation
Experience HTML Compiler live at https://htmlcompiler.top
- Next.js 16 - React framework with App Router
- React 19 - Modern React with experimental features
- TypeScript 5 - Type-safe development
- Tailwind CSS 4 - Utility-first CSS framework
- CodeMirror 6 - Powerful code editor
- shadcn/ui - Beautiful, accessible UI components
- Biome - Fast formatter and linter
- Lucide React - Beautiful icon library
- Cloudflare Workers - Edge deployment
- Node.js 18+ - Latest LTS version recommended
- pnpm - Fast, disk space efficient package manager
-
Clone the repository
git clone https://github.com/SymphonyIceAttack/htmlcompiler.git cd htmlcompiler -
Install dependencies
pnpm install
-
Start development server
pnpm dev
-
Open your browser Navigate to http://localhost:3000
# Build for production
pnpm build
# Start production server
pnpm start
# Build for Cloudflare Workers
pnpm build:worker
# Preview Cloudflare build
pnpm previewhtml-compiler/
├── app/ # Next.js App Router
│ ├── page.tsx # Home page with HTML compiler
│ ├── layout.tsx # Root layout
│ ├── posts/ # Blog section
│ └── globals.css # Global styles
├── components/ # React components
│ ├── html-compiler.tsx # Main editor component
│ ├── blog/ # Blog-related components
│ ├── ui/ # shadcn/ui components
│ └── *.tsx # Feature components
├── lib/ # Utilities
│ ├── directus.ts # CMS client
│ └── utils.ts # Helper functions
├── public/ # Static assets
├── logo.svg # Project logo
└── Configuration files...
The main editor component featuring:
- CodeMirror 6 integration with HTML language support
- Split-pane layout with adjustable editor/preview ratio
- Live preview with sandboxed iframe
- Theme switching and responsive design
- File download functionality
Integrated blog powered by Directus CMS:
- Server-side rendering for optimal performance
- Markdown processing with syntax highlighting
- Automatic table of contents generation
- Draft mode for content preview
pnpm dev- Start development serverpnpm build- Build for productionpnpm start- Start production serverpnpm lint- Run Biome linterpnpm format- Format code with Biomepnpm build:worker- Build for Cloudflare Workerspnpm preview- Preview Cloudflare buildpnpm deploy- Deploy to Cloudflare Workers
This project is optimized for Cloudflare Workers deployment:
# Build for Cloudflare
pnpm build:worker
# Preview locally
pnpm preview
# Deploy to Cloudflare
pnpm deployThe project can also be deployed on:
- Vercel - Zero-config deployment
- Netlify - JAMstack hosting
- GitHub Pages - Static site hosting
We welcome contributions! Here's how you can help:
- 🐛 Bug Reports: Report bugs through GitHub Issues
- 💡 Feature Requests: Suggest new features or improvements
- 📝 Documentation: Improve documentation and examples
- 🔧 Code Contributions: Submit pull requests for bug fixes or features
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Run linting and formatting:
pnpm lint && pnpm format - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow the existing code style
- Use TypeScript for type safety
- Run Biome linting before committing
- Add tests for new features (when test framework is added)
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js team for the amazing React framework
- CodeMirror for the excellent code editor
- shadcn for beautiful UI components
- Tailwind CSS for the utility-first CSS framework
- Directus for the headless CMS solution
- Website: https://htmlcompiler.top
- GitHub Issues: Report bugs or request features
- Email: 1994370030@qq.com
- Code Snippets Library: Pre-built HTML templates and components
- Collaborative Editing: Real-time collaboration features
- Export Options: Export to multiple formats (PDF, image, etc.)
- Plugin System: Extensible plugin architecture
- Performance Optimization: Further performance improvements
- Mobile App: Native mobile application
- User Accounts: Save and sync projects across devices