# Template Design Surface

The **Template Design Surface** lets you design templates for the items that appear in the panel bar. There are two ways to display the Template Design Surface:

* Choose **Edit Templates** from the **RadPanelBar**[ Smart Tag ](https://www.telerik.com/products/aspnet-ajax/documentation/controls/panelbar/design-time/smart-tag):

  ![Smart Tag Edit Templates](https://www.telerik.com/products/aspnet-ajax/documentation/assets/2c3858802e65cca7804b6abd4ad989b8/panelbar_smarttagedittemplates.png)

* Choose **Edit Template** from the **RadPanelBar** context menu and select the type of template you want to edit:![Edit Template Menu](https://www.telerik.com/products/aspnet-ajax/documentation/assets/4d6f09762aa4681b72b13877db97cd3f/panelbar_edittemplatemenu.png)

Either way, The Template Design Surface appears:

![Template Design Surface](https://www.telerik.com/products/aspnet-ajax/documentation/assets/ce028d7dd6d3c8a74a3a896edf3f2923/panelbar_templatedesignsurface.png)

On the design surface, you can drag any HTML elements or controls from the toolbox, as well as typing any literal text.

You can edit templates for all items using the **RadPanelItem Template**. You can also edit templates for individual panel items. Once you have added panel items to your **RadPanelBar** component, select a specific item from the list of item templates in the Smart Tag, or edit them all at once by choosing **Edit Template | Item Templates** from the **RadPanelBar** context menu.

When you have finished designing your template, choose **End Template Editing** from the **RadPanelBar**context menu or Smart Tag.

## See Also

* [Templates Overview](https://www.telerik.com/products/aspnet-ajax/documentation/controls/panelbar/templates/overview)

* [Adding Templates at Designtime](https://www.telerik.com/products/aspnet-ajax/documentation/controls/panelbar/templates/adding-templates-at-designtime)