Hello World

February 23, 2023

Jan Cerman

5 min read

Learn the basics of creating, publishing, and displaying your content with Kontent.ai. In this introductory tutorial, you will build a simple website powered by Kontent.ai from start to finish. If you're new to headless CMSs, this is a great place to get started.

No account yet?

If you do not have your Kontent.ai account yet, sign up at https://app.kontent.ai/sign-up. After creating an account and signing in, you will see the content of a sample project, which you won't need now.

Using Web Spotlight?

If you're using Web Spotlight to manage your website content, check out Hello Web Spotlight version of this tutorial.

Create a Kontent.ai project

Project is the primary organizational unit of your content.

To create a new project:

Click the project switcher in the top left.
Click Projects.
Click Create new project in the top-right corner.
Type a name for your project, for example, Hello World.
Click Create project.
Click Open project.

Expanded project menu — Open a list of your Kontent.ai projects

Now you can model the first content type.

Create a content type

Content types (sometimes called content templates) define the structure of a piece of content – a content item. They are made of content elements such as texts and images. Think of content types as templates that you will create, and be able to re-use in the future.

A content type can be used by a single content item (for example, a homepage) or by many content items (for example, each article can be based on the same Article content type).

Now create a content type for a homepage with a headline, some text, and a picture:

In Content model, click Create new.
In Content type name, type Homepage.
1. Drag in a Text element and name it Headline.
2. Drag in a Rich text element and name it Body text.
3. Drag in an Asset element and name it Picture.
Click Save.

That's it, your content type is ready to use.

To see all the content types that were created, select Content model.

Assembled Homepage content type for Hello World

Create a content item

You can now create a content item based on the new Homepage content type. A content item is an instance of a content type.

In Content & assets, click Create new.
If collections are available to you, select one for the new content item.
Select Homepage as the content type.
In Content item name, type Hello Headless World.
Fill in the Headline and Body text elements.
Upload an image to the Picture asset element. If you like, you can use our Kontent.ai logo.

Publish your content

To publish your content item, click on the Publish action button at the top.

A short time after publishing, your content item is publicly available via the Delivery API.

You can later set up your content workflow to suit your needs.

Access your content

Each content item can be accessed at a specific URL similar to this one:

https://deliver.kontent.ai/<YOUR_PROJECT_ID>/items/<CONTENT_ITEM_CODENAME>

Replace <YOUR_PROJECT_ID> with the ID of your project:
1. In Project settings, click API keys.
2. In the Project ID card, click .
Replace <CONTENT_ITEM_CODENAME> with the codename of your content item:
1. In Content & assets, click the Hello Headless World content item to open it.
2. Click the More actions button in the top-right corner.
3. Click Codename at the bottom of the list.
4. Click .
Open the URL in your browser.

For example, the URL can look like this:

https://deliver.kontent.ai/8d20758c-d74c-4f59-ae04-ee928c0816b7/items/hello_headless_world

The API will return your content item as a structured JSON object that is easy to parse by any programming language.

JSON
{
    "item": {
        "system": {
            "id": "cbd09ce9-31f1-4168-9939-dcebd2571b49",
            "name": "Hello Headless World!",
            "codename": "hello_headless_world",
            "language": "en-US",
            "type": "homepage",
            "collection": "default",
            "sitemap_locations": [],
            "last_modified": "2022-07-07T12:24:56.1899919Z",
            "workflow_step": "published"
        },
        "elements": {
            "headline": {
                "type": "text",
                "name": "Headline",
                "value": "Hello Headless World!"
            },
            "body_text": {
                "type": "rich_text",
                "name": "Body text",
                "images": {},
                "links": {},
                "modular_content": [],
                "value": "<p>Kontent.ai is a headless CMS that helps teams confidently create, reuse, and deploy content to multiple channels.</p>"
            },
            "picture": {
                "type": "asset",
                "name": "Picture",
                "value": [
                    {
                        "name": "kai-logo-hor-pos-rgb.svg",
                        "description": "Kontent.ai logo",
                        "type": "image/svg+xml",
                        "size": 3042,
                        "url": "https://assets-us-01.kc-usercontent.com:443/8d20758c-d74c-4f59-ae04-ee928c0816b7/77c6c552-8d81-4021-b334-08642614f090/kai-logo-hor-pos-rgb.svg"
                    }
                ]
            }
        }
    },
    "modular_content": {}
}
{
    "item": {
        "system": {
            "id": "cbd09ce9-31f1-4168-9939-dcebd2571b49",
            "name": "Hello Headless World!",
            "codename": "hello_headless_world",
            "language": "en-US",
            "type": "homepage",
            "collection": "default",
            "sitemap_locations": [],
            "last_modified": "2022-07-07T12:24:56.1899919Z",
            "workflow_step": "published"
        },
        "elements": {
            "headline": {
                "type": "text",
                "name": "Headline",
                "value": "Hello Headless World!"
            },
            "body_text": {
                "type": "rich_text",
                "name": "Body text",
                "images": {},
                "links": {},
                "modular_content": [],
                "value": "<p>Kontent.ai is a headless CMS that helps teams confidently create, reuse, and deploy content to multiple channels.</p>"
            },
            "picture": {
                "type": "asset",
                "name": "Picture",
                "value": [
                    {
                        "name": "kai-logo-hor-pos-rgb.svg",
                        "description": "Kontent.ai logo",
                        "type": "image/svg+xml",
                        "size": 3042,
                        "url": "https://assets-us-01.kc-usercontent.com:443/8d20758c-d74c-4f59-ae04-ee928c0816b7/77c6c552-8d81-4021-b334-08642614f090/kai-logo-hor-pos-rgb.svg"
                    }
                ]
            }
        }
    },
    "modular_content": {}
}

