Screenshot to code · Beta

Forge clean code from any screenshot

Drop a screenshot of any interface. PixelForge reads the pixels and hammers out semantic HTML or JSX with Tailwind, streamed live into a working preview.

Forge See specimens

PricingCard.tsx · Forge benchForged

export function PricingCard({ tier, price, features }) {
  return (
    <div className="rounded-xl border p-6
                     transition-shadow hover:shadow-lg">
      <p className="text-sm text-muted">{tier}</p>
      <p className="text-3xl font-bold">{price}</p>
      <ul className="mt-4 space-y-2">
        {features.map((f) => (
          <li key={f}>{f}</li>
        ))}
      </ul>
    </div>
  );
}

A pricing card, from a screenshot, with hover state and a feature list

Features

Built for the way you actually work

Two output targets

Forge semantic HTML or React JSX from the same screenshot. Switch the framework toggle before or after the first pass.

Live sandboxed preview

Every generation renders instantly in an isolated iframe, so you see the real result while the code is still streaming in.

Refinement loop

Keep iterating on the same output. Each refinement reads the previous code and the original screenshot, and builds on both.

Tailwind by default

Output ships with utility classes, not inline styles or a separate stylesheet, so it drops straight into a Tailwind project.

History that survives reload

The last ten generations persist in the browser with thumbnails, so you can pick up a session without losing work.

Copy-clean output

No wrapper commentary, no boilerplate scaffolding. What streams in is what you copy or download.

How it works

Three phases. One output.

01 · Prompt

Drop a screenshot

Upload, drag, or paste any interface screenshot. PixelForge reads the layout, spacing, and hierarchy straight from the pixels.

02 · Heat

The forge streams the markup

Gemini hammers the screenshot into semantic HTML or JSX with Tailwind, streamed line by line into a live sandboxed preview.

03 · Refinement Forge

Refine and ship

Describe a change in plain language and the forge updates the output in place. Copy the result or download it when it is ready.

Forged specimens

Real output from real screenshots. Every line streamed once.

PricingCard.tsxjsx · 34 lines

<div className="rounded-xl border p-6">
  <p className="text-sm text-muted">Pro</p>
  <p className="text-3xl font-bold">$24/mo</p>
  <ul className="mt-4 space-y-2 text-sm">
    <li>Unlimited generations</li>
    <li>Priority queue</li>
  </ul>
  <button className="mt-6 w-full rounded-lg
    bg-orange-600 py-2 text-white">
    Choose Pro
  </button>
</div>

DashboardStats.htmlhtml · 28 lines

<section class="grid grid-cols-3 gap-4">
  <div class="rounded-lg border p-4">
    <p class="text-xs text-gray-500">Revenue</p>
    <p class="text-2xl font-semibold">$48,204</p>
    <p class="text-xs text-emerald-600">+12.4%</p>
  </div>
  <div class="rounded-lg border p-4">
    <p class="text-xs text-gray-500">Active users</p>
    <p class="text-2xl font-semibold">2,318</p>
  </div>
</section>

Forge your own