DEV Community

Cover image for New EyeDropper Web API
Nikita Makhov
Nikita Makhov

Posted on

1 1

New EyeDropper Web API

So, there is new cool Web API which currently is in draft state, but has all chances to be released in all modern browsers. EyeDropper lets you pick colors not only in your browser, but in other windows, which is cool for online editors like Figma, for example.

You can look at specs here and here.

To try new API we need to download Chrome Canary (the exact support is starting from Chrome 95 version).

First, let's make classic check for Eyedropper support:

if (window.EyeDropper == undefined) {
    console.error('EyeDropper API is not supported on this platform');
}
Enter fullscreen mode Exit fullscreen mode

This will ensure, that we have support of this feature and can go on.

Now, time for magic πŸͺ„

await new EyeDropper().open()
Enter fullscreen mode Exit fullscreen mode

Alt Text

To be more specific, I've prepared a little demo of how this might work.

Heroku

Amplify your impact where it matters most β€” building exceptional apps.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

Image of DataStax

AI Agents Made Easy with Langflow

Connect models, vector stores, memory and other AI building blocks with the click of a button to build and deploy AI-powered agents.

Get started for free

πŸ‘‹ Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay