# mdn/dom-examples

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mdn-dom-examples).**

4,005 stars · 1,920 forks · JavaScript · CC0-1.0

## Links

- GitHub: https://github.com/mdn/dom-examples
- Homepage: https://developer.mozilla.org/en-US/docs/Web/API
- awesome-repositories: https://awesome-repositories.com/repository/mdn-dom-examples.md

## Topics

`channel-messaging` `demo` `dom-manipulation` `drag-drop` `javascript` `matchmedia` `mdn` `pointer-events` `pointer-lock` `touch-events`

## Description

This project is a comprehensive reference library of runnable code samples and implementation guides for Web APIs, CSS features, and modular web components. It provides a collection of live demonstrations illustrating how to implement browser APIs and programmatic DOM manipulation.

The repository includes specialized demonstrations for interacting with device hardware, such as sensors, Bluetooth, USB, and foldable screen posture detection. It also features implementation guides for modern styling capabilities, including advanced layout patterns, custom functions, and painting APIs, alongside a reference for building reusable custom elements using shadow DOM structures.

The library covers a broad range of capabilities, including GPU-accelerated graphics rendering, asynchronous network communication, and media playback control. It provides examples for user interaction systems like drag-and-drop and input event tracking, as well as security implementations for authentication and encrypted credentials. Additional coverage includes window management for picture-in-picture documents and data persistence via local storage.

## Tags

### Education & Learning Resources

