Mode

PreviousNext

Single or multiple layer mode.

The Designer component has a mode prop that can be set to single or multiple. The default is multiple.

In single mode, the designer is optimized for working with a single layer, making it perfect for focused editing tasks like image manipulation. This mode streamlines the interface and interactions by removing multi-layer selection capabilities and related controls, providing a more focused editing experience.

In single mode, the designer will automatically select the first layer when the designer is mounted.

components/custom-designer.tsx
import {
  Designer,
  DesignerCanvas,
  DesignerContent,
  DesignerFrame,
  DesignerHeader,
  createLayerCssVarAction,
  useLayerCssVarAction,
} from "@shadcn/designer"
import { Button } from "@shadcn/designer/ui"
 
const grayscaleAction = createLayerCssVarAction("--filter-grayscale", "0")
 
function CustomDesigner() {
  const [grayscale, setGrayscale] = useLayerCssVarAction(grayscaleAction)
 
  return (
    <Designer
      mode="single"
      frameSize={{ width: 1080, height: 1920 }}
      className="**:[.designer-frame]:bg-muted"
      defaultLayers={[
        {
          id: "image-1",
          type: "image",
          name: "Image",
          value:
            "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?q=80&w=1965&auto=format&fit=crop",
          isLocked: true,
          cssVars: {
            "--translate-x": "0",
            "--translate-y": "0",
            "--width": "1080px",
            "--height": "1920px",
          },
        },
      ]}
    >
      <DesignerHeader>
        <span className="font-black text-foreground text-lg">studio</span>
        <div className="ml-auto flex items-center gap-2">
          <Button onClick={() => setGrayscale(grayscale === "0" ? "100" : "0")}>
            Toggle Grayscale
          </Button>
        </div>
      </DesignerHeader>
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
      </DesignerContent>
    </Designer>
  )
}
MobilePages