Accessing the Unsplash API with JavaScript

Unsplash is a popular website that offers free high-quality photos from photographers around the world. They also provide a public API that you can use to access their database of images and metadata. In this article, we'll explore how to access the Unsplash API with JavaScript, using examples of different endpoints.

How to Get an Unsplash API Key (Access Key)

1. Create a free developer account at unsplash.com/join.
2. Open your apps dashboard and click New Application.
3. Accept the API terms and guidelines, then fill in your app name and description.
4. Your app is created in Demo mode — copy the Access Key shown on the application page.

New (Demo) apps are limited to 50 requests per hour. To raise the limit, follow the Apply for Production steps in your app dashboard; approved production apps get a higher hourly limit (currently 1,000/hour per the docs).

Authenticate by sending the Access Key in an Authorization header (recommended):

fetch('https://api.unsplash.com/photos/random', {
  headers: { Authorization: 'Client-ID YOUR_ACCESS_KEY' }
});

You can also pass it as a ?client_id=YOUR_ACCESS_KEY query parameter.

Authentication

Once you have your API key, you'll need to include it as an Authorization header in your API requests. Here's an example of how to do this in JavaScript:

const headers = {
  Authorization: 'Client-ID YOUR_ACCESS_KEY',
};

Endpoints

Now that we have our API key and headers set up, let's look at some example code for accessing different endpoints on the Unsplash API.

Search photos

const query = 'dogs';
const url = `https://api.unsplash.com/search/photos?query=${query}`;

fetch(url, { headers })
  .then((response) => response.json())
  .then((data) => console.log(data.results))
  .catch((error) => console.log(error));

This code searches for photos related to "dogs" and logs the results to the console.

Random photo

const url = 'https://api.unsplash.com/photos/random';

fetch(url, { headers })
  .then((response) => response.json())
  .then((data) => console.log(data.urls.regular))
  .catch((error) => console.log(error));

This code gets a random photo from Unsplash and logs the URL of its regular-sized image to the console.

Get collections

const url = 'https://api.unsplash.com/collections';

fetch(url, { headers })
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

This code gets a list of collections on Unsplash and logs them to the console.

Get collection photos

const collectionId = '12345';
const url = `https://api.unsplash.com/collections/${collectionId}/photos`;

fetch(url, { headers })
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

This code gets all the photos in a collection with the ID of 12345 and logs them to the console.

Conclusion

That's it! With these examples, you should now be able to access the Unsplash API with JavaScript and fetch photos and data to use in your applications. Remember to always include your API key in your requests to avoid any errors. If you want to learn more about the Unsplash API and its features, visit https://unsplash.com/developers.