Reference

Troubleshooting

Troubleshooting

Fixes for the errors and edge cases you are most likely to hit.

May 21, 2026

Written by Devon Aliu

Nothing renders

Almost always a target that did not resolve. createDock runs immediately, so if the script executes before the element exists, the selector returns null.

  • Move the script below the target element, or defer it.

  • Confirm the selector matches exactly one element.

  • Check the console for the target not found warning.

Styles look wrong

Docks scopes its styles to the instance root. If a global reset or utility framework sets styles with higher specificity, those win. Load the Docks stylesheet last, or raise the instance root’s specificity with a wrapper class.

A slot re-renders on every update

The value passed to that slot is changing identity each render — usually an inline arrow function or object literal. Hoist it outside the render, or memoise it.

TypeScriptfix.ts
1// Re-renders every time
2dock.render("panel", { body: () => list(items) })
3
4// Stable
5const body = () => list(items)
6dock.render("panel", { body })

Theme does not follow the OS

An explicit theme option overrides the OS preference for the life of the instance. Pass "auto" if you want it to track prefers-color-scheme.

Memory grows on navigation

Single-page apps that swap routes without calling dock.destroy() leave observers attached. Destroy the instance in your route teardown, then create a fresh one.

Still stuck?

Open an issue with a minimal reproduction — the version, the options you passed, and the smallest markup that shows the problem. That is almost always enough to identify the cause.

Create a free website with Framer, the website builder loved by startups, designers and agencies.