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 |
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.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.