The content of a Web-Builder-based website is stored in content objects (also called “CMS objects”). Pages, binaries (e.g. images or PDF files), other types of autonomous content (e.g. persons or products) are all represented as such objects. The Web Builder SDK lets you render their content without having to consider the underlying basic functionality, i.e. fetching the content, making it editable, and storing it, because the SDK takes care of all this.

All objects are instances of an object class. Object classes let you diversify website content with respect to its presentation or functionality. A landing page most probably looks and works different from a news page, for example. By using individual object classes, you can attach custom layout, attributes (properties), and business logic to the CMS objects based on these classes.

You can define object classes directly in your JavaScript application using the SDK’s Scrivito.provideObjClass function. The Web Builder derives them from Obj which is the built-in base class of all object instances. Obj gives them a powerful set of basic functions, e.g. for fetching their content or updating it. Through its class methods, Obj also makes retrieval and search functionality available globally.

The Web Builder includes a couple of prebuilt object classes, but you can also build your own ones. A NewsPage class, for example, could include a tags attribute to associate articles with specific topics and let visitors filter the articles by those topics. Once an object class for a specific page type has been defined, it is available to editors so they can create pages of this type. You can also create pages programmatically by running a script in the console, of course.

The Web Builder lets you compose web pages by placing widgets on them. Widgets are graphical components specialized in making dedicated types of content, e.g. headlines, images, forms, etc., easy to handle and displaying them. In contrast to pages, binaries, etc., widgets cannot be referenced individually in the system (they don’t have a system-wide unique ID) but are part of a particular page. Widgets can be used across different page types, duplicated, moved around and more.

The Widget class has similar functionality as the Obj class in that it lets you customize how individual types of content should be handled, presented, and edited. For this, widget classes can be created with unique attributes and components for rendering them. Analogous to the creation of classes for objects, custom widget classes can be created using Scrivito.provideWidgetClass(). The Web Builder derives them from Widget.

You can also customize the widget classes part of the Portal App, simply by redefining them. Widgets of the ImageWidget class, for example, handle and display image objects. The Web Builder SDK takes care of their basic functioning like fetching or scaling them, but you can add as much functionality to them as you want, provide them with a caption or a tooltip, rotate them via CSS, etc.

Object and widget classes can be equipped with attributes to enable editors to add content to the actual pages and widgets. The Web Builder offers various attribute types for handling all of the data types commonly used on websites: simple text, HTML markup, date values, links, and many more.

The Web Builder SDK also includes React helper components such as Scrivito.ContentTag that not only render the contents of an attribute according to its type, but also let you edit attribute values in place or in the details dialogs. For example, in Edit mode, the value of a date attribute can be set using a date/time picker.

Obj and Widget are the SDK’s base classes for creating individual object and widget classes. Such classes let you customize and diversify the look and functionality of your website. All editable content, be it on pages or in widgets, is stored in attributes you can add to your object and widget classes as needed.