Skip to main content

activeElement

Track and access the currently focused DOM element

activeElement provides reactive access to the currently focused DOM element in your application, similar to document.activeElement but with reactive updates.

  • Updates synchronously with DOM focus changes
  • Returns null when no element is focused
  • Safe to use with SSR (Server-Side Rendering)
  • Lightweight alternative to manual focus tracking

Demo

Currently active element: No active element found

Usage

		<script lang="ts">
	import { activeElement } from "runed";
</script>
 
<p>
	Currently active element:
	{activeElement.current?.localName ?? "No active element found"}
</p>
	

Type Definition

		interface ActiveElement {
	readonly current: Element | null;
}