The `@shadcn/designer` package ships with a `DesignerStaticFrame` component that you can use to render static layers.

You can use this component to render the static frame on a page and then use a service like [Microlink](https://microlink.io/) to capture the image. This is what we use for the demo.

### Create a new page

Create a new page to render the static frame.

```tsx
import { DesignerStaticFrame } from "@shadcn/designer"

export function ImagePage() {
  return (
    <DesignerStaticFrame 
      layers={layers} 
      width={1080} 
      height={1080} 
      id="post-image" 
    />
  )
}
```

### Capture the image

Use the `mql` package from Microlink to capture the image.

**Note:** Make sure `mql` has access to the the page. It will not work on the `dev` server.

```ts
import mql from "@microlink/mql"

const imageUrl = "FULL_URL_TO_YOUR_PAGE"
const { data } = await mql(imageUrl, {
  screenshot: {
    element: "#post-image",
    type: "jpeg",
    fullPage: false,
  },
})
```