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" } | ItemSelector |
leftSideBarVisible | false | Boolean |
leftSideBarWidth | 200 | Number |
previewMode | "edit" | String |
rightSideBarVisible | false | Boolean |
rightSideBarWidth | 200 | Number |
viewports | { controlsVisible: true, current: {}, options: [] } | Object |
ui.arrayState
An object describing the internal state of array items
ui.componentList
An object describing the component drawer. 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 ItemSelector for the currently selected item.
ui.leftSideBarVisible
Whether or not the left side bar is visible.
ui.leftSideBarWidth
Current width of the left side bar in pixels.
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 cmd+i or ctrl+i hotkeys.
ui.rightSideBarVisible
Whether or not the right side bar is visible.
ui.rightSideBarWidth
Current width of the right side bar in pixels.
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.