Types

TypeScript type definitions for building with the designer

The designer provides a comprehensive set of TypeScript types for type-safe development. These types define the structure of layers, styling properties, keyboard shortcuts, and configuration objects, ensuring proper validation and IntelliSense support throughout your application.

Layer

The core type representing a design layer on the canvas. Each layer contains metadata, styling, and content information.

type Layer = {
  id: string
  name: string
  type: string
  value: string
  cssVars?: CSSVars
  meta?: Record<string, unknown>
  isLocked?: boolean
}

Properties

Property	Type	Required	Description
`id`	`string`	Yes	Unique identifier for the layer
`name`	`string`	Yes	Display name of the layer
`type`	`string`	Yes	Layer type (e.g., "text", "image", "rectangle")
`value`	`string`	Yes	Layer-specific content/value (e.g., text content, image URL)
`cssVars`	`CSSVars`	No	CSS custom properties for styling
`meta`	`Record<string, unknown>`	No	Arbitrary metadata storage
`isLocked`	`boolean`	No	Whether the layer is locked from editing

Usage Examples

Basic Layer Creation:

import { type Layer } from "@shadcn/designer"
 
const textLayer: Layer = {
  id: "layer-1",
  name: "My Text",
  type: "text",
  value: "Hello World",
  cssVars: {
    "--font-size": "24px",
    "--color": "#000000"
  }
}

Layer with Metadata:

const imageLayer: Layer = {
  id: "layer-2",
  name: "Hero Image",
  type: "image",
  value: "/images/hero.jpg",
  meta: {
    alt: "Hero section background",
    uploadedAt: new Date().toISOString(),
    fileSize: 1024000
  },
  isLocked: true
}

Working with Layers:

function LayerComponent({ layer }: { layer: Layer }) {
  const displayName = layer.isLocked ? `🔒 ${layer.name}` : layer.name
  
  return (
    <div className="layer-item">
      <h3>{displayName}</h3>
      <span className="layer-type">{layer.type}</span>
      {layer.meta?.description && (
        <p>{layer.meta.description as string}</p>
      )}
    </div>
  )
}

LayerWithStyles

Extended layer type that includes computed CSS styles for rendering.

type LayerWithStyles = Layer & {
  style: CSSProperties
  contentStyle: CSSProperties
}

Additional Properties

Property	Type	Description
`style`	`CSSProperties`	Computed styles for the layer container
`contentStyle`	`CSSProperties`	Computed styles for the layer content

Usage Example

import { type LayerWithStyles } from "@shadcn/designer"
 
function RenderLayer({ layer }: { layer: LayerWithStyles }) {
  return (
    <div style={layer.style} className="layer">
      <div style={layer.contentStyle} className="layer-content">
        {layer.value}
      </div>
    </div>
  )
}

LayerType

Configuration type that defines how a specific layer type behaves and renders.

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

Properties

Property	Type	Required	Description
`type`	`string`	Yes	Unique type identifier
`name`	`string`	Yes	Human-readable name
`defaultValues`	`Omit<Layer, "id" \| "type">`	Yes	Default values for new layers
`render`	`(layer: LayerWithStyles) => React.ReactNode`	Yes	Render function
`icon`	`ReactNode`	No	Icon for UI (string, component, or element)
`keybinding`	`Keybinding`	No	Optional keyboard shortcut

Usage Example

import { type LayerType } from "@shadcn/designer"
import { TextIcon } from "lucide-react"
 
const textLayerType: LayerType = {
  type: "text",
  name: "Text",
  icon: TextIcon, // Can be a React component
  defaultValues: {
    name: "Text",
    value: "Enter text...",
    cssVars: {
      "--font-size": "16px",
      "--color": "#000000"
    }
  },
  render: (layer) => (
    <div style={layer.style}>
      <span style={layer.contentStyle}>{layer.value}</span>
    </div>
  ),
  keybinding: {
    key: "t",
    label: "T",
    labelMac: "T",
    description: "Add text layer",
    group: "layer"
  }
}
 
// You can also use strings (including emojis)
const blobLayerType: LayerType = {
  type: "blob",
  name: "Blob",
  icon: "🍡", // Can be a string or emoji
  defaultValues: {
    name: "Blob",
    value: "",
  },
  render: (layer) => <div>Blob content</div>
}
 
// Or JSX elements
const customLayerType: LayerType = {
  type: "custom",
  name: "Custom",
  icon: <span className="text-blue-500">★</span>, // Can be JSX
  defaultValues: {
    name: "Custom",
    value: "",
  },
  render: (layer) => <div>Custom content</div>
}

Keybinding

Configuration type for keyboard shortcuts.

type Keybinding = {
  key: string
  label: string
  labelMac: string
  description: string
  group: string
}

Properties

Property	Type	Description
`key`	`string`	Keyboard combination (e.g., "cmd+d", "shift+t")
`label`	`string`	Display label for non-Mac platforms
`labelMac`	`string`	Display label for Mac platforms
`description`	`string`	Human-readable description
`group`	`string`	Category/group for organization

Usage Example

import { type Keybinding } from "@shadcn/designer"
 
const duplicateKeybinding: Keybinding = {
  key: "cmd+d",
  label: "Ctrl+D",
  labelMac: "⌘D",
  description: "Duplicate selected layers",
  group: "layer"
}

CSSVars

Type for CSS custom properties used in layer styling.

type CSSVars = Record<string, string>

Usage Example

import { type CSSVars } from "@shadcn/designer"
 
const layerStyles: CSSVars = {
  "--width": "200px",
  "--height": "100px",
  "--background": "#f0f0f0",
  "--border-radius": "8px",
  "--font-size": "16px",
  "--color": "#333333"
}

Hooks

On This Page

Layer Properties Usage Examples LayerWithStyles Additional Properties Usage Example LayerType Properties Usage Example Keybinding Properties Usage Example CSSVars Usage Example