# Header & Footer > Persistent header and footer snippets that render above and below all messages — typing indicators, channel banners, and more without fake message injection. **Source:** [https://virtualchat.svelte.page/examples/header-footer](https://virtualchat.svelte.page/examples/header-footer) **Markdown mirror:** [https://virtualchat.svelte.page/examples/header-footer.md](https://virtualchat.svelte.page/examples/header-footer.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: header & footer. Persistent header and footer snippets render above and below all messages without injecting fake chat rows. **Metadata:** tag: `SNIPPETS` | slots: `header · footer` ### Notes - The `header` and `footer` snippets render persistent content above and below messages — no fake entries injected into the messages array. - Both live outside the virtual scroll machinery — always in the DOM, never virtualized away. Omit them and the component behaves exactly as before. - Footer height changes are tracked via ResizeObserver. When a typing indicator appears, the viewport snaps to bottom automatically if you were following. - Headers suit "load more" buttons, date separators, or channel banners. With few messages the bottom-gravity layout still pushes everything — header included — down. ### Source #### HeaderFooterChat.svelte Source file: [src/lib/examples/header-footer/demos/HeaderFooterChat.svelte](https://github.com/humanspeak/svelte-virtual-chat/blob/main/docs/src/lib/examples/header-footer/demos/HeaderFooterChat.svelte) ```svelte

file · HeaderFooterChat.svelte messages {messages.length} {#if isFollowing}● following{:else}○ scrolled away{/if}

msg.id} estimatedMessageHeight={80} followBottomThresholdPx={48} overscan={6} onFollowBottomChange={(following: boolean) => (isFollowing = following)} onDebugInfo={(info: SvelteVirtualChatDebugInfo) => (debugInfo = info)} containerClass="h-[500px]" viewportClass="h-full" testId="header-footer-chat" > {#snippet header()}

header beginning of conversation · {messages.length} message{messages.length !== 1 ? 's' : ''}

{/snippet} {#snippet renderMessage(message: Message)}

{message.role === 'user' ? 'you' : 'assistant'} {formatTime(message.timestamp)}

{message.content}

{/snippet} {#snippet footer()} {#if showTyping}

assistant is typing…

{/if} {/snippet}

{#if debugInfo}

total · {debugInfo.totalMessages}

in dom · {debugInfo.renderedCount}

measured · {debugInfo.measuredCount}

range · {debugInfo.startIndex}–{debugInfo.endIndex}

height · {Math.round(debugInfo.totalHeight)}px

scroll · {debugInfo.isFollowingBottom ? 'following' : `${Math.round(debugInfo.scrollTop)}px`}

{/if}

```