- [API Reference Demos](https://awesome-repositories.com/f/education-learning-resources/api-reference-demos.md) — Serves as a comprehensive reference library of interactive samples demonstrating how to implement various Web APIs.

### Web Development

- [DOM Manipulation](https://awesome-repositories.com/f/web-development/dom-manipulation.md) — Provides a comprehensive set of examples for programmatically updating the document object model.
- [Asynchronous Resource Fetching](https://awesome-repositories.com/f/web-development/asynchronous-resource-fetching.md) — Demonstrates requesting data from servers asynchronously to update page content without reloading. ([source](https://developer.mozilla.org/en-US/docs/Web/API))
- [Shadow DOM Encapsulation](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures/ui-component-abstractions/shadow-dom-encapsulation.md) — Illustrates how to use shadow DOM to create reusable custom elements with isolated styles.
- [Cross-Context Communication](https://awesome-repositories.com/f/web-development/cross-context-communication.md) — Implements mechanisms for exchanging data and coordinating tasks between different browser script execution contexts. ([source](https://mdn.github.io/dom-examples/channel-messaging-multimessage/))
- [Web Components](https://awesome-repositories.com/f/web-development/web-components.md) — Provides a detailed reference and code samples for building reusable custom elements using shadow DOM structures.
- [Advanced CSS Styling](https://awesome-repositories.com/f/web-development/web-standards/advanced-css-styling.md) — Provides implementation guides and runnable examples for advanced CSS layout patterns, custom functions, and painting APIs.
- [Background Processing Workers](https://awesome-repositories.com/f/web-development/background-processing-workers.md) — Provides utilities for offloading intensive tasks to background workers to maintain UI responsiveness. ([source](https://developer.mozilla.org/en-US/docs/Web/API))
- [CSS Property Support Testers](https://awesome-repositories.com/f/web-development/css-property-support-testers.md) — Implements mechanisms to evaluate browser support for specific CSS properties using native rules and JavaScript. ([source](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection))
- [Typed CSS Arithmetic](https://awesome-repositories.com/f/web-development/typed-css-arithmetic.md) — Provides a system for performing arithmetic operations on typed CSS units and unitless numbers. ([source](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/Using_CSS_typed_arithmetic))
- [Browser Interaction Controls](https://awesome-repositories.com/f/web-development/web-automation-scraping/browser-control-protocols/browser-control-apis/browser-interaction-controls.md) — Provides a mechanism to block standard browser behaviors, such as link opening, during non-primary mouse interactions. ([source](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onauxclick))

### Hardware & IoT

- [Web Hardware APIs](https://awesome-repositories.com/f/hardware-iot/web-hardware-apis.md) — Connects browser scripts to physical hardware using standardized APIs for Bluetooth, USB, and sensors.
- [Device Posture Detection](https://awesome-repositories.com/f/hardware-iot/device-posture-detection.md) — Provides demonstrations for detecting foldable screen postures to create adaptive layouts. ([source](https://developer.mozilla.org/docs/Web/API/Device_Posture_API))
- [Browser Sensor Monitoring](https://awesome-repositories.com/f/hardware-iot/integration-performance/hardware-interfacing-integration/hardware-integration/device-sensors/browser-sensor-monitoring.md) — Implements hooks for tracking real-time data from browser-accessible sensors like accelerometers and gyroscopes. ([source](https://developer.mozilla.org/en-US/docs/Web/API))
- [Web Hardware Interfaces](https://awesome-repositories.com/f/hardware-iot/web-hardware-interfaces.md) — Provides implementation guides for communicating with Bluetooth, USB, and NFC devices via the browser. ([source](https://developer.mozilla.org/en-US/docs/Web/API))

### Networking & Communication

- [Message Channel Ports](https://awesome-repositories.com/f/networking-communication/asynchronous-communication-channels/message-channel-ports.md) — Shows how to create pairs of ports for secure messaging between pages and iframes. ([source](https://developer.mozilla.org/docs/Web/API/Channel_Messaging_API))

### User Interface & Experience

- [DOM Manipulators](https://awesome-repositories.com/f/user-interface-experience/dom-manipulators.md) — Provides practical JavaScript snippets for programmatically modifying the structure and content of the browser DOM.
- [Drag State Monitors](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-state-monitors.md) — Provides event-driven monitoring of when items move, enter, leave, or drop on targets during drag operations. ([source](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API))
- [Drag and Drop Interfaces](https://awesome-repositories.com/f/user-interface-experience/touch-layout-interactions/drag-and-drop-interfaces.md) — Implements a comprehensive system for selecting and moving elements to designated target elements via drag-and-drop. ([source](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API))
- [Drop Target Configuration](https://awesome-repositories.com/f/user-interface-experience/touch-layout-interactions/drag-and-drop-interfaces/drop-target-configuration.md) — Implements the capability to configure specific elements to accept dragged items by intercepting drag-over events. ([source](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API))
- [Always-on-Top Browser Windows](https://awesome-repositories.com/f/user-interface-experience/always-on-top-browser-windows.md) — Implements browser windows that remain visible above other tabs or applications for persistent content display. ([source](http://developer.mozilla.org/docs/Web/API/Document_Picture-in-Picture_API/))
- [Color Value Calculations](https://awesome-repositories.com/f/user-interface-experience/color-systems/color-rendering-adjustments/color-value-calculations.md) — Provides custom CSS functions to calculate semi-transparent, lighter, or darker versions of colors. ([source](https://mdn.github.io/dom-examples/css-custom-functions/color-adjust-functions/))
- [CSS Custom Functions](https://awesome-repositories.com/f/user-interface-experience/css-custom-functions.md) — Implements custom CSS functions to calculate typed units and synchronize property values across elements.
- [CSS Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/css-progress-indicators.md) — Demonstrates visual representations of completion status using native CSS progress functions. ([source](https://mdn.github.io/dom-examples/css-progress))
- [CSS Value Synchronization](https://awesome-repositories.com/f/user-interface-experience/css-value-synchronization.md) — Implements a method to synchronize multiple CSS properties from a shared value across different viewport sizes. ([source](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/Using_CSS_typed_arithmetic))
- [Event-Driven User Interactions](https://awesome-repositories.com/f/user-interface-experience/event-driven-user-interactions.md) — Demonstrates linking browser interface events to application logic for immediate state updates.
- [Gradient Functions](https://awesome-repositories.com/f/user-interface-experience/gradient-styling/gradient-functions.md) — Implements reusable CSS functions to encapsulate complex background gradient logic for consistent application. ([source](https://mdn.github.io/dom-examples/css-custom-functions/gradient-function/))
- [Input Event Tracking](https://awesome-repositories.com/f/user-interface-experience/interaction-tracking/input-event-tracking.md) — Implements a system to monitor pointer events, touch gestures, keyboard input, and gamepad state. ([source](https://developer.mozilla.org/en-US/docs/Web/API))
- [Non-Primary Mouse Click Handling](https://awesome-repositories.com/f/user-interface-experience/non-primary-mouse-click-handling.md) — Provides a system to detect and handle interactions from non-primary pointing device buttons. ([source](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onauxclick))
- [Document Detachment](https://awesome-repositories.com/f/user-interface-experience/picture-in-picture-interfaces/document-detachment.md) — Provides a feature to display an arbitrary HTML document in a floating, always-on-top window. ([source](https://mdn.github.io/dom-examples/document-picture-in-picture/))
- [Picture-in-Picture Styling](https://awesome-repositories.com/f/user-interface-experience/picture-in-picture-interfaces/picture-in-picture-styling.md) — Implements specific CSS rules applied to elements when they are displayed within a picture-in-picture floating window. ([source](http://developer.mozilla.org/docs/Web/API/Document_Picture-in-Picture_API/))
- [Programmatic Background Image Generation](https://awesome-repositories.com/f/user-interface-experience/programmatic-background-image-generation.md) — Implements a worklet-based system to generate complex background images that respond to computed style changes. ([source](https://developer.mozilla.org/docs/Web/API/CSS_Painting_API))
- [Hardware Integration Samples](https://awesome-repositories.com/f/user-interface-experience/programmatic-element-construction/android-view-lifecycle-tracking/custom-view-rendering/camera-preview-embeddings/android-camera-api-examples/hardware-integration-samples.md) — Offers a comprehensive set of educational samples for integrating various device hardware components through web interfaces.
- [Progress Ratio Computations](https://awesome-repositories.com/f/user-interface-experience/progress-ratio-computations.md) — Provides a method for calculating normalized values between thresholds to drive UI animations and layout changes. ([source](https://developer.mozilla.org/en-US/docs/Web/CSS/progress))
- [JavaScript Media Query Evaluation](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/document-media-queries/media-query-observers/javascript-media-query-evaluation.md) — Provides examples of executing media query checks within JavaScript to trigger conditional logic based on device characteristics. ([source](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection))
- [Responsive Layout Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/responsive-layout-styling.md) — Provides examples of assigning different CSS values for narrow and wide layouts to handle conditional styling. ([source](https://mdn.github.io/dom-examples/css-custom-functions/responsive-narrow-wide/))
- [Text Highlighting](https://awesome-repositories.com/f/user-interface-experience/text-highlighting.md) — Demonstrates a system for rendering custom background highlights on text using CSS properties. ([source](https://mdn.github.io/dom-examples/css-painting))

### Graphics & Multimedia

- [Media Capture and Playback](https://awesome-repositories.com/f/graphics-multimedia/audio-music/media-capture-and-playback.md) — Implements systems for capturing and managing audio and video streams directly from the browser. ([source](https://developer.mozilla.org/en-US/docs/Web/API))
- [GPU Accelerated Rendering](https://awesome-repositories.com/f/graphics-multimedia/gpu-accelerated-rendering.md) — Utilizes GPU acceleration to render high-performance 2D and 3D visuals via the canvas API.
- [Real-Time Pixel Manipulation](https://awesome-repositories.com/f/graphics-multimedia/video-frame-capture/canvas-frame-renderers/real-time-pixel-manipulation.md) — Demonstrates manipulating raw pixel data from live video streams using a canvas for real-time effects. ([source](https://developer.mozilla.org/docs/Web/API/Canvas_API/Manipulating_video_using_canvas))

### Security & Cryptography

- [Security and Access Control](https://awesome-repositories.com/f/security-cryptography/security-and-access-control.md) — Implements security patterns for user authentication, encrypted credentials, and the use of trusted types to prevent injection. ([source](https://developer.mozilla.org/en-US/docs/Web/API))

### Software Engineering & Architecture

- [Application Performance Optimization](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/application-performance-tuning/application-performance-optimization.md) — Includes examples for profiling execution speed and scheduling background tasks to optimize application responsiveness. ([source](https://developer.mozilla.org/en-US/docs/Web/API))
- [JavaScript Worker Threads](https://awesome-repositories.com/f/software-engineering-architecture/worker-thread-patterns/javascript-worker-threads.md) — Implements JavaScript worker threads to move heavy computations off the main user interface thread.