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>  )}