---
title: Views
slug: cms-13/docs/views
docTags: 
createdAt: 2026-07-30T20:22:10.000Z
---

Views define the structure and components of the CMS 13 editing UI. Use views to organize panels, gadgets, and other widgets into a layout that editors interact with daily.

## Components in a view

A view is composed of several building blocks that define its structure and behavior:

- **View definition** – Sets up the main structure of a view.
- **Component** – A widget such as a page tree or a gadget.
- **Container** – A component that contains child components, such as a panel or a tab.
- **Component definition** – Provides metadata about a component, such as title and description, for display when an editor adds a component.

The following articles provide example implementations:

- [Create a view](docId\:GyM6n1yXmXX7FJl3NxBk5)
- [Create a container](docId:_m7fIrMyH3DDFTRkPQukI)
- [Create a component](docId:3Tty6FBp8rS-liMvbLZJb)

## Load a view

Understanding the view-loading sequence helps troubleshoot rendering issues and optimize startup performance. When a view loads, CMS 13 follows this flow:

1. Loads HTML and scripts for the page, including the global menu, module definitions, and the Dojo and Dijit libraries.
2. Starts the modules. The shell module defines components such as `epi.routes` and `epi.dependency`.
3. Fetches the current view definition through a request that returns the structural composition.
4. Creates the widgets that form the UI, recursively based on the view definition.

## Alter a view

Customize the editing experience by altering a view to add, remove, or rearrange components. The component definition includes plug-in paths or areas the component plugs into automatically. If any of these paths match the `PlugInPath` property of a panel, CMS 13 creates the component and adds it to the container.

After the components are added, a chain of view transformers processes the view. A view transformer alters a view before rendering by adding or removing components. CMS 13 includes the following default view transformers:

- **Personalization view transformer** – Replaces components in personalized areas with the editor's personalized components.
- **Configuration view transformer** – Adds or removes components for a view through configuration.
- **Deterministic GUID transformer** – Assigns each component the same unique identifier every time the view is created.

## Examples

The following diagrams illustrate how views, components, and transformers work together.

### System overview of views and components

This diagram shows how the view (with four pluggable areas) is assembled on the server.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/faMsxt5JRgzZFXgTyBsja-20260722-194640.png)

### Components plug into areas

Components that declare plug-in areas are added automatically to their respective areas.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/YRg-GqwXVCllHe0_x6wOI-20260722-194640.png)

### Change a view through configuration

Configuration adds and removes components per view. A specific component can also replace another component globally through the IOC container.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/5oFAgHREn1lWcuM_e2VrO-20260722-194640.png)

### Change a panel through personalization

When a view contains personalizable panels and the editor has personalized them, the panel contents are replaced with the personalized content.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/gyF2jUSqTLPPCqGibi8JR-20260722-194640.png)