10 native web APIs instead of JS libraries

Native Web APIs: 10 Alternatives to Popular JS Libraries

Fetch replaces Axios, jQuery.ajax, and similar libraries. Available since 2017 in all modern browsers, it supports promises, streaming, and all HTTP methods.

Example with Axios:

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

const { data: users } = await api.get('/users');

Native alternative:

const BASE_URL = 'https://api.example.com';

const res = await fetch(`${BASE_URL}/users`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const users = await res.json();

const res2 = await fetch(`${BASE_URL}/users`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Marvel', role: 'developer' })
});
const newUser = await res2.json();

For cancellation, use AbortController:

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });
controller.abort();

When to use libraries: in large projects requiring interceptors, retry logic, or centralized authentication.

FormData for Form Serialization

FormData automates form data collection—including files—without manual parsing. Available since 2015.

Instead of manual handling:

const formData = new FormData(form);

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
});

Programmatic creation:

const formData = new FormData();
formData.append('name', 'Marvel');
formData.append('avatar', fileInput.files[0]);

The browser automatically sets multipart/form-data with a boundary.

Limitations: no built-in validation or multi-step form state management—use React Hook Form or Formik here.

URL and URLSearchParams for Link Parsing

Native URL and URLSearchParams classes replace regex and libraries like URL.js. Full support since 2018.

const url = new URL('https://example.com/search?q=web+apis&page=2&sort=recent#results');

url.hostname; // 'example.com'
url.searchParams.get('q'); // 'web apis'

url.searchParams.set('page', '3');
url.searchParams.append('filter', 'new');
console.log(url.toString());

Creating query strings:

const params = new URLSearchParams({ q: 'hello world', page: '1' });
params.toString(); // 'q=hello+world&page=1'

Automatic encoding/decoding prevents parsing errors.

Popover API for Floating Elements

As of January 2025 (Chrome 114+, Firefox 125+, Safari 17+), the Popover API enables tooltips, dropdowns, and popovers without Floating UI or Tippy.js.

HTML markup:

<button popovertarget="my-popover">Toggle popover</button>
<div id="my-popover" popover>Popover content</div>

Programmatic control:

const popover = document.querySelector('#my-popover');
popover.showPopover();
popover.hidePopover();

Styling:

#my-popover:popover-open {
  animation: fadeIn 0.2s ease-out;
}
#my-popover::backdrop {
  background: rgba(0, 0, 0, 0.15);
}

Built-in support for top layer, light dismiss (Esc/click outside), focus trap, and keyboard navigation.

popover="auto" — auto-close, popover="manual" — explicit close.

When libraries are better: when precise positioning with middleware (flip, shift) is needed.

Benefits of Native APIs

Switching to built-in interfaces delivers:

• Zero bundle size — APIs are part of the browser engine
• Performance — execution off the main thread where possible
• Maintenance — updates from browser vendors
• Compatibility — works in Node.js (where available)
• Fewer vulnerabilities — no third-party code

What Matters

• Native APIs cover 80–90% of common tasks, reducing dependencies
• Fetch + AbortController fully replace basic HTTP clients
• FormData handles 95% of form upload scenarios without libraries
• URLSearchParams eliminates regex-related parsing errors
• Popover API standardizes accessible UI components

These interfaces let you optimize mid-to-senior-level projects without sacrificing functionality.

— Editorial Team