Convert to Image

PreviousNext

Learn how to convert layers into an image.

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

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.

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,
  },
})
ZoomCustom Layers