Read Only

How to make the designer read only.

Use the DesignerStaticFrame component to create a read only designer. This component is useful when you want to display a static image with all the layers.

Note: The example below is rendered in full size. Pan around to see all the layers.

components/read-only-frame.tsx

import { DesignerStaticFrame } from "@shadcn/designer";
 
function ReadOnlyFrame() {
  return (
    <DesignerStaticFrame
      width={1080}
      height={1920}
      layers={[
        // ...
      ]}
    />
  )
}

See the Convert to Image example to see an example of how to export your layers to an image.

Performance Zoom