Skip to content
Examples of custom element extensions for Kentico Cloud
Branch: master
Clone or download
Latest commit d77ac99 Mar 15, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
ColorPicker KCL-1365 round height for colorpicker Jan 23, 2019
Markdown KCL-1365 round height for markdown Jan 23, 2019
Shopify Update Mar 13, 2019
YoutubeVideoPreview Update Mar 15, 2019
shared Custom Element CSS updated Feb 5, 2019 Add/update issue, PR templates, code of conduct, contributing guide Jan 26, 2019
LICENSE Update Mar 5, 2019

Examples of Custom Element Extensions for Kentico Cloud

Stack Overflow

This repository contains samples of the HTML web pages that can be used as Custom Element (BETA) Extensions in Kentico Cloud.

Custom elements help you with extending the basic functionality of Kentico Cloud UI and thus improving the content editing experience. Custom element is essentially a small HTML application that exists in a sandboxed <iframe> and interacts with the Kentico Cloud app via the Custom Elements API.

Note that Custom elements are only supported in the latest versions of our SDKs.

Custom elements' samples overview


ColorPicker is a simple Custom element based on a color-picker JavaScript library. It allows user to choose a color from palette and sets it as a HEX string, e.g. '#ff0000' for red color, '#00ff00' for green, and so on. Selected color is then seen as the Custom element's background. When the element is disabled, its color palette is still visible in a content item but does not react when clicked on.

Markdown editor

Mardown editor is a WYSIWYG Custom element which allows users to write formatted text using SimpleMDE. In this sample element, you can find examples of setting dynamic height and reacting on the window 'resize' events. When the element is disabled, the editor is set to the readonly mode.

How to create a custom element

You can find a detailed tutorial on how to create a Custom element in our documentation.

Custom element devkit

To make development of custom elements as easy as possible, we created a custom element devkit. The devkit includes Kentico Cloud alike wireframe and mocked API to enable seamless debugging experience. It is also capable of minimizing all assets and preparing custom element for production use.

Styling your custom elements

By including Kentico Cloud default styles, you can make your Custom element look consistent with the rest of the UI.

The /shared folder in this GitHub repository contains:

We recommend you clone the files and host them locally yourself. The kentico-icons-v1.6.0.woff file needs to be hosted in the same directory as the CSS stylesheet to be properly linked.


If you plan on using these demo examples in your own production project, we recommend you to clone this repository. This way, you will not be affected by the possible changes made to the Custom elements in the future.

Feedback & Contributing

You can contribute by implementing a Custom Element Extension of your choice or pick one from the ideas. Create an HTML web page, include the Custom Elements API in the code, describe what your element does in the Readme file, and send us a pull request.

We'll also appreciate if you submit your ideas for custom elements or vote for the existing ones.

Check out the Contributing page to see the best places to file issues, start discussions, and begin contributing.

Custom Elements Contest 2019

We all like to play! During the March of 2019 we are hosting the Custom Elements Contest 2019. Do you have what it takes to code an awesome Custom Element and compete with others for $150 Amazon vouchers? Then take a look at these few rules we've put together:

  • The contest runs between 1st and 31st of March 2019
  • Every extension submitted between these dates is automatically included in the contest
  • Every extension must comply with all applicable licenses
  • Every extension must be submitted only by its author
  • Every submission (pull request) must follow these rules:
    • extension is stored within a folder named after it
    • the folder contains compiled and minimized code of the custom element extension (html, css, js) and markdown file with documentation (how to set it up, etc.)
    • the documentation must contain a link to the source code repository (if there is any) of the custom element extension
    • the source code is licensed under MIT
  • Prize for top 10 winning custom element extensions is $150 Amazon voucher. Winning authors who are non-US residents will be eligible to claim a virtual visa card to the same value.
  • Every custom element extension will be evaluated in following areas:
    • innovation/originality - does the extension use some new concepts, is it somehow different from what we are used to?
    • usefulness - is it an extension to be used by many users or is meant for a very specific, niche segment?
    • complexity - is it a prefilled drop-down list vs. complex selection dialog with plenty of JS logic
    • quality - is it bug-free?
  • Custom element extensions will be evaluated by Kentico internal committee after the end of the contest
  • Ideas for custom element extensions may be optionally picked from our list at

How to contribute to the repository and be included in the contest?

  • Pull requests are to be submitted to
  • Every custom element extension submitted between 1st and 31st of March 2019 is automatically included in the contest
  • If you are working on a custom element extension based on an idea from our list, let us know via GitHub issues and we will assign the issue to you.


If your custom element extension will place in the top 10, we will get in touch with you via GitHub to collect your contact info so that you can receive your prize. Please make sure your GitHub contact info is current.

If you have any questions regarding the Custom Elements Contest 2019, please get in touch with us.


You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.