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.

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>
	

Notes

  • 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

Type Definition

		interface ActiveElement {
	readonly current: Element | null;
}