Release History & Evolution Log

Changelog & Version Evolution

Follow the story and updates of Live HTML Editor, from a single custom code snippet built inside Systeme.io to a full browser workspace built in Google AI Studio.

3 Milestones Documented

v0.04Latest Release

Released: 27 September 2026

Precision Text Slots & Bulletproof Undo Engine

Google AI Studio • React 19 • TypeScript • Tailwind CSS 4

Resolved complex text editing on composite DOM elements containing nested styled spans, badges, and inline tags. By decomposing composite headings and buttons into isolated text slots, each segment is edited independently without risking style bleed or accidental tag deletion. Integrated an authoritative pre-inspection undo transaction boundary so visual edits can be cleanly reverted with Ctrl+Z.

Focus: Introduced Segmented Smart Text Slots for multi-styled elements and a unified pre-inspection undo boundary for 100% style preservation.

DOM SafetySegmented Slots

Style ProtectionZero Tag Bleed

Undo EngineUnified Transaction

Verification100% AST Tested

DOM Inspection & Precision Text Editing

Segmented Smart Text Slots

When inspecting composite elements (like headings with styled colored spans), the editor presents dedicated text inputs for base text, styled spans, and suffix text, preserving all tag attributes and classes.

Zero-Style-Bleed Mutation Engine

Text changes are routed strictly to target text nodes or isolated inner elements, preventing styled wrapper tags from collapsing or bleeding into surrounding sentences.

History & Undo Reliability

Pre-Inspection Transaction Lock

The inspector modal automatically locks an authoritative undo boundary in Monaco the moment it opens, grouping all modal adjustments into a single reversible atomic transaction.

Instant Preview Synchronization on Undo

Reverting changes via Ctrl+Z or the header Undo button synchronizes the live preview iframe instantly without leaving residual DOM mutations.

v0.03Milestone

Released: 31 August 2026

The Google AI Studio Engine Overhaul

Google AI Studio • React 18 • TypeScript • Tailwind CSS

I took everything I learned from my daily use of the early prototypes and completely rebuilt the editor from the ground up using Google AI Studio. It’s now a fully-featured, friendly browser workspace! You get a powerful code editor, live error checking, a magic 1-click button to fix your Systeme.io pages, easy theme and font pickers, mobile and tablet previews, and the ability to manage multiple pages and download them all instantly as a ZIP file.

Focus: Rebuilt the entire tool from a single HTML snippet into a full browser application and multi-tool workspace built inside Google AI Studio.

Editor EngineMonaco Dual-Pane

CompatibilitySIO 1-Click Fix

Design ToolsFonts & Tokens

Project ExportMulti-Page ZIP

Workspace & Code Engine Upgrades

Professional Monaco Code Editor

Integrated a full Monaco editor with accurate syntax highlighting, automatic indentation, line numbering, and bracket matching.

Real-Time Syntax Diagnostics

Instant error checking in the bottom panel with direct jump-to-line navigation for syntax issues and unclosed tags.

Custom Editor Modes

Choose the right setup for your build in one click: SIO Mode for verified Systeme.io pages, basic Raw HTML, or a Full Workspace with HTML, CSS, and JavaScript support for complex web builds.

Multi-Project & Page Workspace

Manage multiple projects and pages simultaneously. Create, rename, switch, and manage HTML files with changes saved automatically to your local browser storage.

Import & Export Flexibility

Export and upload single .html pages, full .zip archives, individual .project files, or back up your entire local .workspace.

Time Travel History

Scrub through a timeline of your recent code edits. Easily undo or redo changes with a dedicated visual history log.

Systeme.io Compatibility Assistant

1-Click SIO Auto-Fix Engine

Automatically strips document wrappers (<html>, <head>, <body>, <!DOCTYPE>), converts external stylesheets to safe @imports, applies zero-specificity CSS scoping, and injects freeze-proof script guards.

AI Prompt Fallback Guide

