JavaScript APIs: 10 Browser APIs and Libraries Worth Using

"JavaScript APIs" covers three different things: the APIs built into the language and the browser (like fetch, Intl and IntersectionObserver), libraries you install from npm (like Chart.js or Leaflet), and third-party web APIs you call from JavaScript over HTTP. In 2026 the built-in browser APIs cover much of what used to need jQuery, Axios, Moment.js or Lodash, so the best upgrade for most projects is to delete a dependency, not add one. Below are the 10 JavaScript APIs worth knowing, with working code and current browser support.

The three kinds of JavaScript API

Kind	Examples	Where it runs	Cost
Language built-ins	Intl, structuredClone, Object.groupBy, Temporal	Browser and Node.js	Free, zero bundle size
Browser (Web) APIs	fetch, IntersectionObserver, Clipboard, Web Share	Browser (some also in Node)	Free, zero bundle size
Libraries	Chart.js, Leaflet, Three.js, Zod	Wherever you bundle them	Free (mostly MIT), adds KB
Third-party web APIs	Weather, maps, payments, AI	Their servers, called with fetch	Free tiers or paid

MDN's Web API index is the reference for the first two. For the last kind, our free APIs directory lists public APIs with free tiers by category.

Built-in APIs that replace old libraries

These ship in every current browser, so they cost you nothing in bundle size.

1. fetch + AbortController (replaces Axios and $.ajax for most uses)

fetch is in all browsers and built into Node.js 18 and later. The two things people miss from Axios are timeouts and throwing on HTTP errors; both are a few lines:

async function getJSON(url, { timeoutMs = 8000, ...options } = {}) {
  const res = await fetch(url, {
    ...options,
    signal: AbortSignal.timeout(timeoutMs), // aborts the request after timeoutMs
  });
  if (!res.ok) {
    throw new Error(`HTTP ${res.status} for ${url}`); // fetch doesn't throw on 4xx/5xx
  }
  return res.json();
}

const todo = await getJSON('https://jsonplaceholder.typicode.com/todos/1');
console.log(todo.title);

Axios still earns its place if you need upload progress events or interceptors across a large codebase. For everything else, fetch is enough. (The example uses JSONPlaceholder, a free fake REST API; see our JSONPlaceholder guide.)

2. Intl (replaces Moment.js for formatting)

Moment.js describes itself as a legacy project in maintenance mode and gets no new features, so it's a poor choice for new code. For formatting dates, numbers, currencies and relative times, the built-in Intl object does it with locale support included:

const date = new Date('2026-10-11T14:30:00Z');

new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short', timeZone: 'UTC' })
  .format(date); // "Oct 11, 2026, 2:30 PM"

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' })
  .format(1234.5); // "1.234,50 €"

new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
  .format(-1, 'day'); // "yesterday"

3. Temporal (the real fix for dates, not everywhere yet)

Temporal is the new date and time API: immutable values, real time zone support and date arithmetic that doesn't break around daylight saving time. As of October 2026 it ships in Chrome 144+, Firefox 139+ and Node.js 26, but not yet in stable Safari, so MDN still marks it "limited availability". Use the @js-temporal/polyfill or temporal-polyfill package if you need Safari today.

const meeting = Temporal.ZonedDateTime.from('2026-10-11T09:00[America/New_York]');
meeting.add({ days: 30 }).toString();
// "2026-11-10T09:00:00-05:00[America/New_York]"  (DST change handled)

Until Temporal is everywhere, date-fns (v4, MIT) is the lightweight library choice for date arithmetic.

4. structuredClone (replaces _.cloneDeep and the JSON round-trip)

structuredClone has been in all browsers since March 2022 and in Node.js. Unlike JSON.parse(JSON.stringify(x)), it keeps Date, Map, Set and circular references:

const original = { when: new Date(), tags: new Set(['a', 'b']) };
const copy = structuredClone(original);
copy.when instanceof Date; // true

It throws a DataCloneError on functions and DOM nodes, and class instances come back as plain objects.

5. Modern array and object methods (replace much of Lodash)

const users = [
  { name: 'Ana', team: 'web', age: 31 },
  { name: 'Bo', team: 'api', age: 25 },
  { name: 'Cy', team: 'web', age: 40 },
];

Object.groupBy(users, (u) => u.team);       // { web: [...], api: [...] }
users.toSorted((a, b) => a.age - b.age);    // sorted copy, original untouched
users.at(-1);                               // last item
[...new Set(['a', 'b', 'a'])];              // unique values
[[1, [2]], [3]].flat(Infinity);              // [1, 2, 3]

