Repository files navigation

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" (akaAbortSignal andAbortController).Run the example live.

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

• The "auxclick" directory contains a basic example demonstrating the newauxclick event type. SeeGlobalEventHandlers.auxclick for more details, orrun the example live.

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

• The "channel-messaging-basic" directory contains a basic example demonstrating the basics of channel messaging; seeChannel Messaging API orrun the example live.

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

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

• The "css-painting" directory contains examples demonstrating theCSS Painting API. See theexamples live.

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

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

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

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

• The "edit-context" directory contains examples demonstrating theEditContext API. See thelist of examples.

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

  • createSyncAccessHandle() mode test: Demonstrates usage ofFileSystemFileHandle.createSyncAccessHandle()
  • createWritable() mode test: Demonstrates usage ofFileSystemFileHandle.createWritable()
  • FileSystemHandle.remove() demo: Demonstrates usage ofFileSystemHandle.remove()
  • File System Observer Demo: Demonstrates usage of theFileSystemObserver API. This example was originally published on Glitch byThomas Steiner.

• The "fullscreen-api" directory is for examples and demos of theFullscreen API. Run theexample live.

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

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

• The "insert-adjacent" directory contains basic demos forinsertAdjacentElement andinsertAdjacentText.

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

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

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

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

• The "media" directory contains examples and demos showing how to use HTML and DOMmedia elements and APIs.

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

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

• The "pointerevents" directory is for examples and demos of thePointer 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 MDNPointer Lock API page.Run the demo live.

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

• 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 MDNReporting API docs.Run the deprecation report demo live.

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

• The "screen-capture-api" directory contains demos to show typical usage of theScreen Capture API andScreen Capture Extensions.

• The "screenleft-screentop" directory contains a demo to show how you could use theWindow.screenLeft andWindow.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 theScrollToOptions dictionary along with theWindow.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 ourUsing 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 theService Worker API to manage your page's cache.Run the demo live.

• The "sourcebuffer" directory contains a basic demo to show usage of theSourceBuffer 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 theTouch Events standard.

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

• The "web-animations-api" directory containsWeb Animation API demos. See theweb 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, readUsing the Web Storage API.View the demo live.

• The "view-transitions" directory contains demos to show usage of theView Transitions API, for single-page app (View the SPA demo live) and multiple-page app (View the MPA demo live) view transitions. We've also included a demo to demonstrate the effect of theview-transition-name propertymatch-element value (View thematch-element demo live).

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

• The "web-workers" directory contains several demos that show howWeb Workers operate. For example, view the livesimple web worker demo.

• The"webgl-examples" directory contains a number of WebGL examples that demonstrate theWebGL 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 theWebGPU 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 theWebGPU API render pipeline, which is used for rendering high-performance graphics via the GPU.View the demo live.

• The "webxr" directory contains an example showing how tostart up a WebXR session.SeeStarting up and shutting down a WebXR session for details.

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

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 theCONTRIBUTING.md document in this repository.By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to ourCode of Conduct.

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