Access specialized AI prompt instructions to help your LLM regenerate clean, properly scoped code when auto-fix cannot resolve highly complex or heavily nested structures.

Visual Design, Typography & Preview Tools

Live Theme Styling

Customize your brand colors and fonts all in one place, with an instant real-time live preview.

Typography Inspector

Click on any text element in the live preview to instantly identify the font being used, and change the typography globally with live visual feedback.

Responsive Stage Controls (Desktop, Tablet, Mobile)

Switch smoothly between desktop, tablet, and mobile viewports, and open distraction-free fullscreen previews.

AI Models Directory & Quick Links

Curated AI Coding Models Directory

Direct access, specifications, and quick links to top AI models for code generation including Gemini, Claude, GPT, DeepSeek, Grok, and more.

v0.02Interactive Preview Milestone

Released: 14 August 2026

Direct In-Place Visual Editing

Single-File HTML5 / CSS3 / JavaScript (Built & Hosted on Systeme.io)

After using v0.01 daily, I noticed that opening an AI chat or hunting through lines of code just to fix a tiny typo, swap an image link, or adjust a button label took too long. In v0.02, I added direct visual editing right inside the preview so I could click and change elements instantly.

Focus: Made the live preview interactive so I could edit text, links, and image URLs directly in the rendered page without re-prompting AI.

Direct EditingText, Links & Images

Element ControlHeadings & Buttons

HostingSysteme.io

WorkflowInstant Tweaks

Interactive Preview & Direct Editing

Direct In-Place Text & Heading Editing

Click directly on any headline or paragraph in the live preview to edit the wording on the spot.

Direct Link and Button URL Editing

Update destination links, anchor tags, and button actions directly inside the rendered preview.

Image Source URL Replacement

Inspect and replace image URLs directly in place without searching for <img> tags in the code.

Two-Way Code Sync

Changes made visually in the preview automatically update the HTML source code.

v0.01Original Prototype

Released: 23 April 2026

The Raw HTML & SIO Validator Prototype

Single-File HTML5 / CSS3 / JavaScript (Built & Published in Systeme.io)

While building custom pages and sections for Systemize Space and the SIO Vault inside Systeme.io, I used the Raw HTML element with AI models like Claude, ChatGPT, and Gemini. Constantly saving funnels just to check mobile views was slow, and outer document tags from AI broke the builder. I built v0.01 with dark and light mode, desktop and mobile viewports, and the original SIO: Valid checker.

Focus: A single-file browser utility I built and published in Systeme.io to instantly preview AI-generated HTML and validate it for the Raw HTML element.

OriginSysteme.io Workflow

Theme SupportDark & Light Mode

Device SwitcherDesktop & Mobile

ValidationSIO: Valid Checker

Instant Live Preview & Device Testing

Talk with AI → Test Live → Publish Workflow

Paste code from AI into the editor, see it rendered immediately, test mobile layouts, and copy clean code to Systeme.io.

Responsive Desktop & Mobile Viewport Switcher

Switch between full desktop and 375px mobile viewports instantly to inspect mobile layouts without reloading funnel steps.

Dark & Light Mode Support

Started from day one with built-in dark and light mode themes for comfortable day and night coding.

Instant In-Browser Rendering

Zero save cycles or server roundtrips, with instant real-time DOM rendering directly in the browser tab.

Systeme.io Compatibility Checker

Built-in SIO Validation Engine (SIO: Valid)

Detects incompatible outer document tags (<!DOCTYPE>, <html>, <head>, <body>) that AI models often output, preventing layout breakage inside the Systeme.io page builder.

Built & Published in Systeme.io for SIO Vault

Originally created as a single-file custom code project built and published inside Systeme.io to accelerate creating, testing, and sharing custom code with SIO Vault members and the community.

Experience The Latest Release

Ready to test your code in Version 0.03?

Paste your HTML snippets from Gemini, Claude, or any AI model directly into the live html editor and see them rendered instantly with zero bloat.

Open HTML Editor v0.03 Read The Story