Introduction

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

What is the Web Builder?

This Web Builder is based on erxes (erxes.io) and ships with ready-made boilerplates (currently tour-boilerplate and ecommerce-boilerplate). Your job is to clone the appropriate boilerplate and adjust the UI to match the provided Figma designs. The underlying core code and modules are off-limits—treat them as a platform, not something to rewrite. Templates are:

  • Composable: Pages are assembled from reusable sections and shared components.
  • Data-aware: Sections can render CMS or API data without hardcoding content.
  • Themed: Layout, typography, and colors are controlled via tokens and props instead of one-off overrides.
  • Deployable: Templates can be previewed locally, then promoted to staging and production through the builder.

Who is this guide for?

  • Frontend developers building or maintaining templates used by design and content teams.
  • Engineers translating Figma handoffs into production-ready sections and components.
  • Developers responsible for keeping templates consistent, accessible, and performant over time.

Scope: You must not add new sections, pages, or core modules. Work inside existing components and update the UI only (markup, styling, spacing, states) to match Figma.

What you should know first

  • Comfortable with modern React/TypeScript patterns.
  • Node.js and a package manager (npm, yarn, or pnpm) installed.
  • Familiarity with basic accessibility, responsive design, and performance best practices.

What you’ll learn next

Each section of this guide walks through a key part of the template stack:

  1. Installation: Set up your local environment, clone the repo, and run the builder locally.
  2. Template Structure: Learn how folders, configs, and assets are organized.
  3. Template Layout: Define global shells such as headers, footers, theming, and metadata.
  4. Template Sections: Update section UIs while keeping data and types intact.
  5. Template Pages: Adjust page-level UIs without changing routing or data flow.

How to use this guide

Start with Installation to get a local environment running, then move sequentially through structure, layout, sections, pages, and components. By the end you’ll have a complete template that designers can assemble and content teams can publish without developer intervention.