Object.groupBy needs Chrome 117, Firefox 119, Safari 17.4 or Node.js 21 and later. Lodash still helps for debounce/throttle and deep get/set on paths; import single functions (lodash-es) rather than the whole library.

6. IntersectionObserver (lazy loading and infinite scroll)

Instead of listening to scroll and measuring elements, let the browser tell you when something becomes visible:

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      loadMore();
      observer.unobserve(entry.target);
    }
  }
}, { rootMargin: '200px' }); // start 200px before it's on screen

observer.observe(document.querySelector('#sentinel'));

For plain images, <img loading="lazy"> does this with no JavaScript at all.

7. Clipboard and Web Share (copy and native share sheets)

await navigator.clipboard.writeText(location.href); // HTTPS + user gesture required

if (navigator.share) {
  await navigator.share({ title: document.title, url: location.href });
} else {
  // fallback: show your own share links
}

The Web Share API opens the operating system's share sheet. It works in Safari, Chrome on Android, Windows, ChromeOS and macOS (Chrome 128+), but desktop Firefox has it behind a preference, so always feature-detect.

Libraries still worth installing

Some jobs are too big for the platform. These are maintained, MIT or similarly licensed, and the current versions as of October 2026:

8. Chart.js (charts)

Chart.js (v4) draws responsive line, bar, pie and scatter charts on a <canvas> with a small API. Reach for D3 only when you need a custom visualization rather than a standard chart. More options are in our charts category.

import Chart from 'chart.js/auto';

new Chart(document.getElementById('signups'), {
  type: 'line',
  data: {
    labels: ['Jul', 'Aug', 'Sep', 'Oct'],
    datasets: [{ label: 'Signups', data: [120, 190, 260, 310] }],
  },
});

9. Leaflet (interactive maps)

Leaflet (v1.9, BSD-2-Clause) displays interactive maps from any tile source, including free OpenStreetMap tiles (respect the OSM tile usage policy; heavy traffic needs your own or a paid tile provider). Geocoding and routing are separate APIs; see free maps and geocoding APIs.

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors',
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map).bindPopup('Hello');

10. Zod (validate data from APIs)

Data from a third-party API is untrusted. Zod (v4) checks it at runtime and gives you TypeScript types from the same schema:

import { z } from 'zod';

const Todo = z.object({ id: z.number(), title: z.string(), completed: z.boolean() });

const data = await getJSON('https://jsonplaceholder.typicode.com/todos/1');
const todo = Todo.parse(data); // throws with a clear message if the shape is wrong

Honorable mention: Three.js for 3D and WebGL/WebGPU scenes. It's excellent but a big dependency, so only add it if 3D is the point of the page.

What to replace in an older codebase

If you use	Replace with	Notes
jQuery $.ajax / $.get	fetch	Add res.ok check and AbortSignal.timeout
jQuery selectors and events	querySelector, addEventListener	Same behavior, no library
Moment.js formatting	Intl.DateTimeFormat, Intl.RelativeTimeFormat	Built in, locale-aware
Moment.js arithmetic	Temporal (with polyfill) or date-fns	Temporal not in stable Safari yet
_.cloneDeep	structuredClone	Doesn't clone functions
_.groupBy, _.uniq, _.flatten	Object.groupBy, new Set, .flat()	Check your browser targets
Scroll listeners for lazy loading	IntersectionObserver or loading="lazy"	Less code, better performance

Don't rewrite working code for its own sake. Do it when you touch the file anyway, or when the dependency shows up in a security audit or bundle report.

FAQ

What are JavaScript APIs?

Interfaces your JavaScript code can call to get functionality it doesn't implement itself. They include language built-ins (Intl, Math), browser Web APIs (fetch, the DOM, Clipboard), library APIs (Chart.js, Leaflet) and third-party web APIs you call over HTTP.

What are browser APIs?

APIs the browser provides to JavaScript on a web page, also called Web APIs: the DOM, fetch, Web Storage, Geolocation, Canvas, IntersectionObserver and many more. They're documented on MDN's Web APIs page. Some, like fetch and structuredClone, also exist in Node.js.

How do I call an API in JavaScript?

Use fetch: const res = await fetch(url); const data = await res.json();. Check res.ok before reading the body, since fetch only rejects on network errors, not on 404 or 500 responses. Keep API keys on a server; anything in browser code is public.

Are there free JavaScript APIs to practice with?

Yes. JSONPlaceholder returns fake posts and todos with no key, and many weather, maps and open data APIs have free tiers. Our free APIs directory lists them by category with their limits.

Is jQuery still worth learning?

Only if you maintain a codebase that uses it. Everything jQuery made easy (selectors, events, Ajax, class toggling) is now built into the browser with similar syntax, and modern frameworks don't use it.