The Playground is a client-side editor for creating and testing web components.
It features error reporting, live preview and download of created components that can be then added to your page by just importing the component module. No dependencies, no extra tools required!

It also allows to load any existing component by adding to the URL of the page hosting the playground a # followed by the path of the component to be loaded. Either relative or absolute URL can be provided even if pointing to a component located on a different server.

Try the Playground on

... or see the example below.


1. Import zx-playground module

<script type="module">
  import "";

2. Add component to the page


1. Include zuix.js library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src=""></script>

2. Add component to the page

<div z-load=""></div>

Option attributes

  • z-context="<context_id>" optional
    identifier name to be used to access this component from JavaScript.
  • :load="'<component_id>'" optional
    identifier of an existing component to load. It can also be an absolute URL if the component to be loaded is located on a different server.
  • :menu-items="<items_list>" optional
    list of custom menu items [ {link: '<url>', description: '<desc>'}, ... ].


<script type="module">
  import "";
<zx-playground :load="''" :menu-items="[
    {link: '', description: 'Hello World'},
    {link: '', description: 'Time Clock'},
    {link: '', description: 'Analog Clock'},
    {link: '', description: 'Custom Elements'}


arrow_left  Previous
Support this work
zKit components v1.2.1
web enhancing bits