Turn Screenshots into HTML & CSS Code Analyze screenshots and generate basic HTML/CSS layout code from detected regions.

Under the hood, it uses React's useState and useRef hooks to manage image data and canvas elements. When an image is dropped into the tool, it creates a URL object using URL.createObjectURL and sets the image state. The analyze function then gets called, which draws the image onto a hidden canvas element using the 2D drawing context from the HTMLCanvasElement. It scans the image in a grid of 20x20 pixels, sampling each cell for its dominant color by accessing the RGBA values of each pixel through the getImageData method.

The tool uses a simple flood fill algorithm to merge adjacent cells with similar colors into rectangular regions. Each region is classified based on its size and color properties, such as width, height, and luminance calculated using the W3C luminance formula. The type classification is done by checking if the region's width or height exceeds certain thresholds, for example, a narrow-tall region might be classified as a navbar while a large-light region could be a container. The regions are then filtered to only include significant ones with a minimum size of 40x20 pixels.

To generate the HTML and CSS code, it uses string concatenation to build the HTML document structure, including the doctype declaration, html tag, head tag, and body tag. It also generates CSS styles for each detected region using the position absolute property and percentages relative to the source image dimensions for responsive scaling. The output is a complete HTML document that can be copied or downloaded by the user, with the generated code displayed in a text area using a pre element and a monospace font family like system-ui or sans-serif.

The tool relies on various browser APIs such as navigator.clipboard.writeText to copy the generated code to the clipboard and URL.revokeObjectURL to release object URLs when they are no longer needed, ensuring proper memory management. The use of React's useCallback hook helps optimize performance by memoizing functions like handleFile, analyze, and copyCode, so they are not recreated unnecessarily on each render.