Templates

Templates are sub components used within the page you're editing.

Imagine you want to create a blog, and you're using the editor to edit the page that lists all blog articles.

You can define how the container of the list looks, but how do you define how each article item looks like?

This is what templates are used for.

Define a component like this:

      blogList: {
        id: "blogList",
        name: "Blog List",
        groupName: "Blog",
        properties: {
          children: {
            name: "children",
            type: "template",
            defaultData: undefined,
            exampleTemplateData: {
              title: "Example Blog Title",
            },
            templateTitle: "Blog Item",
          },
        },
        component: ({
          children,
        }: {
          children: (props: { item: any }) => ReactNode;
        }) => {
          const BlogItemComponent = children;
          return (
            <div>
              {blogItems.map((item) => (
                <BlogItemComponent key={key} {...item} />
              ))}
            </div>
          );
        },
      }

The template is a react component that is passed in the properties to your component. In the editor, the property will appear as a button that lets you edit the template.

exampleTemplateData is some example data that is used as placeholders when editing the template.