# HTMstudio

> Convert any webpage to a production-ready Next.js 14 App Router project in under 3 seconds.

HTMstudio is a web-based tool that converts HTML files (including saved pages from browser extensions like SingleFile) into clean, deployable Next.js applications. It handles de-obfuscation, CSS extraction, JSX conversion, and produces a complete project ZIP with all config files included.

## What it does

- Converts `.htm` / `.html` files to Next.js 14 App Router components
- De-obfuscates hash-based class names (e.g. `s17s3xpb`) into readable semantic names
- Extracts and scopes CSS — no style collisions
- Formats output with Prettier automatically
- Enriches CSS using Puppeteer to capture JS-applied styles
- Produces a downloadable ZIP with: component, layout, page, globals.css, tsconfig, next.config.ts, package.json, ESLint, Prettier, Vercel config, middleware, README
- Bulk conversion: convert multiple files in one run
- Live preview of the converted component before download
- Asset manifest: catalogues every external image, font, script

## Pricing

- Free tier: 1 conversion, no credit card required
- Credits never expire
- Starter: £29 / 10 credits
- Basic: £59 / 25 credits
- Standard: £119 / 60 credits (~£1.98/conversion)
- Pro: £249 / 150 credits
- Agency: £549 / 400 credits (~£1.37/conversion)

## How to use

1. Install the SingleFile Chrome extension (https://chromewebstore.google.com/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle)
2. On any page you want to convert, click the SingleFile icon — it downloads a self-contained `.html` file
3. Go to https://htmstudio.io/converter
4. Drop the `.html` file onto the converter
5. Review the live preview and JSX output
6. Click Download ZIP
7. Unzip, run `npm install && npm run dev`

## Authentication

- Sign up at https://htmstudio.io/sign-up
- Email + password or magic link
- Two-factor authentication available

## Technical stack

- Frontend: Next.js 14 (Pages Router), React 18
- Auth: Supabase
- Database: PostgreSQL via Supabase + Prisma ORM
- Payments: Stripe (credit packs)

## Pages

- [Home](https://htmstudio.io/)
- [Converter](https://htmstudio.io/converter)
- [Pricing](https://htmstudio.io/pricing)
- [Sign up](https://htmstudio.io/sign-up)
- [Sign in](https://htmstudio.io/sign-in)