/browser

the /browser module provides client-side hydration utilities. it exposes a single hydrate() function that attaches interactivity to markdown rendered using the /palette modules, enabling features such as toggling line numbers or copying code blocks to the clipboard.

hydrate

export function hydrate(signal: any): (node: HTMLElement) => () => void;

hydrate() is framework-agnostic. it returns a function that runs after the element is mounted, and provides a cleanup function that runs on unmount. use it in any environment that supports mount/unmount hooks.

the example below shows usage with Svelte 5 and SvelteKit:

<script>
	import { hydrate } from 'aubade/browser';
	import { navigating } from '$app/state';
</script>

<main {@attach hydrate(navigating.from)}>
	<!-- content here -->
</main>

the {@attach} directive calls hydrate() once the <main> element mounts. passing navigating.from ensures hydration re-runs on client-side navigation, so code block features remain active across page transitions.