DEV Community

Cover image for 7 JavaScript Web APIs to build Futuristic Websites you didn't know🤯
Tapajyoti Bose
Tapajyoti Bose

Posted on


7 JavaScript Web APIs to build Futuristic Websites you didn't know🤯

With the rapidly changing technologies, developers are being provided with incredible new tools and APIs. But it has been seen that out of the 100+ APIs, only 5% of them are actively used by developers.

Let's take a look at some of the useful Web APIs that can help you skyrocket your website to the moon!🌕🚀

1. Screen Capture API

The Screen Capture API, as the name suggests, allows you to capture the contents of a screen, making the process of building a screen recorder a piece of cake.

You need a video element to display the captured screen. The start button will start the screen capture.

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
<button id="start" class="btn">Start</button>
Enter fullscreen mode Exit fullscreen mode
const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,

startBtn.addEventListener("click", startRecording);
Enter fullscreen mode Exit fullscreen mode

2. Web Share API

The Web Share API allows you to share text, links, and even files from a web page to other apps installed on the device.

async function shareHandler() {
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "",
Enter fullscreen mode Exit fullscreen mode

NOTE: To use the Web Share API, you need an interaction from the user. For example, a button click or a touch event.

3. Intersection Observer API

The Intersection Observer API allows you to detect when an element enters or leaves the viewport. This is exceptionally useful for implementing infinite scroll.

NOTE: The demo uses React because of my personal preference, but you can use any framework or vanilla JavaScript.

4. Clipboard API

The Clipboard API allows you to read and write data to the clipboard. This is useful for implementing the copy to clipboard functionality.

async function copyHandler() {
  const text = "";
Enter fullscreen mode Exit fullscreen mode

5. Screen Wake Lock API

Ever wondered how YouTube prevents the screen from being switched off while playing the video? Well, that's because of the Screen Wake Lock API.

let wakeLock = null;

async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
Enter fullscreen mode Exit fullscreen mode

NOTE: You can only use the Screen Wake Lock API if the page is already visible on the screen. Otherwise, it would throw an error.

6. Screen Orientation API

The Screen Orientation API allows you to check the current orientation of the screen and even lock it to a specific orientation.

async function lockHandler() {
  await screen.orientation.lock("portrait");

function releaseHandler() {

function getOrientation() {
  return screen.orientation.type;
Enter fullscreen mode Exit fullscreen mode


7. Fullscreen API

The Fullscreen API allows you to display an element or the entire page in full screen.

async function enterFullscreen() {
  await document.documentElement.requestFullscreen();

async function exitFullscreen() {
  await document.exitFullscreen();
Enter fullscreen mode Exit fullscreen mode

NOTE: To use the Fullscreen API too, you need an interaction from the user.

Thanks for reading

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow me on Instagram to check out what I am up to recently.

Follow my blogs for bi-weekly new Tidbits on Dev


These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

  1. I am a beginner, how should I learn Front-End Web Dev?
    Look into the following articles:

    1. Front End Development Roadmap
    2. Front End Project Ideas
  2. Would you mentor me?

    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

Top comments (47)

anubarak profile image
Robin Schambach

Liar - I knew them all 😜
Especially intersection observers should be used on many pages in order to increase the performance.

Another great tool for custom management systems or other content like this is the Broadcast channel Api. The Drag and Drop API is also interesting (to avoid library overhead)

htho profile image
Hauke T.

Nice Post.

I'd suggest you to add links to the according MDN pages.

Note that the WebShare API is not available (yet) in Firefox Desktop:

bretbernhoft profile image
Bret Bernhoft

The clipboard API is one of the more powerful tools mentioned on this post, in my opinion. You can add entire files, including images, to a persons clipboard in association with any event. That's a lot of flexibility.

adam_cyclones profile image
Adam Crockett

Learned one or two thanks 🙏

varshithvhegde profile image
Varshith V Hegde

I particularly like screen Capture API

legaciespanda profile image
Ernest Obot


abdulmuminyqn profile image
Abdulmumin yaqeen

Really great API's.

Please is it possible to share media with the Web Share Api?

zalithka profile image
Andre Greeff

the MDN docs for the Web Share API does state:

The Web Share API allows a site to share text, links, files, and other content to user-selected share targets, utilizing the sharing mechanisms of the underlying operating system.

the docs for the navigator.share() also includes a list of shareable types. so yes, you can indeed share "media files". (:

junaidashraf profile image
Junaid Ashraf

Wow it's just amazing, thanks dude. Such a helpful post. My takeaway, Screen Capture API & Intersection Observer API 😋

sarma_akondi_746f338b83b7 profile image
Sarma Akondi


ashutosh_pandey profile image
Ashutosh Pandey

Screen Capture and Screen Orientation API was like......💖

pterpmnta profile image
Pedro Pimienta M.

Great post!!

omprakash2929 profile image

Amezing 🔥🔥

ardhityawiedhairawan profile image
Ardhitya Wiedha Irawan

Thank for sharing. This is awesome!

mezieb profile image
Okoro chimezie bright

Great thanks for sharing👍

hammedcoder profile image

Thanks for this huge resources, please can you share a roadmap for backend with nodejs. Thanks

hammedcoder profile image

Please include a resources for guidance if possible.

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another “Coder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.