# Embedding the reference

### 1. Publish the reference

Embedding needs a published reference: see [Publishing](publishing).

### 2. Copy the snippet

The Reference panel on the project's page shows the snippet for your project. It looks like this:

```html
<iframe src="https://latitude10.tech/r/<workspace>/<project>/embed" title="Pets API reference" width="100%" height="800" loading="lazy"></iframe>
```

### 3. Choose a theme

Add `?theme=light` or `?theme=dark` to the `src` to fix the theme. Without it, the embed follows the reader's system setting.

## What the embed allows

- Only `/embed` may be framed: it sends `frame-ancestors *`. Every other page of the reference sends `frame-ancestors 'none'`.
- The embed has no site bar, and otherwise shows what the public reference shows, Try it included.
- If you unpublish, the embed shows that the reference isn't published, instead of an error page.

## Where this comes from

- `app/workspace/[ws]/[project]/page.tsx`
- `app/r/_lib/respond.ts`
- `app/r/[ws]/[project]/embed/route.ts`
- `app/reference/_lib/access.ts`