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

# Artifacts

> Sketch a page on the canvas without touching your code: what artifacts are, how to make and change them, export them, and hand them to your codebase.

An artifact is a page you sketch on the canvas, kept separate from your code. Use one to try an idea before it touches your app: a landing page, a new screen, a component exploration or a one-off mockup. When the idea is right, you can ask the agent to build it into your project.

## Artifacts and frames

A frame shows your running app. An artifact shows a saved page.

| | Frame | Artifact |
| - | - | - |
| Shows | Your app, live from its dev server | A saved page the agent made |
| Changes | Your project's code | Only the artifact |
| Needs your app running | Yes | No |
| Reaches your pull request | Yes, through the code changes | No |

Artifacts are marked in blue on the canvas: their outline, title and handles.

An artifact keeps working when your app stops, after you restart Onlook, and after you delete the project it was made in. It can't reach the internet or your dev server.

## Make an artifact

To make an artifact, do one of these:

* **Ask in chat.** For example: "Make an artifact with three pricing page ideas."
* **Draw one.** In the toolbar at the bottom of the canvas, choose **Artifact**, or press **A**. Drag to draw a box, or click to place one.
* **Use the Artifacts panel.** In the left rail, choose **Artifacts**, then **+**.

A new artifact you draw yourself starts blank and says **To design it, describe what you want in chat.** It's named **Artifact 1**, **Artifact 2** and so on until you rename it.

## Change an artifact

To change an artifact, ask the agent in chat. You can't edit its HTML by hand.

* **To change it in place,** say what to change: "Make the headline bigger in Artifact 2."
* **To keep the original and try something new,** ask for a variation. The agent makes a separate copy beside it.
* **To point at one part,** click an element inside the artifact to select it, then ask.

While the agent works on an artifact, its title shimmers.

<Note>
  Artifacts have no version history. When the agent changes one, the change replaces what was there. To keep a version, ask for a variation first.
</Note>

## Work with artifacts on the canvas

* **Move** an artifact by dragging it.
* **Resize** it by selecting only that artifact and dragging a handle.
* **Rename** it by double-clicking its title.

Right-click an artifact for more:

| Menu item | What it does |
| - | - |
| **Duplicate** | Places the same artifact again (⌘D) |
| **Attach to chat** | Adds the artifact to your next message, so the agent knows which one you mean |
| **Build in this project…** | Fills the chat box with a request to build the artifact into your code. See [Build an artifact into your app](#build-an-artifact-into-your-app) |
| **Export…** | Saves it as HTML or PDF. See [Export an artifact](#export-an-artifact) |
| **Bring to front** / **Send to back** | Changes which one sits on top |
| **Move to page** | Moves it to another canvas page |
| **Delete** | Removes it from this canvas only |
| **Delete artifact** | Deletes the artifact everywhere. This can't be undone |

<Warning>
  Duplicating, copying and pasting, or adding an artifact from the library all place the **same** artifact. A change to one shows in every place. To get an independent copy, ask the agent for a variation.
</Warning>

## Build an artifact into your app

An artifact is a sketch. To make it real, hand it to the agent:

1. Right-click the artifact and choose **Build in this project…**.
2. The chat box fills with a request to build the artifact in your project's code, using your existing components. Edit it if you want, then send it.

The agent then changes your project's code, which you'll see in your frames. Your artifact stays as it was.

## The Artifacts library

To find an artifact from any project, open **Artifacts** in the left rail. The library lists every artifact you've made, newest first.

* **Search** by title, page name or the words on the page.
* **Add to canvas**, or drag a card onto the canvas.
* **Inspect** an artifact full-window by clicking its thumbnail. Press Escape to close it.
* **Rename**, **Export HTML**, **Export PDF** or **Delete artifact** from a card's **⋯** menu.

Once you've made your first artifact, the projects screen also has an **Artifacts** section with the same list.

## Export an artifact

To share an artifact with someone who doesn't use Onlook, export it.

* **HTML** is one file that opens in any browser, with no server and no Onlook needed. It can be up to 20 MB.
* **PDF** prints the page on A4 sheets.

**From the canvas:** select one or more artifacts, right-click and choose **Export…**. In the **Export** panel, HTML is selected. To add PDF, choose **Add a filetype**. Then choose the export button at the bottom of the panel, and pick where to save each file.

**From the library:** open a card's **⋯** menu and choose **Export HTML** or **Export PDF**.

To protect your project, Onlook checks each artifact before it saves. If the page contains file paths from your Mac, local addresses, your project's name or credentials, the export stops and says what to remove. Ask the agent to remove them, then export again.

## Where artifacts are kept

Artifacts are saved on your Mac, in Onlook's own data folder, outside your project. They're never committed to your repository or included in a pull request. Deleting a project doesn't delete its artifacts.

## Troubleshooting

<AccordionGroup>
  <Accordion title="No artifacts. Draw one on the canvas or ask in chat.">
    The library is empty because you haven't made an artifact yet. See [Make an artifact](#make-an-artifact).
  </Accordion>

  <Accordion title="… is gone">
    The artifact was deleted, so this spot on the canvas is empty. To clear it, choose **Remove from canvas**.
  </Accordion>

  <Accordion title="Remove machine paths, local URLs, project names and credentials before exporting.">
    The page contains something private. Ask the agent to remove it, then export again.
  </Accordion>

  <Accordion title="Use only bundled local pages, scripts, styles, PNG/JPEG images and WOFF fonts. Remove remote, encoded, missing or cyclic references.">
    The page loads something from the internet or uses a file type export can't include. Ask the agent to bundle or remove it, then export again.
  </Accordion>

  <Accordion title="The exported HTML exceeds 20 MB. Remove large assets or split the idea before exporting.">
    Ask the agent to shrink or remove large images, or to split the page into more than one artifact.
  </Accordion>

  <Accordion title="The artifact changed while exporting. Try again to export its current document.">
    The agent changed the artifact during the export. Export again when it's finished.
  </Accordion>

  <Accordion title="The file could not be saved. Choose another location and try again.">
    Your Mac couldn't write to that folder. Export again and choose a different one.
  </Accordion>

  <Accordion title="An artifact can be viewed but not changed">
    It was made in a newer version of Onlook. To change or export it, [update Onlook](/start/install#updates).
  </Accordion>
</AccordionGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.