Custom Layers

PreviousNext

Learn how to add custom layers to designer.

The designer is built with a flexible layer system that allows you to create custom layers. This guide will show you how to build and use your own layer types.

Layer Type

A layer type in designer is an object that defines the properties of a layer and how it is rendered.

Here's the type definition for a layer type:

type LayerType = {
  type: string
  name: string
  icon: ReactNode
  defaultValues: Omit<Layer, "id" | "type">
  render: (layer: LayerWithStyles) => React.ReactNode
  keybinding?: Keybinding
}

Creating a Custom Layer

Here's an example of how to create a custom shape layer:

import * as React from "react"
import { type LayerType } from "@shadcn/designer"
import { IconCircle } from "@tabler/icons-react"
 
const customShapeLayer = {
  type: "shape",
  name: "Shape",
  icon: IconCircle,
  defaultValues: {
    name: "Shape",
    value: "circle",
    cssVars: {
      "--width": "100px",
      "--height": "100px",
      "--background-color": "#000000",
      "--border-radius": "50%"
    }
  },
  keybinding: {
    key: "s",
    label: "S",
    labelMac: "S",
    description: "Add Shape",
    group: "New Layer"
  },
  render: (layer) => {
    return (
      <div
        style={{
          ...layer.contentStyle,
        }}
      />
    )
  }
} satisfies LayerType

Using Custom Layers

To use your custom layer, you need to extend the default layer types and pass them to the Designer component:

import { Designer, DEFAULT_LAYER_TYPES } from "@shadcn/designer"
 
function MyDesigner() {
  // Extend the default layer types with your custom layer
  const layerTypes = [...DEFAULT_LAYER_TYPES, customShapeLayer]
  
  return (
    <Designer
      layerTypes={layerTypes}
    >
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
      </DesignerContent>
    </Designer>
  )
}

The designer will take care of automatically adding the new layer type, handle rendering, keyboard shortcuts, and more. If you provide an icon, it will also show up in the <DesignerToolbar />.

Best Practices

  1. Unique Type: Always use a unique type identifier for your layer.
  2. Default Values: Provide sensible default values for the layer name, value, and CSS variables.
  3. Keyboard Shortcuts: Add keyboard shortcuts for better user experience.
  4. Rendering: Ensure you use the layer.contentStyle to style the layer.

Remember to test your layers thoroughly with the designer's transformation tools.

Convert to ImageImage Browser