https://webapis-playground.vercel.app/_next/static/chunks/pages/index-8fe4c7ba11edcd10848d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{2301:function(e,a,t){"use strict";t.r(a),t.d(a,{default:function(){return n}});var i=t(7294),o=t(6798),s=t(8940),r=t(5893);function n(){var e=function(){var e=(0,i.useState)(s.A),a=e[0],t=e[1],o=(0,i.useState)(""),r=o[0],n=o[1];return(0,i.useEffect)((function(){var e=s.A;if(r){var a=r.toLowerCase();e=e.filter((function(e){var t;return null===(t=e.title)||void 0===t?void 0:t.toLowerCase().includes(a)}))}t(e)}),[r]),{demos:a,searchText:r,setSearchText:n}}(),a=e.demos,t=e.searchText,n=e.setSearchText;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(o.Vr,{placeholder:"Search by API names",value:t,onClear:function(){n("")},onChange:function(e){var a=e.target.value;n(a)}}),a.length?(0,r.jsx)("div",{className:" tw-w-full tw-max-w-container tw-m-auto tw-mt-4 md:tw-mt-8 tw-grid tw-grid-cols-1 tw-gap-4 md:tw-grid-cols-2 lg:tw-grid-cols-3 xl:tw-grid-cols-4 ",children:a.map((function(e,a){return(0,r.jsx)(o.Zb,{data:e},a)}))}):(0,r.jsx)("div",{className:"not-found",children:"No matched demo found"})]})}},8940:function(e,a,t){"use strict";t.d(a,{A:function(){return i},Q:function(){return o}});var i=[{id:"filesystem-api",title:"File System API",emoji:"\ud83d\udcc2",description:"Only for Chromium-based web browsers. The File System Access API makes it easy and simple to read and write the user's files and access the file system.",meta:{author:{name:"Usman Sabuwala",social:{twitter:"MaxProgramming1"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API",canIUseURL:"https://caniuse.com/mdn-api_window_showopenfilepicker"}},{id:"fullscreen",title:"FullScreen API",emoji:"\ud83d\udcfa",description:"The Fullscreen API adds methods to present a specific Element (and its descriptionendants) in full-screen mode, and to exit full-screen mode once it is no longer needed.",meta:{author:{name:"Tapas Adhikary",social:{email:"[email protected]",twitter:"tapasadhikary"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API",canIUseURL:"https://caniuse.com/fullscreen"}},{id:"clipboard",title:"Clipboard API",emoji:"\ud83d\udccb",description:"The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard.",meta:{author:{name:"Tapas Adhikary",social:{email:"[email protected]",twitter:"tapasadhikary"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API",canIUseURL:"https://caniuse.com/async-clipboard"}},{id:"broadcast-channel",title:"Broadcast",emoji:"\ud83d\udce1",description:"The BroadcastChannel is a named channel that allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin.",meta:{author:{name:"Tapas Adhikary",social:{email:"[email protected]",twitter:"tapasadhikary"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API",canIUseURL:"https://caniuse.com/broadcastchannel"}},{id:"network-information",title:"Network Info",emoji:"\ud83d\udcf6",description:"The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.).",meta:{author:{name:"Tapas Adhikary",social:{email:"[email protected]",twitter:"tapasadhikary"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API",canIUseURL:"https://caniuse.com/netinfo"}},{id:"resize-observer",title:"Resize Observer",emoji:"\ud83e\uddd0",description:"The Resize Observer API provides a performant mechanism by which code can monitor an element for changes to its size, with notifications.",meta:{author:{name:"Tapas Adhikary",social:{email:"[email protected]",twitter:"tapasadhikary"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API",canIUseURL:"https://caniuse.com/mdn-api_resizeobserver"}},{id:"web-payments",title:"Web payment API",emoji:"\ud83d\udcb3",description:"The Payment Request API provides a consistent user experience for both merchants and users. Select a preferred way to pay for things.",meta:{author:{name:"Tapas Adhikary",social:{twitter:"tapasadhikary",email:"[email protected]"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API",canIUseURL:"https://caniuse.com/payment-request"}},{id:"vibration",title:"Vibration API",emoji:"\ud83d\udcf3",description:"Most modern mobile devices include vibration hardware, which lets software code provide physical feedback to the user by causing the device to shake.",meta:{author:{name:"Tapas Adhikary",social:{twitter:"tapasadhikary",email:"[email protected]"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API",canIUseURL:"https://caniuse.com/vibration"}},{id:"battery-status",title:"Battery API",emoji:"\ud83d\udd0b",description:"The Battery Status API, more often referred to as the Battery API, provides information about the system's battery charge level",meta:{author:{name:"Tapas Adhikary",social:{twitter:"tapasadhikary",email:"[email protected]"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API",canIUseURL:"https://caniuse.com/battery-status"}}

