Skip to main content

<Frame />

Component

Frame defines the editable area in your page editor. It is rendered based on the editor's internal state (i.e. Nodes).

const { connectors, setProp, ...collected } = useNode(collector);

Reference

Props

Both props specifies the initial screen to render. You must specify at least one of them (data takes precendence over children).

  • children?React.ReactElement
    Creates the initial screen using React Elements. The element defined here will be the Root Node
  • data?SerializedNodes | string
    Loads the initial nodes from SerializedNodes (can be supplied in JSON)

These props are memoized - after the initial render, changes to these props will have no effect. If for example, you wish to load a different set of serialised JSON nodes after the initial render, you may use the deserialize method via the useEditor hook.

Examples

With JSX

import {Editor, Frame, Element} from "@craftjs/core";

const App = () => {
return (
<div>
<h2>My App!</h2>
<Editor>
<h2>My Page Editor</h2>
<Frame>
<Element is={Container} canvas> // defines the Root Node
<h2>Drag me around</h2>
<MyComp text="You can drag me around too" />
<Element is="div" style={{background: "#333" }}>
<p>Same here</p>
</Element>
</Element>
</Frame>
</Editor>
</div>
)
}

Loading from serialized Nodes

import {Editor, Frame, Element} from "@craftjs/core";

const App = () => {
return (
<div>
<h2>My App!</h2>
<Editor>
<h2>My Page Editor</h2>
<Frame
data='{"ROOT":{"type":"div","isCanvas":true,"props":{},"parent":null,"displayName":"div","custom":{},"nodes":["node-sdiwzXkvQ","node-rGFDi0G6m","node-yNBLMy5Oj"]},"node-sdiwzXkvQ":{"type":{"resolvedName":"Card"},"props":{},"parent":"ROOT","displayName":"Card","custom":{},"_childCanvas":{"main":"canvas-_EEw_eBD_","second":"canvas-lE4Ni9oIn"}}'
>
<Element is={Container} canvas> // defines the Root Node
<h2>Drag me around</h2>
<MyComp text="You can drag me around too" />
<Element is="div" style={{background: "#333" }}>
<p>Same here</p>
</Element>
</Element>
</Frame>
</Editor>
</div>
)
}