Skip to main content

<Editor />

Component

Creates the context that stores the editor state.

Reference#

Props#

  • resolverMap<String, React.ComponentType>
    A map of User Components that will be used in the editor
  • enabled?boolean
    Optional. If set to false, all editing capabilities will be disabled
  • indicator?Record<"success" | "error", String>
    Optional. The colour to use for the drop indicator. The colour set in 'success' will be used when the indicator shows a droppable location; otherwise the colour set in 'error' will be used.
  • onRender?React.ComponentType<{element: React.ReactElement}>
    Optional. Specify a custom component to render every User Element in the editor.
  • onNodesChange?(query: QueryMethods) => void
    Optional. A callback method when the values of any of the nodes in the state changes

Examples#

Custom render user elements#

By default, every user element is rendered just as it is. However, if you'd like to, for example, wrap every user element inside a div, you can do so through the onRender prop:

import {Editor} from "@craftjs/core";
const RenderNode = ({element}) => {  return (    <div style={{background: "#000", padding: "5px" }}>      {element}    </div>  )}
const App = () => {  return (    <Editor onRender={RenderNode}>      <Frame resolver={{Hero}}>        <Element>          <h1>Hi</h1>          <Hero />        </Element>      </Frame>    </Editor>  )}

In the above example, every user element will now be wrapped in a black div.

Specifying the Drop Indicator colour#

You could change the colours of the drag and drop indicators like so:

import {Editor} from "@craftjs/core";
const App = () => {  return (    <Editor      indicator={{        'success': '#2d9d78', // green        'error': '#e34850' // red      }}    >      <Frame resolver={{Hero}}>        <Element>          <h1>Hi</h1>          <Hero />        </Element>      </Frame>    </Editor>  )}

Callback when Nodes change#

Perform a callback whenever the Nodes in the editor is updated/changed

import {Editor} from "@craftjs/core";
const App = () => {  return (    <Editor      // Save the updated JSON whenever the Nodes has been changed      onNodesChange={query => {        const json = query.serialize();        // save to server        axios.post('/saveJSON', { json });      }}    >      ..    </Editor>  )}