Basic Editor

PreviousNext

A simple editor with a frame.

This is an example showing a basic editor with a frame inside a canvas. It has one frame layer.

The examples are best viewed in full screen. Click here to open in new tab.

Components

We compose our custom editor using the following components:

  • Designer to render the editor.
  • DesignerContent as the container for the canvas and frame.
  • DesignerCanvas for the infinite scrollable canvas.
  • DesignerFrame to render the frame. By default, it's a 1024x1024px square.
components/custom-designer.tsx
import {
  Designer,
  DesignerCanvas,
  DesignerContent,
  DesignerFrame,
} from "@shadcn/designer"
 
function CustomDesigner() {
  return (
    <Designer className="h-svh">
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
      </DesignerContent>
    </Designer>
  )
}

You can create anything from simple editors with just a frame to complex editors with headers, panels, toolbars, and more advanced features.

Layer Types

The Designer includes three built-in layer types: text, image, and frame.

You can add custom layer types and remove the default ones using the layerTypes prop.

components/custom-designer.tsx
import { DEFAULT_LAYER_TYPES, type LayerType } from "@shadcn/designer"
 
// Extends the default layer types with a custom video layer type.
const CUSTOM_LAYER_TYPES = [
  ...DEFAULT_LAYER_TYPES,
  {
    id: "video",
    name: "Video",
    // ... other props
  },
] satisfies LayerType[]
 
function CustomDesigner() {
  return (
    <Designer layerTypes={CUSTOM_LAYER_TYPES}>
      <DesignerContent />
    </Designer>
  )
}

Working with Layers

The Designer component accepts a defaultLayers prop. It's an array of layers.

Use the defaultLayers prop to add default layers to the editor for example, layers loaded from a database.

components/custom-designer.tsx
function CustomDesigner() {
  return (
    <Designer
      defaultLayers={[
        {
          id: "1",
          type: "text",
          name: "Layer 1",
          value: "",
          cssVars: {
            "--background-color": "#54a0ff",
            "--width": "400px",
            "--height": "400px",
            "--translate-x": "50px",
            "--translate-y": "50px",
          },
        },
      ]}
    >
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
      </DesignerContent>
    </Designer>
  )
}

Controlled Mode

The Designer component can be used in controlled mode by passing a layers and onLayersChange props.

components/custom-designer.tsx
function CustomDesigner() {
  const [layers, setLayers] = useState<Layer[]>([])
  
  return (
    <Designer layers={layers} onLayersChange={setLayers}>
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
      </DesignerContent>
    </Designer>
  )
}
All ExamplesHeader