Examples of Custom Element Extensions for Kentico Cloud
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
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:
- custom-element.css – a CSS stylesheet
- kentico-icons-v1.6.0.woff – a font file
- examples.html – An HTML page containing the implementation details and an HTML markup of some of the basic elements. See also the link in Demo section.
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.
- ColorPicker - https://kentico.github.io/custom-element-samples/ColorPicker/color-picker.html
- Markdown editor - https://kentico.github.io/custom-element-samples/Markdown/markdown.html
- CSS usage examples - https://kentico.github.io/custom-element-samples/shared/examples.html
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.
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 https://github.com/Kentico/custom-element-samples/issues
How to contribute to the repository and be included in the contest?
- Pull requests are to be submitted to https://github.com/Kentico/custom-element-samples
- 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.