WorkspaceRelay — IRC community room
Find your next idea/Create
TEMPLATE

Relay — IRC community room

A compact chat-room layout with a channel rail, timestamped messages, member presence and safe local message composition.

S studioUpdated Oct 5, 2026Revision 1
Remix this Present Download
LIVE PREVIEW Isolated & interactive
<!-- Original layout, SVG/CSS artwork and JavaScript © 2026 XXC Templates. MIT License.
Visual pattern references (original code, names and content; no affiliation):
Chaos Computer Club: https://www.ccc.de/en/
Technical community identity, a compact news archive and persistent topic navigation.
Discourse Meta: https://meta.discourse.org/
Discussion rows with category markers, reply counts and activity metadata.
Illustrative sample content and data; no real accounts, payments, reservations or messages. -->
<header><b>relay</b><span>an unhurried place to talk</span><small>LOCAL DEMO</small></header>
<main>
  <aside>
    <h2>CHANNELS</h2>
    <button data-room="workshop" aria-pressed="true"># workshop</button
    ><button id="change" data-room="offtopic" aria-pressed="false"># off-topic</button
    ><button data-room="help" aria-pressed="false"># help-desk</button>
    <h2>AROUND TODAY</h2>
    <p><i></i> mira</p>
    <p><i></i> fern</p>
    <p><i class="away"></i> circuit</p>
  </aside>
  <section class="chat">
    <div class="topic">
      <h1 id="room-name"># workshop</h1>
      <p id="room-topic">Show your work. Ask a question. Enjoy the process.</p>
    </div>
    <div id="messages" role="log" aria-label="Sample chat messages">
      <p><time>14:02</time><b>mira</b><span>Finally got the little radio to work.</span></p>
      <p><time>14:04</time><b>fern</b><span>That moment when the circuit makes sense ✨</span></p>
      <p>
        <time>14:06</time><b>circuit</b
        ><span>Photos, please. Especially the questionable soldering.</span>
      </p>
    </div>
    <div class="compose">
      <label class="sr-only" for="message">Message</label
      ><input id="message" maxlength="300" placeholder="Write a local demo message…" /><button
        id="send"
      >
        SEND ↵
      </button>
    </div>
    <output data-status aria-live="polite"></output>
  </section>
</main>
<footer>
  <footer class="demo-note">Fictional brand · local interface demo · no information is sent</footer>
</footer>
Revision history · 1 versions
v12026-10-05 18:26:30 UTC

Keep the ideas flowing.

Explore the library
HELP KEEP THE WORKSHOP USEFUL

Report this creation
ONE QUICK CHECK

Continue?