mdn/dom-examples

dom-examples

Code examples that accompany various MDN DOM and Web API documentation pages.

[!NOTE] You can include an example directly in MDN pages using {{EmbedLiveSample()}} macros or regular Markdown code blocks. These methods are simpler to maintain as the code lives beside the rest of the content. Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.

Browser support

When creating code examples for a technology that's not yet available in all major browsers, consider using feature detection to fall back to a simpler behavior or inform the user that their browser is not yet supported. Do not specify supported browsers and their versions in code comments or prose, as this information quickly becomes outdated.

Repository contents

• The "abort-api" directory contains an example of how to use the "Abort API" (aka AbortSignal and AbortController). Run the example live.

• The "audiocontext-setsinkid" directory contains an example of how to use the AudioContext.setSinkId() method and related features. Run the example live.

• The "auxclick" directory contains a basic example demonstrating the new auxclick event type. See GlobalEventHandlers.auxclick for more details, or run the example live.

• The "canvas" directory contains an example "chroma-keying" demonstrating how to use the Canvas API to manipulate videos: see Manipulating video using canvas or run the example live.

• The "channel-messaging-basic" directory contains a basic example demonstrating the basics of channel messaging; see Channel Messaging API or run the example live.

• The "channel-messaging-multimessage" directory contains another channel messaging demo, showing how multiple messages can be sent between browsing contexts. See Channel Messaging API for more details. Run the demo live.

• The "contact-picker" directory contains an example showing usage of the Contact Picker API. See the example live.

• The "css-carousels" directory contains two examples showing how to use the CSS Carousel features — a basic example featuring scroll buttons and scroll markers, and an example that also uses the ::columns pseudo-class to paginate the content.

• The "css-custom-functions" directory contains three examples showing how to use CSS custom functions — a set of color adjustment functions, a complex gradient background function, and a responsive narrow/wide value selection function.

• The "css-painting" directory contains examples demonstrating the CSS Painting API. See the examples live.

• The "css-progress" directory contains an example demonstrating the CSS progress() function. See the example live.

• The "css-typed-arithmetic" directory contains an example demonstrating CSS typed arithmetic usage. See the index page to access the live examples.

• The "device-posture-api" directory contains an example demonstrating how to use the Device Posture API. Run the example live.

• The "drag-and-drop" directory is for examples and demos of the HTML Drag and Drop standard.

• The "document-picture-in-picture" directory contains an example showing usage of the Document Picture-in-Picture API. See the example live.

• The "dynamic-range-limit" directory contains an example demonstrating the use of the dynamic-range-limit CSS property. See the live demo.

• The "edit-context" directory contains examples demonstrating the EditContext API. See the list of examples.

• The "file-system-api" directory contains multiple examples demonstrating usage of the File System API:

  • createSyncAccessHandle() mode test: Demonstrates usage of FileSystemFileHandle.createSyncAccessHandle()
  • createWritable() mode test: Demonstrates usage of FileSystemFileHandle.createWritable()
  • FileSystemHandle.remove() demo: Demonstrates usage of FileSystemHandle.remove()
  • File System Observer Demo: Demonstrates usage of the FileSystemObserver API. This example was originally published on Glitch by Thomas Steiner.

• The "fullscreen-api" directory is for examples and demos of the Fullscreen API. Run the example live.

• The "geolocation-element" directory is for examples and demos of the <geolocation> element. Go to the <geolocation> element demo index to see what's available.

• The "history-api" directory contains an example that demonstrates the History API. View the demo live.

• The "indexeddb-api" directory contains a demo for the IndexedDB API.

• The "insert-adjacent" directory contains basic demos for insertAdjacentElement and insertAdjacentText.

• The "interest-invokers" directory is for interest invoker examples. Go to the Interest invoker examples index to see what's available.

• The "launch-handler" directory contains a demo for the Launch Handler API. View the demo live. This example was originally published on Glitch by Thomas Steiner.

• The "local-font-access" directory contains a demo for the Local Font Access API. View the demo live.

• The "matchmedia" directory contains a basic demo to test matchMedia functionality. See Window.matchMedia for more details. Run the demo live.

• The "mediaquerylist" directory contains a basic demo to test more advanced matchMedia/mediaquerylist functionality. See MediaQueryList for more details. Run the demo live.

• The "media" directory contains examples and demos showing how to use HTML and DOM media elements and APIs. It includes a getStartDate() demo showing how to retrieve the real-world start date of an HLS stream using HTMLMediaElement.getStartDate().

• The "media-source-extensions" directory contains examples demonstrating the Media Source Extensions API. It includes a ManagedMediaSource demo showing how to set up a ManagedMediaSource, listen for startstreaming/endstreaming events, and log bufferedchange events.

• The "navigation-api" directory contains a basic example that demonstrates some features of the Navigation API. Run the demo live.

• The "notifications" directory contains one example showing how to make and handle persistent notifications, and another showing how to make and handle non-persistent notifications, using the Notifications API.

  • Run the persistent notifications demo.
  • Run the non-persistent notifications demo

