> ## Documentation Index
> Fetch the complete documentation index at: https://lunagraph.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Capture a webpage with the Chrome extension

> Bring a live webpage into Lunagraph as editable elements.

Capture a live webpage and bring it into Lunagraph as real, editable elements instead of a flat image.

### On this page

* [Overview](#overview)
* [Video walkthrough](#video-walkthrough)
* [Capture and paste a webpage](#capture-and-paste-a-webpage)

## Overview

Use the Lunagraph Chrome extension when you want to redesign a page that already exists in your product or elsewhere on the web. Capture the page, then paste it onto the canvas as editable elements.

The result depends on the page you capture:

* **Your site or localhost:** Turn on component capture. Lunagraph preserves recognized components, so a captured button remains a real Button component. You can restyle it, change its variant, or reuse it in another design.
* **Another website:** Lunagraph can't access the site's component code, so it captures editable DOM elements instead. You get an accurate visual copy you can use as a starting point.

This works best when you're redesigning your own product. Run it on localhost, capture the page, and keep designing with the components you already use.

## Video walkthrough

<video controls preload="metadata" playsInline src="https://mintcdn.com/lunagraph/-DSECE16vknJKTd3/videos/chrome-extension-snapshot.mp4?fit=max&auto=format&n=-DSECE16vknJKTd3&q=85&s=49e4f310af8b13a93e3f882824e75e3b" aria-label="Chrome extension snapshot walkthrough" style={{ width: "100%", borderRadius: "0.5rem" }} data-path="videos/chrome-extension-snapshot.mp4" />

## Capture and paste a webpage

1. **Choose whether to capture components.** Turn on **Capture components** when you capture your own site or localhost. Leave it off when you capture another website.

2. **Capture the page.** Open the page that you want to bring into Lunagraph, then click **Capture screen** in the Chrome extension.

3. **Paste into Lunagraph.** Paste the capture onto the canvas. When Lunagraph recognizes your components, you can edit their real props immediately. For example, you can change a captured Button from its default variant to destructive or secondary.