HTMstudio

Drop any HTML. Get a Next.js app.

Design Tools

Productivity

SaaS

What This Is HTMstudio (htmconverter.com) is a fully functional, live SaaS platform that converts any HTML or HTM file into a complete, immediately-runnable Next.js 14 App Router project. A developer drops in a self-contained HTML file, the platform runs it through a nine-stage conversion pipeline, and produces a production-quality ZIP they can unzip, run npm install && npm run dev, and have a working React app within seconds. This is a real, working product with a live domain, authenticated users, a published VS Code extension, a REST API, and Square payment processing already wired in. It is early-stage — 3 paying customers — but everything is built. The product works. The buyer is not acquiring a codebase to finish; they are acquiring a finished SaaS with a cold audience and immediate usability. The Problem It Solves Every web developer who has ever been asked to “rebuild this site in React” knows the pain. You have the original HTML — maybe saved from a live production site — and you need to turn it into components, extract the CSS, rename obfuscated class names into something readable, wire up interactivity, extract images, and assemble a project that actually runs. Done manually, this takes hours per page. HTMstudio does it in under 3 seconds. The tool is specifically designed around pages captured with SingleFile — a free Chrome/Firefox/Edge extension that saves any live webpage, including pages behind login, as a single self-contained HTML file with all styles, fonts, and images inlined. HTMstudio ingests that file and processes it end-to-end. The Nine-Stage Conversion Pipeline Stage 1 — CSS Extraction (static + runtime-injected) Every block is extracted and merged into ConvertedPage.css, including runtime-injected styles. SingleFile marks injected styles in ways HTMstudio detects and preserves. These are moved out of JSX entirely so layout fidelity is preserved. On complex pages like search results, this can increase extracted CSS from ~45 KB to 160+ KB and restore multi-column layouts correctly. Stage 2 — Design Token Extraction CSS variables (--color-, --spacing-, --font-*) are extracted from :root and grouped into styles/tokens.css. Only created when tokens exist, avoiding unnecessary files while preserving design systems when present. Stage 3 — CSS De-obfuscation and Semantic Naming Obfuscated class names (e.g. s17s3xpb, _3TG4x) are detected via pattern analysis and mapped to semantic equivalents like card, flex, row, button, icon, panel, or container. A frequency-based resolver ensures stable naming and avoids collisions via suffixing (-1, -2) only when required. Renaming is applied consistently across JSX and CSS, with a full css-class-map.json generated for traceability. Stage 4 — JSX Conversion and Attribute Normalisation The DOM is converted node-by-node into valid JSX. This includes class → className, for → htmlFor, tabindex → tabIndex, and full SVG camelCasing (stroke-width → strokeWidth, clip-path → clipPath). Inline styles are converted into JS objects. Event handler strings are stripped and replaced with typed TODO stubs. ARIA states are normalized to safe defaults to avoid broken expanded UI on load. Stage 5 — Component Decomposition Semantic landmarks (<nav>, <header>, <main>, <aside>, <footer>) are extracted into separate .tsx components. Naming is derived from aria-label, role, or id instead of arbitrary numbering. For example, aria-label="Primary navigation" becomes PrimaryNavigationNav.tsx, while id="sidebar" becomes SidebarAside.tsx. Stage 6 — ARIA Interactivity Injection Recognized ARIA patterns are converted into functional React state logic: tablist/tab → controlled tabs with useState aria-expanded/controls → accordion toggle aria-haspopup → dropdown system dialog/aria-modal → modal open/close system role="switch" → toggle state progressbar → live progress state tooltip patterns → hover/focus handlers data-state → generic UI state machine Each injected behavior automatically adds "use client" and imports useState from React, producing working interactivity without manual wiring. Stage 7 — Base64 Image and Favicon Extraction All embedded base64 assets are extracted into /public/images with deduplication. Identical assets referenced multiple times are stored once. Favicons are decoded using binary signature detection rather than MIME type, ensuring correct output formats even when mislabeled. Stage 8 — Prettier Formatting Output code is normalized with Prettier (printWidth 100, consistent formatting rules) after all transformations so renamed classes and generated components remain stable and readable. Stage 9 — Bundle Assembly All generated files are packaged into a binary-safe ZIP archive containing real assets (Uint8Array-based encoding for images). The result is a fully runnable Next.js project requiring no manual setup. What Comes Out of the ZIP Each conversion outputs a complete App Router project: app/layout.tsx with full metadata extraction (title, OG tags, Twitter cards, favicon, theme-color) app/page.tsx as entry route app/globals.css with extracted styles app/error.tsx, loading.tsx, not-found.tsx Components include: Primary converted page component (TypeScript, de-obfuscated, interactive hooks injected) One component per extracted landmark ClientInit.tsx for hydration-safe initialization _interactions.ts mapping original DOM events for debugging and traceability Styles include: Component-scoped CSS files Global component rules with pseudo-selectors and media queries Optional tokens.css for design systems Assets include: public/images with deduplicated extracted media favicon in correct decoded format Config includes: package.json next.config.ts with inferred image domains tsconfig.json (strict mode + aliases) ESLint + Prettier configs css-class-map.json asset-manifest.json report.json original.html snapshot Access Methods Web app: htmconverter.com — upload HTML, name project, scan, preview, download ZIP. VS Code extension: available via marketplace (htmstudio.htmstudio). Right-click any HTML file or use shortcut to convert instantly inside editor. Same account system, same output pipeline. REST API: POST /api/v1/convert accepts HTML payloads (up to 6 MB), returns full structured conversion output, file tree, and report JSON. Credits are deducted server-side before processing. Pricing and Revenue Model Credit-based system. Users purchase conversion packs that never expire. Each account includes one free full conversion without requiring payment details. Optional storage plans allow users to re-download past conversions from a dashboard via a monthly manual subscription (no auto-renewal). Payments are handled via Square, including checkout, webhook validation, and credit deduction logic fully implemented. What’s Honest This is early-stage software. There is no significant revenue history or scale data. What exists is a fully built SaaS product with working infrastructure: conversion engine, authentication, payment system, API, and VS Code integration. The engineering-heavy portion is complete. The remaining challenge is distribution, adoption, and scaling usage rather than building core functionality.