Skip to content

Developers quick start guide


Important notice

Before you complete this guide, we recommend completing the basic quick start guide first so that you understand basic WebSight CMS concepts.

This guide uses WebSight Blueprint - our sample project which demonstrates various functionality of Websight CMS and pre-configures for you the following features:

We will walk through the process of updating a simple Howlite component.

In WebSight Blueprint for the sake of simplicity, we overrode the Title component included in the Howlite collection in advance and created the Luna Title component inside the demo project.

Your task in completing this guide is to update the Luna Title component and extend existing functionality. The sections below explain more detail.

Important notice

All scripts presented below are designed for Linux-based platforms. If you are a Windows user, please install and configure Windows Subsystem for Linux (WSL) to use this guide.

Part A: Prerequisites

  1. Install AdoptOpenJDK 17, make sure to install the version matching your CPU architecture (on macOS use brew install openjdk@17):
  2. Install Git
  3. Optionally, install Docker Desktop.

Part B: Setup local environment

First, clone the WebSight Blueprint repository and build it within your local environment using the following commands:

git clone
cd websight-blueprint

Depending on your choice, you can use Docker to build and run the CMS instance or build and run it locally as a JVM application.

JVM application

./mvnw clean package
distribution/target/dependency/ \
  -f distribution/target/slingfeature-tmp/feature-websight-cms-starter-tar.json


docker build -t ds/websight-cms-starter . 
docker run -p 8080:8080 --name websight-cms --rm \
  --mount source=segment-store-repository,target=/websight/launcher/repository ds/websight-cms-starter

Congratulations! Your local environment is now ready. To view it, open http://localhost:8080/ in a Web browser and log in using the credentials wsadmin/wsadmin.

Part C: Changing component


If you need help navigating inside WebSight, see the basic getting started guide for details.

Business requirement

Let's imagine the following scenario: A page owner wants you to update the title of the page that describes the company's new Grand Luxor Jewelry Collection.

The current title

To fulfill this request, you are asked to keep the collection name on one line and decrease the font size for the text Meet our. The expected result is presented below.

Expected result

Technical scope

To do this, you need to extend the Title component included in the Howlite library. Before doing that, let's check the original component first to identify the scope of changes.

Run WebSight, open the Luna space and edit the home page. Find the Title component that contains the text Meet our New Grand Luxor Jewelry Collection and edit its properties on the sidepanel.

Title panel properties

Enable the Overline text option, move Meet our from Heading text to Overline text.

Updated title

As you can see, the result comes close to meeting the expectation, but the font size of the overline text is too small. You could prepare a new version of the Title component with a different font size for the overline text. However, this is not a flexible solution. Creating an additional input field to define the font size for the overline text is a better option.


For simplicity, we overrode the original component in advance and prepared the Luna Title component. It is a part of the demo site project, but it is just a placeholder. It works exactly as the Title. The following sections guide you on how to implement the change.

Component update

Your task is to enable setup of the overline font size.

To start, first you need to add a new field, overlineSize, to the model class Let's define a default size hl-title__heading--size-5 according to the received design as well. The following Java code will do this:

package pl.ds.luna.components.models;

import javax.inject.Inject;
import pl.ds.howlite.components.models.TitleComponent;

@Model(adaptables = Resource.class)
public class LunaTitleComponent extends TitleComponent {

  @Default(values = {"hl-title__heading--size-5"})
  private String overlineSize;

  public String getOverlineSize(){
    return overlineSize;


Next, you need to update the component HTML template. The original one defines the CSS class that determines the font size as hl-title__heading--size-6.

<h6 class="hl-title__heading hl-title__heading--size-6" 
Because you updated the model class, you can use its property now.

<h6 class="hl-title__heading ${model.overlineSize}" 

The last step is to add the field to the dialog used by authors. They need it to define component properties in the page editor. To enable this, you have to override the dialog definition from Howlite. Do so by creating a new dialog directory and put .content.json file inside.

  "tabs": {
    "generalTab": {
      "container": {
        "overlineSize": {
          "sling:resourceType": "wcm/dialogs/components/include",
          "sling:orderBefore": "overline",
          "path": "/libs/howlite/components/common/headingsize",
          "include": {
            "sling:resourceSuperType": "/libs/howlite/components/common/headingsize",
            "label": "Overline size",
            "name": "overlineSize",
            "description": "Changes font size",
            "s": {
              "selected": true
            "m": {
              "selected": false

The above definition specifies the new overlineSize field. It is placed before the overline field and uses a heading size definition from Howlite, but with small size selected by default.

Apply changes

Run the following command to apply the changes to your local environment.

./mvnw -f applications/luna-custom-code/backend/pom.xml clean install -P autoInstallBundle

Part D: Use updated component


If you need help to navigate inside WebSight, see the general getting started for details.

The page owner can use the updated component now. Let's verify by checking it out in the admin interface.

Switch to WebSight CMS, open the Luna space, and edit the home page. Find the Title with text Meet our New Grand Luxor Jewelry Collection.

Then, find the Luna Title in the component tree on the left. Drag and drop the component on the page just below the original one.

Luna Title added

Edit properties of the Luna Title on the side panel:

  1. set Heading level to H2
  2. set Heading size to XL
  3. set Heading text to New Grand Luxor Jewelry Collection
  4. enable overline text
  5. set Overline size to L
  6. set Overline text to Meet our

The title should appear as expected now. You can delete the original Title component to finalize the change.

Updated Luna Title

Part E: Clean-up

Stop the environment

After completing this guide, you can stop your local environment by hitting Ctrl+C in the terminal window where you started it. The environment will still exist but will no longer be running.

Delete environment

If you don't need your environment anymore, you can delete it permanently by running the following command (depending on your choice of running the CMS as a JVM application or using Docker):

JVM application

Remove the launcher directory created by your local environment.


docker volume rm tar-repo

Next steps

This guide walked through the essentials of developing components for WebSight CMS. As a next step, we encourage you to explore additional details about the following: