API ReferencePluginsoutlinePlugin

outlinePlugin

Show an outline of the components currently on the canvas.

import { Puck, outlinePlugin } from "@puckeditor/core";
 
const outline = outlinePlugin();
 
export function Editor() {
  return <Puck plugins={[outline]} />;
}

This plugin is included by default. Explicitly including it allows you to change the order in the plugin rail.

Params

Param	Example	Type	Status
`icon`	`icon: <Layers />`	ReactNode	-
`label`	`label: "Outline"`	String	-

Optional params

`icon`

React node displayed alongside label in the plugin rail. Defaults to a layers icon.

import { Puck, outlinePlugin } from "@puckeditor/core";
import { ListTree } from "lucide-react";
 
const outline = outlinePlugin({
  icon: <ListTree />,
});
 
export function Editor() {
  return <Puck plugins={[outline]} />;
}

`label`

Label shown in the plugin rail. Defaults to "Outline".

import { Puck, outlinePlugin } from "@puckeditor/core";
 
const outline = outlinePlugin({
  label: "Layers",
});
 
export function Editor() {
  return <Puck plugins={[outline]} />;
}

legacySideBarPlugin

PuckApi