AppState
⚠️ The application state is unstable and is likely to experience breaking changes.
The internal state of the <Puck> component.
data
The current Data payload being managed by Puck.
ui
The current state of the Puck editor interface.
| Param | Example | Type |
|---|---|---|
arrayState | {} | Object |
componentList | { typography: { components: [ "HeadingBlock" ] } } | Object |
field.focus | "title" | String |
isDragging | false | Boolean |
itemSelector | { index: 0, zone: "my-content" } | Object |
leftSideBarVisible | false | Boolean |
previewMode | "edit" | String |
rightSideBarVisible | false | Boolean |
viewports | { controlsVisible: true, current: {}, options: [] } | Object |
ui.arrayState
An object describing the internal state of array items
ui.componentList
An object describing the component list. Similar shape to the categories API
ui.componentList[key].components
Array containing the names of components in this category
ui.componentList[key].title
Title of the category
ui.componentList[key].visible
Whether or not the category is visible in the side bar
ui.componentList[key].expanded
Whether or not the category is expanded in the side bar
ui.field.focus
The name of the currently focused field.
ui.isDragging
A boolean stating whether or not the user is currently dragging a component.
ui.itemSelector
An object describing which item is selected.
ui.itemSelector.index
The index of the item within the zone.
ui.itemSelector.zone
The zone that the item is defined within. Defaults to main content zone.
ui.leftSideBarVisible
Whether or not the left side bar is visible.
ui.previewMode
The mode for the preview area, controlling whether or not the user can interact with the underlying component. Accepts the following values:
"edit"(default): Components can be dragged and modified. An overlay prevents interaction with the underlying component."interactive": Editing functionality is disabled. The user can interact with the underlying component.
Puck does not currently provide the UI to control this value, but it can be toggled via the meta+i hotkey.
ui.rightSideBarVisible
Whether or not the right side bar is visible.
ui.viewports
| Param | Example | Type |
|---|---|---|
controlsVisible | false | Boolean |
current | { width: 1440, height: "auto" } | Object |
options | [] | Viewports[] |
ui.viewports.controlsVisible
Whether or not the viewport controls are visible.
ui.viewports.current
The currently selected viewport.
| Param | Example | Type |
|---|---|---|
width | 1440 | Number |
height | "auto" | Number | "auto" |
ui.viewports.current.width
The width of the current viewport.
ui.viewports.current.height
The height of the current viewport.
ui.viewports.options
The available viewport options, as provided via the viewports API.