URL-synced state

Every photo in this masonry wall is its own URL, driven by a SvelteKit optional parameter: the page lives at an [[id]] route, and the lightbox is controlled via bind:open / bind:index on Lightbox.Root. Tapping a tile opens the viewer and pushes /examples/lightbox/url-synced-state/5 with SvelteKit shallow routing (goto with shallow: true), swiping rewrites that URL in place (replace: true), and the browser Back button closes the viewer. Loading a photo URL cold serves the viewer already open, straight from the server HTML with per-photo metadata: deep-link visits render the Portal in place (container={null}) instead of moving it into document.body, and Slides ssrSlideShift paints the right photo before hydration. Because the URL writes happen in the gesture callbacks, trigger taps keep the view-transition morph.

See also: State & lifecycle docs