kiwiplugin_uidesigner.html

<template id="uidesigner_tmpl">
    <div style="padding:0 1em;max-height:100%;overflow:auto;">
        <h1>Header H1</h1>
        <h2>Header H2</h2>
        <h3>Header H3</h3>
        <h4>Header H4</h4>
        <h5>Header H5</h5>

        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
            <li>List item 4</li>
            <li>List item 5</li>
        </ul>

        <p>
            Lorem ipsum dolor sit amet, ea affert veritus accusamus ius. Ea vis scaevola maiestatis.
            Per ut doming doctus mentitum. Ius equidem vulputate ex, ne qui ludus eripuit dolorum,
            id rebum meliore ocurreret eos. Dicat eleifend vel te. Mel odio putent id, ut facer
            <a class="u-link">sapientem liberavisse</a> vis.
        </p>

        <h3>IRC message colour tests</h3>
        <p>
            <span class="irc-fg-colour-black">Some black text.</span> 
            <span class="irc-fg-colour-blue">Some blue text.</span> 
            <span class="irc-fg-colour-green">Some green text.</span> 
            <span class="irc-fg-colour-light-red">Some light-red text.</span> 
            <span class="irc-fg-colour-brown">Some brown text.</span> 
            <span class="irc-fg-colour-purple">Some purple text.</span> 
            <span class="irc-fg-colour-orange">Some orange text.</span> 
            <span class="irc-fg-colour-yellow">Some yellow text.</span> 
            <span class="irc-fg-colour-light-green">Some light-green text.</span> 
            <span class="irc-fg-colour-cyan">Some cyan text.</span> 
            <span class="irc-fg-colour-light-cyan">Some light-cyan text.</span> 
            <span class="irc-fg-colour-light-blue">Some light-blue text.</span> 
            <span class="irc-fg-colour-pink">Some pink text.</span> 
            <span class="irc-fg-colour-grey">Some grey text.</span> 
            <span class="irc-fg-colour-light-grey">Some light-grey text.</span> 
        </p>

        <form class="u-form" style="border:1px solid black;">
            Form elements within a .u-form class. Black border just for demonstration.<br />
            <input type="text"> <br />
            <select>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
                <option>Option 5</option>
            </select>
        </form>
    </div>
</template>

<script>
kiwi.plugin('uidesigner', function(kiwi) {
    kiwi.addView('uidesigner', {
        template: '#uidesigner_tmpl',
    });

    let icon = document.createElement('a');
    icon.innerText = 'UI';
    icon.addEventListener('click', function() {
        kiwi.showView('uidesigner');
    });
    kiwi.addUi('input', icon);
});
</script>