dom-examples

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

• 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 simple 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 simple 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 "css-painting" directory contains examples demonstrating the CSS Painting API. See the examples live.

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

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

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

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

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

• The "mediaquerylist" directory contains a simple 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.

• 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 simple 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 "reporting-api" directory contains a couple of simple demos to show usage of the Reprting 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 simple 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 "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 "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 simple 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 "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 "web-animations-api" directory contains Web Animation API demos. See the web animations README for more information.

• The "web-storage" directory contains a simple 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 a simple demo to show usage of the View Transitions API. View the demo live.

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

• The "web-workers" directory contains a simple web worker to demonstrate how Web Workers work. View the demo live.

• 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.