UI & Interaction APIs
Explore and learn about 25 JavaScript APIs in the UI & Interaction category.
Badging
Display a badge on your app icon to indicate status or notifications. Learn how to set and clear badges programmatically.
Clipboard
Programmatically access system clipboard for copying and pasting text, images, and rich content. Handle clipboard events and permissions in web applications.
CSS Object Model
Programmatically create, modify and manage CSS stylesheets and rules. Manipulate styles, create dynamic animations, and handle complex style updates.
CSS Properties
Register and manage custom CSS properties with type checking, inheritance control, and default values. Enable smooth transitions and animations for custom properties.
CSS Typed OM
Work with CSS values and properties using strongly-typed JavaScript objects. Perform calculations, manipulate styles, and handle complex properties with better performance and type safety.
CSS Custom Highlight
Programmatically highlight text ranges without modifying the DOM structure. Create and manage custom text highlights with CSS styling.
Font Loading
Dynamically load and manage custom fonts in web applications. Control font loading states, check availability, and handle loading events programmatically.
Notifications
Display native system notifications from web applications. Learn to create, customize, and handle user interactions with push notifications.
DOM
Programmatically access and modify web page content and structure. The DOM represents HTML documents as a tree of objects that can be manipulated using JavaScript.
Fullscreen
Control fullscreen display mode for web content. Perfect for creating immersive experiences, presentations, and video players with fullscreen capabilities.
HTML DOM
Access and manipulate HTML documents. The HTML DOM API provides interfaces for working with HTML elements, attributes, and document structure.
HTML Drag and Drop
Enable drag and drop functionality in web applications. Perfect for interactive interfaces, file uploads, and reordering elements.
History
Access and manipulate the browser session history, enabling smooth navigation and state management without page reloads.
Houdini
A set of low-level APIs that expose parts of the CSS engine, enabling developers to extend CSS with custom features.
Payment Request
Streamline the checkout process by providing a consistent payment interface for users to select their preferred payment method and provide shipping information.
Pointer Events
Handle mouse, touch, and pen/stylus input through a unified interface, providing a consistent way to handle pointing device input across different hardware.
Pointer Lock
Lock the pointer to the content, enabling immersive experiences like games and applications that require unlimited pointer movement.
Popover
Display non-modal popover content on top of other page content with a standard, consistent mechanism. Perfect for action menus, notifications, form suggestions, and teaching UI.
Resize Observer
Monitor changes to an element's size with performant notifications. Perfect for responsive components, custom layouts, and dynamic UI adjustments.
Selection API
Access and manipulate the portion of a document selected by the user. Perfect for text editors, highlighting tools, and custom selection behaviors.
Touch Events
The Touch Events API provides interfaces for handling touch events on touchscreen devices. It enables web applications to respond to finger (or stylus) movements on touch screens, including multi-touch gestures.
UI Events
The UI Events API defines a system for handling user interactions such as mouse and keyboard input, including events that are fired on specific user actions and event interfaces that provide extra information about the interaction.
URL Fragment Text Directives
URL Fragment Text Directives allow web developers to specify instructions in URL fragments for user agents to process, such as highlighting specific text on a page or scrolling to a specific text fragment.
View Transition
Create smooth transitions between different states of a document. Build engaging UI transitions with minimal code, enhancing user experience during state changes.
Visual Viewport
Access information about the visual viewport - the visible portion of a webpage. Particularly useful for mobile web development where the viewport changes due to zooming and UI elements.