API ReferencePluginsfieldsPlugin

fieldsPlugin

Show the fields for the currently selected component. On desktop, the fields will appear in the right-hand sidebar. On mobile, they will appear in the plugin rail.

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

This plugin is included by default. Explicitly including it allows you to reorder plugins in the plugin rail, and configure behavior.

Params

Param	Example	Type	Status
`desktopSideBar`	`desktopSideBar: "left"`	”left” \| “right”	-
`icon`	`icon: <FormInput />`	ReactNode	-
`label`	`label: "Fields"`	String	-

Optional params

`desktopSideBar`

Display the plugin in the left or right sidebar on desktop. This field is "right" by default.

const fields = fieldsPlugin({
  desktopSideBar: "left",
});

`icon`

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

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

`label`

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

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

blocksPlugin

legacySideBarPlugin