Define your components

The config your pass to the editor or page renderer component must have all the components that will be available.

The simplest component looks like this:

import { Editor, Config } from "@tyzo/page-editor";

const config: Config = {
  components: {
    HeadingBlock: {
      id: "HeadingBlock",
      name: "Heading Block",
      groupName: "Typography",
      properties: {},
      component: () => <h1>Hello</h1>,
    },
  }
}

Now lets add a property:

import { Editor, Config } from "@tyzo/page-editor";

const config: Config = {
  components: {
    HeadingBlock: {
      id: "HeadingBlock",
      name: "Heading Block",
      groupName: "Typography",
      properties: {
        children: {
          name: "children",
          type: "string",
          defaultData: "Heading",
        },
      },
      component: ({ children }: { children: string }) => <h1>Hello {children}</h1>,
    },
  }
}

The type of the property determines which input is used in the sidebar. Builtin types are:

• string
• number
• boolean
• children
• object
• array
• css
• template

There are a few special types:

children: In edit mode this will render a drop zone in place for the children (in addition to the children).

css: Instead of using this directly, it's better to use the `withCss` helper.

template: Read more about this

The tyzo property

In addition to the properties you define, the component will be passed a property called `tyzo`. The schema of that prop is the following:

interface TyzoProperty {
  id: string, // The id of the element
  componentId: string, // The id of the component
  data?: any; // The data passed to the component
  parent?: string, // The parent element id
  children?: string[], // This element's children
  isEditMode: boolean, // true when used in the editor, false when rendering a page
}