# useActiveElement Reactively tracks `document.activeElement` and re-renders whenever focus moves anywhere within the document. Useful for debugging or visualizing which element is currently receiving keyboard / IME input — handy on wallpapers since WebKit does not paint a focus ring on non-key windows. ## Import ```tsx import { useActiveElement } from "@fluxlay/react"; ``` ## Signature ```tsx function useActiveElement(): Element | null; ``` ## Return value The currently focused `Element`, or `null` when nothing meaningful has focus (i.e. focus is on `` or the document itself). The hook subscribes to `focusin` / `focusout` on `document`, so the value updates as soon as focus moves between elements. ## Usage ```tsx import { useActiveElement } from "@fluxlay/react"; function FocusInspector() { const active = useActiveElement(); return focus: {active ? active.tagName.toLowerCase() : "(none)"}; } ``` ## Notes - During SSR (`typeof document === "undefined"`) the initial value is `null`. The hook resyncs on mount. - The hook treats `` and `` as "no active element" and returns `null` for them, since DOM focus parking on `` is the default state and rarely interesting. - For per-element focus state with no document-wide observer cost, prefer [`useIsFocused`](/en/studio/developer/reference/sdk/use-is-focused.md).