Showcase
Harbor

{ authMode === 'signin' ? 'Welcome back' : 'Create your account' }

{ authMode === 'signin' ? 'Sign in to pick up where your crew left off.' : 'Join communities, find your people and drop anchor.' }

or with email

{ errors.name }

{ errors.email }

{ errors.password }

{ notice }

New to Harbor?

Already have an account?

This is a demo. Any email and password sign you in, nothing leaves your browser.

{ channel() ? channel().name : '' }

Pinned by { user(pinnedMessage().author).name.split(' ')[0] }: { snippet(pinnedMessage()) }

{ resultCount() } { resultCount() === 1 ? 'result' : 'results' } for "{ query }" in #{ channel() ? channel().name : '' }

Welcome to #{ channel() ? channel().name : '' }

This is the start of the #{ channel() ? channel().name : '' } channel. { channel() ? channel().topic : '' }

Nothing matches "{ query }"

Try another word, or search for a person by name.

BOT

Escape to , Enter to

(edited)
{ row.m.attachment.name }{ row.m.attachment.size }
Replying to { user(findMessage(replyTo).author).name }
{ attachment.name } { attachment.size }
{ typingLabel().replace(' is typing', '') } is typing
  • { server().name }
    • { initials(user(uid).name) } { user(uid).name }

Voice connected

{ voice.name } / { voice.serverName }

  • Set status

My account

{ initials(me.name) }

{ me.name }

{ statusLabel(me.status) }

{ 190 - (me.about || '').length } characters left

Appearance

Theme
Accent color

One seed color drives every surface, button and badge in Harbor.

Message display

Preview

{ initials(me.name) }

{ me.name } Today at 10:24 AM

Looking sharp! @Mira the new accent is live.

Badge

Notifications

  • Desktop notifications

    Show a notification when someone mentions you.

  • Message sounds

    Play a soft chime for new messages.

  • Only mentions

    Ignore everything that does not mention you.

  • Reduce motion

    Jump to messages without smooth scrolling.

Reset demo data

Bring back the original servers and messages.
{ initials(user(profileId).name) }

{ user(profileId).name }

{ statusLabel(user(profileId).status) }, { user(profileId).activity }

{ roles[user(profileId).role].name.replace(/s$/, '') }

About

{ user(profileId).about || 'No bio yet.' }

A server is where you and your friends hang out. Give it a name, you can change it later.

{ initials(newServer.name || '?') }
Channel type
{ newChannel.type === 'voice' ? 'Voice' : '#' }

This removes the message for everyone in the channel. You cannot undo it.

{ snippet(findMessage(pendingDelete)) }

{ t.text }