Composer

The one thing you type, pinned at the bottom. Enter sends; it grows as you write.

kit.dock()
647 B of CSS · 14 rules
kit.css
kit-web.js for its behaviour

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.dock({
      action: '/r/night-owls/messages',
      placeholder: 'Message Night owls',
      id: 'kit-demo-dock'
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.dock({
        action: '/r/night-owls/messages',
        placeholder: 'Message Night owls',
        id: 'kit-demo-dock'
    });
  OpenVibeKit.enhance(box);
</script>

The HTML it returns · 554 B

<div class="ovk-dock"><form class="ovk-compose" method="post" action="/r/night-owls/messages" id="kit-demo-dock"><label for="kit-demo-dock-input" class="ovk-sr">Message</label><textarea id="kit-demo-dock-input" name="message" rows="1" maxlength="2000" required placeholder="Message Night owls" data-ovk-enter></textarea><button type="submit" class="ovk-go ovk-go--send" aria-label="Send" title="Send"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 20.7V4.2M3.7 12.4l8.3-8.3l8.3 8.3"/></svg></button></form></div>

What it weighs

Its own rules are 1.9 KB, 647 B as sent: 4% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.