Skip navigation

Hello World

Learn the basics of creating, publishing, and displaying your content with Kentico Kontent. In this introductory tutorial, you will build a simple website powered by Kentico Kontent from start to finish. If you are new to the concept of Content as a Service (CaaS), this is a great place to get started.

Table of contents

    No account yet?

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

    Creating a Kentico Kontent project

    Project is the primary organizational unit of your content.

    To create a new project:

    1. Click the project switcher in the top left.
    2. Click Projects.
    3. Click Create new project in the top right corner.
    4. Type a name for your project, for example Hello World.
    5. Click Create project.
    6. Click Open project.
    Project switcher in Kentico Kontent

    Open a list of your Kentico Kontent projects

    Now you can model the first content type.

    Creating a content type

    Content types (sometimes called content models, or 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:

    1. In the app menu, choose .
    2. Click Create new.
    3. Type Homepage in Content type name.
      1. Drop in a Text element and name it Headline.
      2. Drop in a Rich text element and name it Body text.
      3. Drop in an Asset element and name it Picture.
    4. Click Save.

    In order to see all the content types that were created, navigate to .

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

    A screenshot of the completed homepage content type.

    Creating 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.

    1. In the app menu, choose .
    2. Click Create new.
    3. Choose Homepage as the content type.
    4. Type Hello CaaS World in Content item name.
    5. Fill in the Headline and Body text text elements.
    6. Upload an image to the Picture asset element. If you like, you can use our Kentico Kontent logo.
    A screenshot of the content item.

    Publishing your content

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

    Note that you can later set up your content workflow according to your needs.

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

    Accessing 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>

    1. Replace <YOUR_PROJECT_ID> with the ID of your project.
      1. From the app menu, choose .
      2. Under Development, choose API keys.
      3. Under Project ID, click .
    2. Replace <CONTENT_ITEM_CODENAME> with the codename of your content item:
      1. In the app menu, choose .
      2. Click the Hello CaaS World content item to open it.
      3. Click the More actions button in the top right corner.
      4. Click on Codename at the bottom of the list.
      5. Click .
    3. 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_caas_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 CaaS World", "codename": "hello_caas_world", "language": "default", "type": "homepage", "sitemap_locations": [], "last_modified": "2019-09-24T10:21:16.4870359Z" }, "elements": { "headline": { "type": "text", "name": "Headline", "value": "Hello CaaS World!" }, "body_text": { "type": "rich_text", "name": "Body text", "images": {}, "links": {}, "modular_content": [], "value": "<p>Kentico Kontent is a cloud-based platform based on the concept of <a href=\"https://docs.kontent.ai/other/what-is-content-as-a-service\">Content as a Service</a> (CaaS). It's an application that allows content editors to create, review and manage content.</p>\n<p>But unlike a traditional CMS, it makes no assumptions about how the content is displayed. It simply delivers the content as JSON through a Web API to a platform or device of your choice.</p>" }, "picture": { "type": "asset", "name": "Picture", "value": [ { "name": "hello_kontent.png", "description": "Kentico Kontent logo", "type": "image/png", "size": 10999, "url": "https://assets-us-01.kc-usercontent.com:443/8d20758c-d74c-4f59-ae04-ee928c0816b7/c81966ef-467e-4c5b-bd84-e36ddfac2979/hello_kontent.png", "width": 439, "height": 395 } ] } } }, "modular_content": {} }
    { "item": { "system": { "id": "cbd09ce9-31f1-4168-9939-dcebd2571b49", "name": "Hello CaaS World", "codename": "hello_caas_world", "language": "default", "type": "homepage", "sitemap_locations": [], "last_modified": "2019-09-24T10:21:16.4870359Z" }, "elements": { "headline": { "type": "text", "name": "Headline", "value": "Hello CaaS World!" }, "body_text": { "type": "rich_text", "name": "Body text", "images": {}, "links": {}, "modular_content": [], "value": "<p>Kentico Kontent is a cloud-based platform based on the concept of <a href=\"https://docs.kontent.ai/other/what-is-content-as-a-service\">Content as a Service</a> (CaaS). It's an application that allows content editors to create, review and manage content.</p>\n<p>But unlike a traditional CMS, it makes no assumptions about how the content is displayed. It simply delivers the content as JSON through a Web API to a platform or device of your choice.</p>" }, "picture": { "type": "asset", "name": "Picture", "value": [ { "name": "hello_kontent.png", "description": "Kentico Kontent logo", "type": "image/png", "size": 10999, "url": "https://assets-us-01.kc-usercontent.com:443/8d20758c-d74c-4f59-ae04-ee928c0816b7/c81966ef-467e-4c5b-bd84-e36ddfac2979/hello_kontent.png", "width": 439, "height": 395 } ] } } }, "modular_content": {} }

    Displaying 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.

    Inside of the HTML file insert the following code:

    • HTML
    <!DOCTYPE html> <head> <title>Hello World</title> <!-- Include the Delivery SDK and its dependency --> <script src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@kentico/kontent-delivery/_bundles/kontent-delivery.browser.umd.min.js"></script> <!-- Points to an external JavaScript file that will be added in the next step --> <script src="main.js" async defer></script> </head> <body> <!-- The HTML elements themselves have no value. Using JavaScript, you'll pull the content from your Kentico Kontent project into the elements --> <img id="banner"> <h1 id="headline"></h1> <p id="bodytext"></p> </body> </html>
    <!DOCTYPE html> <head> <title>Hello World</title> <!-- Include the Delivery SDK and its dependency --> <script src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@kentico/kontent-delivery/_bundles/kontent-delivery.browser.umd.min.js"></script> <!-- Points to an external JavaScript file that will be added in the next step --> <script src="main.js" async defer></script> </head> <body> <!-- The HTML elements themselves have no value. Using JavaScript, you'll pull the content from your Kentico Kontent 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 from the HTML file with content from your project. The headline whose value is "Hello CaaS World!" will go into the <h1> element, the body_text whose value is the paragraph below the logo will go into the <p> element, and picture whose value is the URL will show in the <img> element. Now, create a file named main.js and insert the following code:

    • JavaScript
    // Initializes the Delivery JS SDK const Kk = window['kontentDelivery']; // Tip: Change the project ID of the API call to yours to display your own content. Make sure the codenames still match. const deliveryClient = new Kk.DeliveryClient({ projectId: '8d20758c-d74c-4f59-ae04-ee928c0816b7' }); // Retrieves the content item from your project deliveryClient .item('hello_caas_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.item.body_text.value; const headline = response.item.headline.value; const picture = response.item.picture.value[0].url; document.getElementById("bodytext").innerHTML = bodyText; document.getElementById("headline").append(headline); document.getElementById("banner").src = picture; }
    // Initializes the Delivery JS SDK const Kk = window['kontentDelivery']; // Tip: Change the project ID of the API call to yours to display your own content. Make sure the codenames still match. const deliveryClient = new Kk.DeliveryClient({ projectId: '8d20758c-d74c-4f59-ae04-ee928c0816b7' }); // Retrieves the content item from your project deliveryClient .item('hello_caas_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.item.body_text.value; const headline = response.item.headline.value; const picture = response.item.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 can get something similar to the picture below.

    Completed JavaScript example

    Check the JS and HTML tabs in the codepen example below:

    You can also view the final result at https://kontent.surge.sh, or tweak the source code in the codepen repositoryOpens in a new window.

    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, a React sample application, and more.