Artifacts

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. 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.

​

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:

​

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