# Introduction

Start here to learn how to work with the erxes Web Builder boilerplate and the UI-only constraints for template developers.


Build and maintain the front-end templates that render erxes websites. A template provides the site's layout, reusable sections, page presentation, and the mapping between CMS content and components.

## What the product defines, and what it does not

The product repository `erxes/erxes` contains the Content API/UI projects (`content_api`, `content_ui`) and a Next.js starter at [`apps/client-portal-template`](https://github.com/erxes/erxes/tree/f91e8c6f4714c910a32c6b6e14fe085f6435c89e/apps/client-portal-template). The rendered website templates live in separate repositories: the Web Builder boilerplates such as `erxes-web-templates/ecommerce-boilerplate` and `erxes-web-templates/tour-boilerplate`, and the `pages-web/web-builder` workspace.

The product side still defines what passes between them:

- The [Page schema](https://github.com/erxes/erxes/blob/f91e8c6f4714c910a32c6b6e14fe085f6435c89e/backend/plugins/content_api/src/modules/cms/graphql/schemas/page.ts) exposes `pageItems`, where each item has `name`, `type`, `content`, `order`, `objectType`, `objectId`, and a JSON `config`. The template decides how those fields map to React components.
- The [Web Builder deployer](https://github.com/erxes/erxes/blob/f91e8c6f4714c910a32c6b6e14fe085f6435c89e/backend/plugins/content_api/src/modules/webbuilder/utils/utils.ts) clones `github.com/erxes-web-templates/<templateId>` and writes the files the template reads: `data/configs.json`, `data/pages/<slug>.json`, `app/favicon.ico`, and a `next.config.ts` carrying the erxes environment variables. Paths such as `app/_components/sections` and helpers such as `renderSections` are boilerplate conventions, so check them in the template revision you use.

## Choose the right track

- Use [CMS + Next.js](https://erxes.io/docs/content-plug-cms-next-developers-introduction) to connect a website to the product's GraphQL API, including credentials and queries.
- Use this track to implement the presentation of an existing template or work within your team's Web Builder integration.
- Use [Create a Plugin](https://erxes.io/docs/create-plugin) to extend the product's backend or main frontend. A website template is not a Module Federation plugin.

## Work within the agreed scope

> [!WARNING]
> **UI-only scope**
>
> For a UI-only assignment, update markup, styles, responsive behavior, and presentation states inside existing components. Preserve routes, section identifiers, configuration shapes, data loading, and authentication. Do not touch the data layer: GraphQL documents, portal tokens, or the `pageItems` fields.

Adding a section, route, configuration field, or backend behavior is a separate change. Agree the scope with the owning team first.

## Follow the workflow

1. [Installation](https://erxes.io/docs/content-plug-template-developers-installation): get the repositories and run the setup.
2. [Development Guide](https://erxes.io/docs/content-plug-template-developers-development-guide): plan, implement, and check the change.
3. [Template Structure](https://erxes.io/docs/content-plug-template-developers-template-structure): trace content from its source to the rendered component.
4. [Template Layout](https://erxes.io/docs/content-plug-template-developers-template-layout): maintain shared navigation, branding, and page structure.
5. [Template Sections](https://erxes.io/docs/content-plug-template-developers-template-sections): keep section data shapes intact and handle dynamic content.
6. [Template Pages](https://erxes.io/docs/content-plug-template-developers-template-pages): check routes and complete user flows.

Coordinate field and state requirements with the [designer guides](https://erxes.io/docs/content-plug-template-designers-introduction) before implementation.