---
title: Page builder development
related:
  - https://docs.kentico.com/k12sp/managing-website-content/using-widgets-in-mvc.md
  - https://docs.kentico.com/k12sp/multilingual-websites/setting-up-a-multilingual-user-interface/localizing-mvc-builder-components.md
  - https://docs.kentico.com/k12sp/on-line-marketing-features/configuring-and-customizing-your-on-line-marketing-features/content-personalization-on-mvc-sites/developing-personalization-condition-types.md
  - https://docs.kentico.com/k12sp/developing-websites/distributing-custom-builder-components.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

> **Note:** **Kentico 12 Service Pack note**
>
> You may encounter problems related to the page builder functionality in the initial release of the Kentico 12 Service Pack (hotfix 12.0.29). We recommend installing the [latest hotfix version](https://devnet.kentico.com/download/hotfixes) to avoid these issues.

As a developer, you can enable content editors to create content on MVC sites using the page builder. The page builder provides a user-friendly interface where non-technical users can manage content using configurable widgets prepared by the developers. Users can also work with [page templates](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-page-templates-in-mvc.md) to quickly create new pages based on predefined layouts.

The page builder should be used when you want to allow editors to create visually captivating pages and experiment with the design and layout. To learn more about scenarios for which page builder is suitable, see [Choosing the format of page content](https://docs.kentico.com/k12sp/developing-websites/defining-website-content-structure/choosing-the-format-of-page-content.md).

![Page builder](https://docs.kentico.com/docsassets/k12sp/page-builder-development/pageBuilder_home.png "Page builder")

To start using the page builder:

> **Note:** **Prerequisite**
>
> In order to use the page builder, you need to [enable preview mode support for your site](https://docs.kentico.com/k12sp/developing-websites/retrieving-content-in-mvc-applications/adding-preview-mode-support.md).

1. [Register the page builder](#registering-the-page-builder)
2. [Create pages with editable areas](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/creating-pages-with-editable-areas-in-mvc.md)
3. [Implement and register widgets](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc.md)
4. [Implement and register sections (layouts for widgets)](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-page-builder-sections.md)

## Page builder components

The page builder framework consists of several components, which fit together in the following hierarchy. Additionally, widget zones can contain any number of widgets.

![Page builder components](https://docs.kentico.com/docsassets/k12sp/page-builder-development/EditableAreas.png "Page builder components")

#### Editable areas

Editable areas are the top-level layout component and contain one or more sections. You can learn how to add editable areas to a view on the [Creating pages with editable areas in MVC](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/creating-pages-with-editable-areas-in-mvc.md) page.

#### Sections

Page sections specify the visual layout of widget zones. They represent reusable pieces of markup that can store an arbitrary number of widget zones – areas where content creators place widgets. Sections are fully customizable, and as a developer, you have absolute freedom in the way you set each section's layout. See [Developing page builder sections](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-page-builder-sections.md) to learn how to implement and customize page sections.

#### Widget zones

Widget zones are components that allow content editors to insert widgets using the plus button. Widget zones are defined in the views of sections.

#### Widgets

Widgets are reusable components that can be easily manipulated by content editors and other non-technical users. Widgets give non-technical users more power and flexibility when adjusting page content, in addition to basic editing of text and images. By working with widgets, users can decide which components are placed on pages and where. You can learn more about widget development and customization on the [ Developing widgets in MVC](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc.md) page.

Aside from editable regions, the page builder allows you to use page templates.

#### Page templates

Page templates allow content editors to gain greater control over the layout of pages, without the need to ask a developer to modify the code in the MVC project. With templates, it is easy to switch between page layouts, so they are suitable for creating pages with a predesigned or repeating structure, such as landing pages. You can learn more about page template development and customization on the [Developing page templates in MVC](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-page-templates-in-mvc.md) page.

## Registering the page builder

To use the page builder, you need to enable it as a feature in your MVC project.

1. Open your MVC project in Visual Studio.
2. Enable the page builder feature by calling the **UsePageBuilder** method of the _ApplicationBuilder_ instance.

   - Enable the feature at the start of your application's life cycle, for example in the **Application\_Start** method of your project's **Global.asax** file.

     > **Info:** MVC projects created by the [installer](https://docs.kentico.com/k12sp/installation/installing-kentico-mvc-projects.md) contain the _ApplicationConfig_ class, whose _RegisterFeatures_ method is called in the _Application\_Start_ method by default. You can use this class to encapsulate all of your _ApplicationBuilder_ code (enabling and configuring of Kentico MVC features).

     > **Note:** **Note**: The feature must be enabled **before** you register routes into the application's _RouteTable_. The _Kentico().MapRoutes()_ method adds required routes based on the set of enabled features.

     ```csharp

     using Kentico.Web.Mvc;
     using Kentico.Content.Web.Mvc;
     using Kentico.PageBuilder.Web.Mvc;

     ...

     protected void Application_Start()
     {
         ...

         // Gets the ApplicationBuilder instance
         // Allows you to enable and configure Kentico MVC features
         ApplicationBuilder builder = ApplicationBuilder.Current;

         // Enables the preview feature
         builder.UsePreview();

         // Enables the page builder feature
         builder.UsePageBuilder();

         ...
     }

     ```
3. (Optional) Edit the project's **Views\web.config** file and add the **Kentico.PageBuilder.Web.Mvc** namespace.

   - The namespace allows you to easily access page builder extension methods in the code of your views.
   - Alternatively, you can add _using_ statements for the namespace directly in the code of individual views.

     ```xml

     <system.web.webPages.razor>
       ...
       <pages pageBaseType="System.Web.Mvc.WebViewPage">
         <namespaces>
           ...
           <add namespace="Kentico.Web.Mvc"/>
           <add namespace="Kentico.PageBuilder.Web.Mvc"/>
       </namespaces>
       </pages>
     </system.web.webPages.razor>

     ```

The basic page builder feature is now enabled. You can prepare pages with [editable areas](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/creating-pages-with-editable-areas-in-mvc.md) in your MVC project and start developing [widgets](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-widgets-in-mvc.md) and [sections](https://docs.kentico.com/k12sp/developing-websites/page-builder-development/developing-page-builder-sections.md).