Docs
Getting started with PixelForge
PixelForge turns a UI screenshot into clean, semantic HTML or JSX with Tailwind. This guide covers the forge workflow end to end, from a first upload to a refined, downloaded result.
01
Upload a screenshot
Open the forge workspace and drop, paste, or click to upload a PNG, JPG, or WEBP up to 10MB. Press Ctrl+V (Cmd+V on macOS) anywhere on the page to paste an image straight from your clipboard, or click "Try with an example" to forge a sample screenshot without uploading your own.
Before the forge starts, pick HTML or JSX from the framework toggle. This changes the shape of the output: HTML forges a static page with Tailwind classes, JSX forges a React component.
02
Forge and watch it stream
Press Forge. The output panel streams the generated markup line by line as Gemini reads the screenshot, and the Preview tab renders the result live in a sandboxed frame the moment there is enough markup to show. Switch to the Code tab any time to read the raw, syntax-highlighted output.
Use the device-width buttons to check the layout at desktop, tablet (768px), and mobile (375px) without leaving the page.
03
Refine, retry, and keep your work
Once a generation is ready, describe a change in the Refine bar below the output, for example "make the header sticky" or one of the suggested edits. PixelForge reads the current code (and the original screenshot, if you leave that toggle on) and updates the output in place, rather than starting over.
Forge again repeats the last action exactly. Copy or download the result with the correct file extension for the active framework. Every completed generation is saved to the history drawer with a thumbnail, up to the last ten, and survives a page reload.