Skip to main content


Page types

There are 2 types of pages:

  • Group page: ViewerGroupPage, a group page is a page that only contains children pages. It is displayed in the explorer as a collapsable node with only a title.
  • Document page: ViewerDocumentPage a "leaf" page that a title, an optional subtitle/description and contains various sections as described below.

Group pages

You can pass all pages to the designer using the pageGroups field on DesignSystemViewerApp. Note that each 'pageGroup' represents a root node on the explorer.


Currently, the namespace on each page node has to be specified additional to the internal tree structure. For generated component pages you can easily use the utility method buildComponentPageTree to generate the root page group. However, it's less trivial to generate static content via buildGroupedPageTrees as you would need to carefully specify the namespace correctly on each page.

An improvement is planned on the roadmap, but please before then, refer to the example code to create static content correctly.


Each document page contains a list of sections of following types, displayed in order in a list.

Paragraph section

ViewerParagraphSection, a paragraph section contains a title, an optional description and a collection of items that is displayed in a list:

  • Text: ViewerTextCollectionItem, contains paragraph text title and/or a description.
  • Image: ViewerImageCollectionItem, contains an image and some text and/or description.
  • Widget: ViewerWidgetCollectionItem, contains an arbitary widget provided by the user.

Component section

ViewerComponentSection, a component section contains the widget designer. It uses the specified meta data of the constructor to render the widget and allows the user to play with dynamic runtime data using the data builders.

Using the @Design annotation, each public constructor (named or factory) will generate a component section. You can also use the @DesignExamples annotation on public constructors which would generate a component example section for each example provided on the constructor.


For more information on the specifics of the component section, please refer to Widget designer

API reference section

ViewerApiDocsSection, an API reference section specifies set of parameter meta data for each widget constructor. It takes the meta data from the component sections in the page.

API docs sectionAPI docs section