Layout

The desktop layout: a toolbar on top and a resizable sidebar.

"use client";

import { ImageEditorProvider } from "photocn/react";

import { ImageEditorCanvas } from "@/components/image-editor/canvas";
import { ImageEditorCurves } from "@/components/image-editor/curves-panel";
import { ImageEditorLayout } from "@/components/image-editor/layout";
import { ImageEditorRedoButton, ImageEditorUndoButton } from "@/components/image-editor/toolbar";

export default function LayoutDemo() {
  return (
    <ImageEditorProvider src="/samples/mountain-lake.jpg">
      <ImageEditorLayout
        className="h-[520px] overflow-hidden rounded-xl border"
        sidebar={<ImageEditorCurves />}
        sidebarDefaultSize="300px"
        toolbar={
          <>
            <ImageEditorUndoButton />
            <ImageEditorRedoButton />
          </>
        }
      >
        <ImageEditorCanvas />
      </ImageEditorLayout>
    </ImageEditorProvider>
  );
}

Installation

pnpm dlx shadcn@latest add @photocn/image-editor-layout

Usage

import { ImageEditorLayout } from "@/components/image-editor/layout";

<ImageEditorLayout toolbar={...} sidebar={<ImageEditorCurves />}>
  <ImageEditorCanvas />
</ImageEditorLayout>

Props

Prop	Type	Description
`toolbar`	`ReactNode`	Content of the top bar.
`sidebar`	`ReactNode`	Content of the sidebar.
`resizableSidebar`	`boolean`	Let users drag to resize the sidebar. Default `true`.
`sidebarDefaultSize / sidebarMinSize / sidebarMaxSize`	`string \| number`	Sidebar sizes, e.g. `"338px"`.