Pixelated-CSS

Pixelated-CSS is a Next.js app for building and testing pixel-accurate HTML and Tailwind layouts. The homepage provides a small visual editor with preset pattern prompts, live previews, and a match button that compares the rendered output against a reference pattern.

What It Does

• Lets you switch between built-in patterns (Q1, Q2, Q3).
• Renders your HTML in a live preview using an iframe-based HTML sandbox.
• Compares your HTML against the selected pattern through /api/visual-match.
• Uses Tailwind utilities in both the editor and the preview flow.
• Runs locally on localhost during development instead of redirecting away.

Project Structure

• src/app/page.tsx - Main visual matcher UI.
• src/app/api/visual-match/route.ts - Server-side pixel comparison endpoint.
• src/components/HtmlPreview.tsx - Sandboxed HTML preview renderer.
• src/data/questionPatterns.ts - Built-in reference patterns shown in the UI.
• src/utils/getTailwindCSS.ts - Tailwind CSS source used by the comparison route.
• scripts/generate-tailwind-standalone.mjs - Generates the standalone Tailwind CSS bundle used by the build.

Tech Stack

• Next.js 16
• React 19
• Tailwind CSS 4
• CodeMirror
• Puppeteer Core with @sparticuz/chromium
• pixelmatch and pngjs for visual comparison

Getting Started

Install

pnpm install

Development

pnpm dev

This starts the app on localhost:3000 and keeps the homepage in development mode.

Production Build

pnpm build

The build runs the Tailwind standalone generation script first, then builds the Next.js app.

Run the Production Server

pnpm start

Validation

pnpm check
pnpm typecheck
pnpm lint
pnpm format:check

Scripts

• pnpm dev - Start the Next.js dev server with Turbopack.
• pnpm build - Generate the standalone Tailwind CSS and build for production.
• pnpm build:tailwind - Generate only the standalone Tailwind CSS bundle.
• pnpm start - Start the production server.
• pnpm preview - Build and then start the production server.
• pnpm check - Run linting and TypeScript checks.
• pnpm typecheck - Run TypeScript only.
• pnpm lint / pnpm lint:fix - Run linting or auto-fix lint issues.
• pnpm format:check / pnpm format:write - Check or apply Prettier formatting.

How The App Works

The homepage loads a selected reference pattern from questionPatterns.ts and shows two panes: a preview of your current HTML and a preview of the chosen target pattern. When you press Match, the app sends both HTML snippets to /api/visual-match, where the server renders them with Tailwind, captures screenshots, and compares the pixels.

The comparison route uses Puppeteer in development and @sparticuz/chromium in production/serverless environments. If the images differ, the API returns mismatch statistics such as pixel difference count and match percentage.

Local Development Notes

• The root page is meant to stay on localhost while you develop.
• The API route expects both htmlA and htmlB in a POST body.
• Debug screenshots may be written to debug-screenshots/ during local runs.
• The preview component intentionally sandboxes the rendered HTML so edits stay isolated from the app shell.

Deployment

The repo includes deployment configuration for Vercel and Render. The app is designed to run as a Next.js application with a Node.js runtime for the visual matching endpoint.