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 zuixjs.org
... or see the example below.
Usage
1. Import zx-playground module
<script type="module">
import "https://zuixjs.github.io/zkit/lib/1.2/components/zx-playground.module.js";
</script>2. Add component to the page
<zx-playground></zx-playground>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="https://cdn.jsdelivr.net/npm/zuix-dist@1.1.29/js/zuix.min.js"></script>2. Add component to the page
<div z-load="https://zuixjs.github.io/zkit/lib/1.2/components/zx-playground"></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>'}, ... ].
Example
<script type="module">
import "https://zuixjs.github.io/zkit/lib/1.2/components/zx-playground.module.js";
</script>
<zx-playground :load="'https://zuixjs.org/app/widgets/analog-clock'" :menu-items="[
{link: 'https://zuixjs.org/app/examples/new-component', description: 'Hello World'},
{link: 'https://zuixjs.org/app/widgets/time-clock', description: 'Time Clock'},
{link: 'https://zuixjs.org/app/widgets/analog-clock', description: 'Analog Clock'},
{link: 'https://zuixjs.org/app/examples/custom-elements-01', description: 'Custom Elements'}
]"></zx-playground>