Display your content on a website

In this part of the tutorial, you will learn how to use JavaScript to display the content from a JSON object onto a web page. The JSON response contains the three elements as objects which are specified by their codenames: headline, body_text, and picture.

Adding HTML

First, you will create an HTML file and declare which HTML elements you want to populate. The order of elements in the HTML file is the order in which the content will appear on the website. Create a new, blank text file and name it index.html.

Insert the following code into the HTML file:

HTML
<!DOCTYPE html>
<html>

<head>
  <title>Hello World with Kontent.ai</title>
  <script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/@kontent-ai/delivery-sdk@latest/dist/bundles/kontent-delivery.umd.js"></script>
  <script src="main.js" async defer></script>
</head>

<body>
  <!-- The HTML elements are there only to display data from Kontent.ai.
        Using JavaScript, you'll pull the content from your Kontent.ai project into the elements -->
  <img id="banner">
  <h1 id="headline"></h1>
  <p id="bodytext"></p>
</body>

</html>
<!DOCTYPE html>
<html>

<head>
  <title>Hello World with Kontent.ai</title>
  <script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/@kontent-ai/delivery-sdk@latest/dist/bundles/kontent-delivery.umd.js"></script>
  <script src="main.js" async defer></script>
</head>

<body>
  <!-- The HTML elements are there only to display data from Kontent.ai.
        Using JavaScript, you'll pull the content from your Kontent.ai project into the elements -->
  <img id="banner">
  <h1 id="headline"></h1>
  <p id="bodytext"></p>
</body>

</html>

Adding JavaScript

Let's populate the <h1>, <img>, and <p> elements in the HTML file with content from your project:

The headline with the value “Hello Headless World!” goes into the <h1> element,
the body_text with the paragraph below the logo goes into the <p> element,
and the picture, the value of which is the logo URL, goes into the <img> element.

Now, create a file named main.js and insert the following code:

JavaScript
// Initializes the Delivery JS SDK
var KontentDelivery = window['kontentDelivery'];

// Creates a delivery client for retrieving data from Kontent.ai
const deliveryClient = new KontentDelivery.createDeliveryClient({
  // Tip: Use your project ID to display your own content.
  projectId: '8d20758c-d74c-4f59-ae04-ee928c0816b7'
});

// Retrieves the content item
deliveryClient
  .item('hello_headless_world')
  .elementsParameter(['headline', 'body_text', 'picture'])
  .toPromise()
  .then((response) => processData(response));

// Processes the retrieved data and displays it on the page.
function processData(response) {
    const bodyText = response.data.item.elements.body_text.value;
    const headline = response.data.item.elements.headline.value;
    const picture = response.data.item.elements.picture.value[0].url;

    document.getElementById("bodytext").innerHTML = bodyText;
    document.getElementById("headline").append(headline);
    document.getElementById("banner").src = picture;
}
// Initializes the Delivery JS SDK
var KontentDelivery = window['kontentDelivery'];

// Creates a delivery client for retrieving data from Kontent.ai
const deliveryClient = new KontentDelivery.createDeliveryClient({
  // Tip: Use your project ID to display your own content.
  projectId: '8d20758c-d74c-4f59-ae04-ee928c0816b7'
});

// Retrieves the content item
deliveryClient
  .item('hello_headless_world')
  .elementsParameter(['headline', 'body_text', 'picture'])
  .toPromise()
  .then((response) => processData(response));

// Processes the retrieved data and displays it on the page.
function processData(response) {
    const bodyText = response.data.item.elements.body_text.value;
    const headline = response.data.item.elements.headline.value;
    const picture = response.data.item.elements.picture.value[0].url;

    document.getElementById("bodytext").innerHTML = bodyText;
    document.getElementById("headline").append(headline);
    document.getElementById("banner").src = picture;
}

Finishing touches

When you combine the two code samples and introduce a small amount of CSS you get what you see in the Codepen example below.

See the code example on https://codepen.io/Kontent-ai-Learn/pen/KKKBXXV

What's next?

Working directly with the API interface is fine for small tasks and simple websites. The API reference is your friend. For more complex projects, however, you will want to use a platform-specific SDK or write your own.

We have a JavaScript/TypeScript SDK for the Delivery REST API, React sample application, and more.

Get only the content you specify with Delivery GraphQL API.
See what development resources are available for .NET, JavaScript, Java/Android, and PHP.
Uncover the development basics in our course showcasing Delivery API.
For more information about the user interface and the content creation process, see articles in Write and collaborate.

Is this page helpful?

Yes No