Template data

A Template represents the user interface of a section. A section can (and should) have more than one template so that the user of the theme can choose from are variation of UI alternatives when configuring the section in Built Studio. The data for a template comes from the section it belongs to.

In a theme or plugin Next.js project, templates are configured in 4 locations:

• Create React components under the components/templates directory
• Configure the template data in public/data/templates.json
• Configure a section to use the template in public/data/sections.json
• Add the React element component to a React template component from components/templates

Here's an example of a template for a page landing section:

...
 
export default function Cover1({ content }: any) {
  if (!content) return <></>;
  let { data } = { ...content };
 
  return (
    <section>
      ...
      <h1>{data.heading}</h1>
      ...
    </section>
  );
}

And the configuration for it (and other cover templates) in the sections data file:

{
  "sections": [
    {
      "name": "mainLanding",
      ...
      "templates": ["cover1", "cover2", "cover3", "cover4", "cover5"],
      "defaultTemplate": {
        "name": "cover1"
      },
      ...
    }
  ]
}

In the tempates data file, the configuration looks like this:

{
  "templates": [
        {
      "name": "cover1",
      "title": "Cover 1",
      "category": "covers",
      "namespace": "richjava_corporate",
      "description": "Full viewport cover with text content and a supporting image.",
      "imageUrl": "https://res.cloudinary.com/dn7feeelf/image/upload/v1725878863/cover1_mzktvz.png",
      "repoUrl": "https://github.com/richjava/corporate/blob/main/components/templates/covers/cover1.tsx"
    },
  ]
}

The name, title, category, and namespace properties are required.

All templates are kept in categories, like "covers", "banners", etc. This category property corresponds to the directory structure in the public/data/templates directory, so the "cover1" template file above would be located at: public/data/templates/covers

The other properties are important to include before publishing the theme or plugin to Built Studio to improve end user experience. The template image is used by Built Studio to display the what the template looks like to the user. It's a screenshot of the section of the page for that template. If a template image isn't provided, a placeholder image will be used instead.