• The "payment-request" directory contains examples of the Payment Request API.

• The "pointerevents" directory is for examples and demos of the Pointer Events standard.

• The "pointer-lock" directory contains a basic demo to show usage of the Pointer Lock API. You can find more explanation of how the demo works at the main MDN Pointer Lock API page. Run the demo live.

• The "popover-api" directory is for examples and demos of the Popover API standard. Go to the Popover API demo index to see what's available.

• The "prompt-api-web-storage" directory contains an example showing how Prompt API context can be saved in Web Storage and then restored again after a page reload. Run the demo live.

• The "reporting-api" directory contains a couple of basic demos to show usage of the Reporting API. You can find more explanation of how the API works in the main MDN Reporting API docs. Run the deprecation report demo live.

• The "resize-event" directory contains a basic demo to show how you can use the resize event. Resize the browser window either by height or width to see the size of your current window. Run the demo live.

• The "responsive-iframe-sizing" directory contains demos illustrating usage of the responsive iframe sizing features. See the responsive iframe sizing README for more information. Run the demos live: Basic demo, requestResize() demo.

• The "screen-capture-api" directory contains demos to show typical usage of the Screen Capture API and Screen Capture Extensions.

• The "screenleft-screentop" directory contains a demo to show how you could use the Window.screenLeft and Window.screenTop properties to draw a circle on a canvas that always stays in the same physical place on the screen when you move your browser window. Run the demo live.

• The "scroll-promises" directory contains demos illustrating usage of the promise-returning scroll methods (for example, Element.scroll()). See the scroll promises README for more information. Run the demos live: Element methods, Window methods.

• The "scrolltooptions" directory contains a demo to show how you could use the ScrollToOptions dictionary along with the Window.ScrollTo() method to programmatically scroll a web page. Run the demo live.

• The "server-sent-events" directory contains a very basic SSE demo that uses PHP to create the server. You can find more information in our Using server-sent events article. To run the demo you'll need to serve the files from a server that supports PHP; MAMP is a good PHP test server environment.

• The "service-worker/simple-service-worker" directory contains a simple demo showing how to use the Service Worker API to manage your page's cache. Run the demo live.

• The "sourcebuffer" directory contains a basic demo to show usage of the SourceBuffer interface. Run the demo live.

• The "streams" directory contains demos of the Streams API for using low-level I/O processing.

• The "touchevents" directory is for examples and demos of the Touch Events standard.

• The "to-do-notifications" directory contains a to-do list notifications app demonstrating IndexedDB API for data storage and Notifications API for deadline alerts. See Checking when a deadline is due for a detailed walkthrough.

• The "viewport-segments-api" directory contains an example demonstrating how to use the Viewport Segments API. Run the example live.

• The "view-transitions" directory contains examples and demos of the View Transition API standard. Go to the View transition API demo index to see what's available.

• The "visual-viewport-api" directory contains a basic demo to show usage of the Visual Viewport API. For more details on how it works, read Visual Viewport API. View the demo live.

• The "web-animations-api" directory contains Web Animation API demos. See the web animations README for more information.

• The "web-storage" directory contains a basic demo to show usage of the Web Storage API. For more detail on how it works, read Using the Web Storage API. View the demo live.

• The "view-transitions" directory contains demos to show usage of the View Transitions API:

  • View transitions in a single-page app
  • View transitions in a multiple-page app
  • Another example of view transitions in a simple multiple-page app
  • The match-element value for the view-transition-name property

• The "web-share" directory contains a basic demo to show usage of the Web Share API. View the demo live.

• The "web-workers" directory contains several demos that show how Web Workers operate. For example, view the live simple web worker demo.

• The "webgl-examples" directory contains a number of WebGL examples that demonstrate the WebGL API, which is used for 2D and 3D graphics on the web.

• The "webgpu-compute-demo" directory contains an example that demonstrates basic usage of the WebGPU API compute pipeline, which is used for performing general computation on the GPU. View the demo live.

• The "webgpu-render-demo" directory contains an example that demonstrates basic usage of the WebGPU API render pipeline, which is used for rendering high-performance graphics via the GPU. View the demo live.

• The "websockets" directory contains an example that demonstrates basic usage of the WebSockets API.

• The "webxr" directory contains an example showing how to start up a WebXR session. See Starting up and shutting down a WebXR session for details.

• The "window-management-api" directory contains a basic demo to show usage of the Window Management API. View the demo live.

Contribute to MDN Web Docs

You can contribute to MDN Web Docs and be a part of our community through content contributions, engineering, or translation work. The MDN Web Docs project welcomes contributions from everyone who shares our goals and wants to contribute constructively and respectfully within our community.

To find out how to get started, see the CONTRIBUTING.md document in this repository. By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to our Code of Conduct.

Get in touch

You can communicate with the MDN Web Docs team and community using the communication channels.