HTML Live
Hey, I’m Aashir Shaikh, and HTML Live is a project that started as a simple idea and grew into something I’m really proud of—all thanks to a mix of my teaching struggles and some serious AI teamwork. I teach web development to students from 8th to 12th grade, and I kept running into the same issue: they’d code their HTML, CSS, and JavaScript in Notepad or VS Code, save it, open it in a browser, then go back to edit, save, and refresh again. It was a slog, and I could see it draining their excitement. I wanted a tool where they could type and see their work come alive right there—no back-and-forth. That’s where HTML Live started.
Here’s the kicker: I didn’t build it the old-school way. I’m not some coding guru who spent months on this. I just grabbed ChatGPT-4 and Grok 3, threw them some prompts about what I needed, and they spat out most of the code—pure HTML, CSS, and JavaScript. I only had to tweak a few things to make it mine. This version, 2.8.3 from March 19, 2025, shows how fast you can solve a problem with AI. I call it “vibe coding”—no deep coding skills, just ideas and AI doing the work in way less time.
At first, HTML Live was just for desktops. I thought that’d be enough since we mostly used computers in class. But then my students started pulling it up on their phones, and it was a mess—the layout didn’t work, everything was squished. They were struggling, and I couldn’t let that slide. So, I went back to ChatGPT and Grok, asked them to make it responsive, and after some updates, it now works like a charm on desktops, tablets, and mobiles. On phones, it stacks everything with tabs to switch between HTML, CSS, JS, and the output. On tablets, it’s a neat two-column grid. On desktops, it’s all side-by-side. Seeing it adapt to whatever they’re using feels like a win.
One feature I’m glad I added is the toggle window option—you know, those buttons or shortcuts like Ctrl+H to hide the editors they’re not using. That came straight from my classroom. My 8th graders start with just HTML—they don’t touch CSS or JS yet. Then in 9th grade, we bring in CSS, and by 11th, they’re tackling JavaScript too. I didn’t want the younger kids confused by empty CSS and JS boxes, or the older ones distracted by stuff they’d already mastered. So, I told the AI to let me hide those editors, and now it’s perfect—they focus on what they’re learning, nothing extra.
Another big one was auto-saving. I’d see my students accidentally close the browser—poof, gone. Or the power would cut out in the middle of class, and they’d lose everything they’d coded. It was heartbreaking watching them start over, especially when they were just getting the hang of it. I asked the AI to save their work in the browser’s localStorage, and now it’s there waiting for them when they come back. No more tears over lost code.
The app itself is pretty straightforward. There’s a window for HTML, one for CSS, one for JS, and an output area that updates live as they type—unless they toggle it off with Ctrl+L and use the “Run” button instead. It’s got dark and light modes because those long sessions need some eye relief. They can drag in files to import code, download everything as an HTML file with Ctrl+S, and even pick colors with a little tool I added after too many “what’s the code for blue?” questions. There’s a console for JS logs and errors, and stats at the bottom of each editor—lines, words, characters—with a hover for more details. It’s all about keeping them engaged and moving forward.
Features
- Live Preview:
Code changes in the HTML, CSS, or JavaScript editors are reflected instantly in the output window when live preview is enabled (toggleable with Ctrl+L or a button). A manual "Run" button allows users to update the output on demand when live preview is disabled.
- Multi-Editor Interface:
Separate text areas for HTML, CSS, and JavaScript, each with a header and stats display (lines, words, characters, with hover tooltips for additional details like empty lines and longest line length). Editors support dark and light modes for comfortable viewing.
- Responsive Design:
Mobile (≤768px): Tabs to switch between editors and output, with a vertical layout. Tablet (769px–1024px): Grid layout with two columns. Desktop (>1024px): Side-by-side editors and output with adjustable visibility.
- Code Persistence:
Saves code to localStorage, automatically loading it on page refresh.
- File Import:
Supports importing .html, .css, and .js files via drag-and-drop or file input. For HTML files, it extracts <style> and <script> content into the respective editors.
- Download Functionality:
Exports the combined HTML, CSS, and JavaScript as a single .html file (Ctrl+S or download button).
- Color Picker:
A built-in tool to select colors via a native picker or HEX input, with options to copy in HEX, RGBA, or HSL formats.
- Customization and Controls:
Show/Hide Editors: Buttons (Ctrl+H, Ctrl+C, Ctrl+J) to toggle visibility of HTML, CSS, and JS editors on desktop. Layout Toggle: Switch between horizontal and vertical layouts. Full-Screen Output: View the output in full-screen mode (with fallback for iOS). Dark/Light Mode: Toggle between themes (Ctrl+D). Clear All: Reset all editors and output.
- Console Output:
Displays console.log and error messages from JavaScript execution in a dedicated console area below the output.
- Stats and Tooltips:
Real-time stats for each editor (lines, words, characters) with hover tooltips showing empty lines and longest line length.
- Keyboard Shortcuts:
Ctrl+S: Download code, Ctrl+L: Toggle live preview, Ctrl+D: Switch themes. Ctrl+H/C/J: Show/hide editors.
- Donation Popup:
Encourages support via Google Pay with a QR code and UPI details, triggered on file import or download.
- Accessibility:
Includes ARIA labels and tooltips for buttons, ensuring better usability for screen readers.
- External Resources:
Links to credits to AI contributors (ChatGPT-4 and Grok).
Uses
- Educational Tool:
Perfect for teaching HTML, CSS, and JavaScript to beginners, allowing students to experiment with syntax and see immediate results. Simplifies the learning curve by eliminating the need for external editors or browsers.
- Prototyping:
Useful for quickly testing small web projects or snippets without a full development setup.
- Self-Learning:
Enables hobbyists or self-learners to practice web development in a sandboxed, user-friendly environment.
- Demonstrations:
Teachers or presenters can showcase code behavior live during lessons or workshops.
- Debugging:
The console output aids in identifying JavaScript errors or logs for basic debugging.
- AI-Driven Development Example:
Serves as a proof-of-concept for "vibe coding," showing how anyone can create functional software using AI with minimal coding knowledge.
Pros
- Ease of Use:
Intuitive interface with live feedback reduces the complexity of learning web development. No external software or file management required.
- AI-Powered Creation:
Built almost entirely by prompting ChatGPT-4 and Grok 3, with minor tweaks by Aashir, highlighting how AI can empower non-coders to build apps quickly. Demonstrates the potential of "vibe coding" to solve problems efficiently with minimal time investment.
- Educational Focus:
Tailored for students, addressing a specific teaching challenge with a practical, AI-crafted solution.
- Feature-Rich:
Offers a wide range of tools (color picker, file import/export, stats, dark mode) for a pure HTML/CSS/JS app, all generated via AI prompts.
- Responsive Design:
Seamlessly adapts across devices, enhancing accessibility for classroom or remote learning.
- Performance:
Lightweight and fast, relying solely on client-side technologies without server dependencies.
- Persistence:
Auto-saving to localStorage ensures work isn’t lost on refresh.
- Community Support:
Donation popup and credits encourage user contributions and acknowledge AI assistance.
My Take
HTML Live is my little classroom hero. It started as a desktop fix for a teaching headache, but when my students struggled on phones, I made it work everywhere. The toggle feature keeps it focused for each grade, and auto-saving stopped those “I lost it!” moments. I couldn’t have done it without ChatGPT-4 and Grok 3—they took my prompts and built this in no time, with me just nudging it into shape. It’s not some high-tech IDE, but it doesn’t need to be—it’s for my students, and it works. Seeing them code and grin as it pops up live? That’s why I did this. Plus, it’s crazy to think AI let me—a guy with basic skills—whip this up so fast. If I can vibe my way to this, anyone can.
