codemeld

CodeMeld

Bidirectional converter between HTML/CSS/JS and modern frameworks (React, Next.js, Vue, Svelte, Angular).

Demo — Real Conversion Result

Original HTML site served locally:

After running codemeld convert — the same site running as a Vite + React + TypeScript app:

Both screenshots captured with Playwright. The converted React app is pixel-perfect compared to the original HTML — layout, styles, animations, and interactive elements all preserved.

Features

• Bidirectional Conversion — Convert HTML/CSS/JS to React and reverse-convert React/Vue/Svelte/Angular back to static HTML
• HTML Parsing — Extracts structure, inline styles, inline scripts, linked resources using Cheerio
• HTML to JSX Conversion — Converts class to className, for to htmlFor, self-closes void elements, converts inline styles to object syntax, escapes literal braces in text content
• CSS Processing — Supports global CSS and CSS Modules mode, rewrites asset URLs, merges stylesheets
• JavaScript Analysis — Detects mutable variables to useState, DOM event listeners to event handlers, DOMContentLoaded to useEffect, form handlers with proper event typing, DOM mutations to React state
• Smart Component Extraction — Automatically splits large HTML files into smaller, reusable React components based on semantic sections (<nav>, <header>, <section>, <footer>, etc.)
• Custom React Hooks — Generates useFetch, useLocalStorage, useInterval, useTimeout hooks when patterns are detected
• Tailwind CSS Detection — Automatically detects and configures Tailwind CSS (or force/disable with flags)
• Multi-Framework Support — Target React, Next.js, Vue, Svelte, or Angular
• Project Scaffolding — Generates complete Vite + React + TypeScript project with proper config files
• Multi-page Support — Converts multiple HTML pages into separate React components with React Router
• Hash-based Routing — Automatically detects and preserves hash-based SPA routing
• Asset Handling — Discovers and copies images, fonts, and other assets to the correct directories
• Build Verification — Optional --verify flag installs deps and runs vite build to validate output
• AI-Powered Refinement — Optional --ai flag uses Claude to fix build errors, enhance components, and improve code quality
• Visual Comparison — Optional --visual-compare flag takes Playwright screenshots of original vs converted sites
• Interactive AI Chat — Claude Code-style TUI for iterating on your project with AI assistance
• SEO Generation — Sitemap, robots.txt, web manifest, and meta tag components
• Accessibility Enhancement — ARIA labels, semantic HTML, skip navigation
• Performance Optimizations — React.memo, lazy loading, code splitting
• Interactive Pattern Detection — Auto-detects scroll animations, tabs, accordions, hamburger menus and generates vanilla JS for deconverted output

Installation

npm install -g codemeld

Or use directly with npx:

npx codemeld <input-dir> <output-dir>

Or clone and build from source:

git clone https://github.com/hansade2005/html-to-vite-react.git
cd html-to-vite-react
npm install
npm run build

Then run with:

node dist/cli.js convert <input-dir> <output-dir>

Quick Start

1. Convert a single-page HTML site

codemeld ./my-website ./my-react-app

This reads all .html, .css, and .js files from ./my-website, converts them into React components, and outputs a complete Vite project in ./my-react-app.

2. Reverse-convert a React app back to HTML

codemeld deconvert ./my-react-app ./my-html-site

3. Install dependencies and run

cd my-react-app
npm install
npm run dev

Your converted site is now running as a React app at http://localhost:5173.

4. Build for production

npm run build

CLI Reference

convert (default command)

codemeld convert <input> <output> [options]

Since convert is the default command, you can omit it:

codemeld ./site ./app

Arguments:

Options:

deconvert

Reverse-convert a framework project back to static HTML/CSS/JS:

codemeld deconvert <input> <output> [options]

chat

Start an interactive AI chat session for your project:

codemeld chat [directory]

This opens a Claude Code-style terminal UI where you can ask the AI to read files, edit code, run commands, and fix build errors interactively.

Usage Examples

Basic conversion

codemeld ./my-html-site ./my-react-app

Convert with CSS Modules

codemeld ./site ./app --css-modules

Each component gets its own .module.css file with scoped class names.

Convert with build verification

codemeld ./site ./app --verify

After conversion, automatically runs npm install and vite build to confirm the output compiles without errors.

Convert with AI refinement

codemeld ./site ./app --ai --verify

After the initial conversion, an AI agent analyzes build errors and TypeScript issues, then iteratively fixes them. Modes:

• full — Fix build errors, then enhance component quality
• build-fix — Only fix build/TypeScript errors
• enhance — Only improve code quality (assumes it already builds)
• visual — Focus on visual fidelity with the original

# Only fix build errors, up to 20 iterations
codemeld ./site ./app --ai --ai-mode build-fix --ai-max-steps 20

# Full refinement with verbose logging
codemeld ./site ./app --ai --ai-verbose

Convert and compare visually

codemeld ./site ./app --verify --visual-compare

Takes Playwright screenshots of the original HTML site and the converted Vite app side by side.

Keep everything in one component

codemeld ./site ./app --no-extract

Disables smart component extraction — the entire page is kept as a single React component.

Custom project name

codemeld ./site ./app --name "My Dashboard"

Target a different framework

codemeld ./site ./app --framework vue
codemeld ./site ./app --framework nextjs
codemeld ./site ./app --framework svelte
codemeld ./site ./app --framework angular

Disable Tailwind detection

codemeld ./site ./app --tailwind disable

Convert a multi-page site

If your input directory contains multiple .html files:

my-site/
├── index.html
├── about.html
├── contact.html
├── styles.css
└── script.js

codemeld ./my-site ./my-app

Each HTML file becomes a React component, and React Router is configured automatically:

• index.html → /
• about.html → /about
• contact.html → /contact

Enable all extras

codemeld ./site ./app --all-extras --verify

Generates tests, deployment configs, SEO files, accessibility enhancements, performance optimizations, form handling, and TypeScript types.

What Gets Converted

HTML to React Components

JavaScript to React Patterns

SVG Attributes

All hyphenated SVG attributes are converted to their camelCase JSX equivalents:

stroke-width → strokeWidth, fill-opacity → fillOpacity, clip-path → clipPath, etc.

Event Handler Types

Generated handlers include proper TypeScript event types:

Output Project Structure

Single-page site

output/
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
├── .gitignore
├── public/
│   └── (fonts, other assets)
└── src/
    ├── main.tsx
    ├── App.tsx
    ├── vite-env.d.ts
    ├── assets/
    │   └── (images)
    ├── components/
    │   ├── index.tsx          # Main page component
    │   ├── index.css          # Page styles
    │   ├── nav.tsx            # Extracted <nav> component
    │   ├── footer.tsx         # Extracted <footer> component
    │   ├── hero-section.tsx   # Extracted <section> components
    │   └── ...
    ├── hooks/
    │   ├── useInterval.ts     # Generated if setInterval detected
    │   ├── useTimeout.ts      # Generated if setTimeout detected
    │   ├── useFetch.ts        # Generated if fetch() detected
    │   └── useLocalStorage.ts # Generated if localStorage detected
    └── styles/
        └── global.css

Multi-page site

output/
└── src/
    ├── main.tsx
    ├── App.tsx               # React Router setup
    └── components/
        ├── index.tsx         # Home page (/)
        ├── index.css
        ├── about.tsx         # About page (/about)
        ├── about.css
        ├── contact.tsx       # Contact page (/contact)
        └── contact.css

Requirements

• Node.js >= 18.0.0
• For --visual-compare: Playwright (npx playwright install chromium)
• For --ai: API key configured for AI refinement

License

MIT