1,{id:"drag-and-drop",title:"Drag and Drop",emoji:"\ud83d\udc22",description:"HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers.",meta:{author:{name:"Tapas Adhikary",social:{twitter:"tapasadhikary",email:"[email protected]"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API",canIUseURL:"https://caniuse.com/dragndrop"}},{id:"image-capture",title:"Image Capture",emoji:"\ud83d\udcf8",description:"The ImageCapture interface provides methods to enable the capture of images or photos from a camera or other photographic device.",meta:{author:{name:"Tapas Adhikary",social:{twitter:"tapasadhikary",email:"[email protected]"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API",canIUseURL:"https://caniuse.com/mdn-api_imagecapture"}},{id:"web-share-api",title:"Web Share API",emoji:"\ud83d\udd17",description:"The Web Share API helps in invoking the native sharing mechanism of the user&#x27;s device",meta:{author:{name:"Usman Sabuwala",social:{twitter:"MaxProgramming1",email:"[email protected]"}},apiDocURL:" https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API",canIUseURL:"https://caniuse.com/web-share"}},{id:"geolocation",title:"Geolocation API",emoji:"\u2693",description:"The Geolocation API allows the user to provide their location to web applications if they so desire. This demo shows how it works using an example.",meta:{author:{name:"Sameer Waskar",social:{twitter:"SameerWaskar",email:"[email protected]"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API",canIUseURL:"https://caniuse.com/mdn-api_geolocation"}},{id:"picture-in-picture",title:"Picture in Picture",emoji:"\ud83d\uddbc\ufe0f",description:"Picture-in-picture is a feature supported by some smart TVs, devices to show the content on a floating window. It allows users to continue to see the content while interacting with the background page, other sites.",meta:{author:{name:"Tapas Adhikary",social:{twitter:"tapasadhikary",email:"[email protected]"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API",canIUseURL:"https://caniuse.com/picture-in-picture"}},{id:"screen-capture",title:"Screen Capture",emoji:"\ud83d\udcbb",description:"The Screen Capture demo introduces additions to the existing Media Capture and Streams API to let the user select a screen to capture as a media stream",meta:{author:{name:"Koustov",social:{twitter:"koustov",email:"[email protected]"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API",canIUseURL:"https://caniuse.com/DisplayMedia"}},{id:"web-speech",title:"Web Speech API",emoji:"\ud83c\udf99\ufe0f",description:"The Web Speech API enables you to incorporate voice data into web apps. ",meta:{author:{name:"Abiola Farounbi",social:{twitter:"abiolaEsther_",email:"[email protected]"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API",canIUseURL:"https://caniuse.com/speech-recognition"}},{id:"font-loading",title:"CSS Font Loading API",emoji:"\u270d\ufe0f",description:"The CSS Font Loading API provides events and interfaces for dynamically loading font resources",meta:{author:{name:"Emit Dutcher",social:{twitter:"develemit",email:"[email protected]"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API",canIUseURL:"font-loading"}},{id:"pointer-capture",emoji:"\ud83d\udc46",title:"Pointer Capture API",description:"Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers).",meta:{author:{name:"Supriya M",social:{email:"[email protected]",github:"supminn",twitter:"supminn"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events",canIUseURL:"https://caniuse.com/pointer"}},{id:"canvas-api",emoji:"\ud83c\udfa8",title:"Canvas API",description:"The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. It can be use for animation, game graphics, data visualization, photo manipulation and real-time video processing. This API is largely focuses on 2D graphics.",meta:{author:{name:"Richard Nikolas",social:{email:"[email protected]",github:"richardnikolas",twitter:"RichardTiti"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API",canIUseURL:"https://caniuse.com/canvas"}},{id:"url-api",emoji:"\ud83c\udf10",title:"URL API",description:"The URL API is a component of the URL standard, which defines what constitutes a valid Uniform Resource Locator and the API that provides an easy way to parse, construct, normalize and encode URLs. The URL standard also defines concepts such as domains, hosts, and IP addresses.",meta:{author:{name:"Williams Samuel",social:{email:"[email protected]",github:"williamssam",twitter:"williams_codes"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/URL_API",canIUseURL:"https://caniuse.com/url"}},{id:"page-visibility",emoji:"\ud83d\udcc3",title:"Page Visibility API",description:"The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page. This means that when the user minimizes the window or switches to another tab, an event will be sent.",meta:{author:{name:"Williams Samuel",social:{email:"[email protected]",github:"williamssam",twitter:"williams_codes"}},apiDocURL:"",canIUseURL:"https://caniuse.com/pagevisibility"}},{id:"selection-api",emoji:"\ud83d\uddd2\ufe0f",title:"Selection API",description:"The Selection API enables developers to access and manipulate the portion of a document selected by the user.",meta:{author:{name:"ArunKumar Nadikattu",social:{email:"[email protected]",github:"Aru-Ku",twitter:"Aru_Ku_"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/Selection_API",canIUseURL:"https://caniuse.com/selection-api"}},{id:"eyedropper-api",emoji:"\ud83d\udc41\ufe0f\u200d\ud83d\udde8",title:"EyeDropper API",description:"The EyeDropper API provides a mechanism for creating an eyedropper tool. Using this tool, users can sample colors from their screens, including outside of the browser window.",meta:{author:{name:"Williams Samuel",social:{email:"[email protected]",github:"williamssam",twitter:"williams_codes"}},apiDocURL:"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API",canIUseURL:"https://caniuse.com/mdn-api_eyedropper"}},{id:"webrtc",emoji:"\ud83d\udcac",title:"WebRTC",description:"WebRTC is a technology that offers real-time communication capabilities to your application allowing developers to build powerful voice and video communication solutions.",meta:{author:{name:"Geovana S. Ribeiro",social:{email:"[email protected]",github:"raveenita",twitter:"raveenita"}},apiDocURL:"",canIUseURL:"https://caniuse.com/rtcpeerconnection"}},{id:"beacon-api",emoji:"\ud83d\udce1",title:"Beacon API",description:"The Beacon API is used to send an asynchronous and non-blocking request to a web server. The request does not expect a response. This demo shows how it works using an example.",meta:{author:{name:"Ra\xfal",social:{email:"[email protected]",github:"raulfb",twitter:"raulfb28"}},apiDocURL:"",canIUseURL:"https://caniuse.com/?search&#x3D;beacon%20api"}}],o=function(e){return i.find((function(a){return a.id===e}))}},6057:function(e,a,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return t(2301)}])}},function(e){e.O(0,[774,888,179],(function(){return a=6057,e(e.s=a);var a}));var a=e.O();_N_E=a}]);