Useful JavaScript libraries
Static doesn't mean boring. Once your HTML is served, client-side JavaScript can give your site smooth animations, interactive maps, live charts, rich forms, confetti on payment success, or a client-side search bar — without a single server to maintain.
This page is a curated list of battle-tested, modern JavaScript libraries that pair well with a Flexweg site. Every one of them works by dropping a <script> tag from a free CDN — no build tooling, no npm, no bundler required (though you can use them that way too if you prefer).
How to use any of these
The minimal recipe works for almost every library listed below:
<!-- In <head> or at the end of <body> -->
<script src="https://cdn.jsdelivr.net/npm/LIBRARY@VERSION/dist/LIBRARY.min.js"></script>
<script>
// Your code using the library
</script>
Replace LIBRARY@VERSION with the right package name and version. Free CDNs that host them: jsDelivr, unpkg, esm.sh.
npm/swiper@11 is safer than npm/swiper (which always serves the latest — so a breaking release can ship your site a broken version overnight). Pick a version when you integrate, bump intentionally.
Animation & motion
GSAP
The industry-standard animation engine — now 100% free for everyone (including commercial use) since early 2025. Used by Apple, Netflix, Nike for their marketing sites. Hand-tunes every property, supports timelines, easings, stagger, ScrollTrigger (scroll-driven animations), morph SVG paths — basically anything you can dream of animating.
<script>
gsap.to('.hero', { y: -20, duration: 0.8, ease: 'power2.out' });
</script>
When to reach for it: hero animations, scroll-driven storytelling, complex sequences, morphing shapes.
Motion
The successor to Framer Motion's vanilla build — modern, tiny (~3 KB minified for the core), Web Animations API under the hood. Simpler to learn than GSAP if you don't need its raw power.
<script>
Motion.animate('.card', { scale: 1.05 }, { duration: 0.3 });
</script>
When to reach for it: micro-interactions, hover effects, page transitions with small bundles.
Lottie Web
Plays After Effects animations as JSON in the browser. Your designer exports a .lottie or .json file from After Effects (via the Bodymovin plugin) — you drop it into a <lottie-player> element and it plays, scalable, vectorial, crisp on every screen.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets.lottiefiles.com/packages/lf20_success.json"
background="transparent" speed="1" loop autoplay></lottie-player>
When to reach for it: polished success animations, illustrations, icon transitions, onboarding flows.
Scroll & interactions
Lenis
Buttery-smooth scrolling that respects accessibility. Unlocks the "award-winning site" feel (think Awwwards) in a few lines. Pairs beautifully with GSAP's ScrollTrigger.
<script>
const lenis = new Lenis();
function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }
requestAnimationFrame(raf);
</script>
When to reach for it: portfolios, agency sites, long-scroll landing pages.
AOS — Animate On Scroll
The lowest-effort way to add "fade in on scroll" reveals. You add data-aos="fade-up" attributes to your HTML and AOS does the rest. No JavaScript to write.
<div data-aos="fade-up">I fade in when you scroll to me</div>
<script>AOS.init();</script>
When to reach for it: marketing sites that need reveals without hand-coding them.
UI components & reactivity
Alpine.js
A reactive JavaScript framework that lives inside your HTML attributes — 15 directives, ~15 KB, no build step. Think "Vue.js for the 95% of sites that don't need a SPA".
<div x-data="{ open: false }">
<button @click="open = !open">Toggle menu</button>
<nav x-show="open">…menu items…</nav>
</div>
When to reach for it: dropdowns, modals, tabs, toggles, counters — anywhere you'd otherwise write repetitive addEventListener + DOM updates.
HTMX
Swap HTML fragments from the server into your page on any user interaction — no JSON, no templating in JS, no frontend framework. Turn your static site dynamic by pointing at an API that returns HTML. Pairs well with serverless functions that return <div> fragments.
<button hx-get="/api/more-items" hx-swap="beforeend" hx-target="#list">
Load more
</button>
<ul id="list"></ul>
When to reach for it: load-more buttons, live form validation, dynamic partials without building a frontend framework.
Swiper
The most capable slider/carousel on the web. Touch-friendly, responsive, supports virtualization for huge lists, parallax, coverflow, you name it. Every major e-commerce and media site uses it.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
<script>new Swiper('.swiper', { loop: true, autoplay: { delay: 3000 } });</script>
When to reach for it: image carousels, testimonials, hero slideshows, product galleries.
Floating UI
The modern replacement for Popper.js — the physics engine behind every well-behaved tooltip, popover, dropdown, autocomplete on the web. Worth pairing with Tippy.js for one-line tooltips.
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>tippy('#my-button', { content: 'Hello!' });</script>
When to reach for it: any UI that needs to position itself smartly next to another element without overflowing the viewport.
Forms
Flatpickr
A lightweight, touch-friendly, keyboard-accessible date picker. Works as a drop-in upgrade for <input type="date"> in browsers where that's still ugly.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flatpickr.min.css">
<input id="date">
<script>flatpickr('#date', { dateFormat: 'Y-m-d' });</script>
Choices.js
A prettier <select> — searchable dropdowns, multi-select with tags, async options. Vanilla JS, no jQuery.
Just-Validate
Declarative client-side form validation without writing regexes or error-handling boilerplate. Works with any form, any framework, any style.
Data visualisation
Chart.js
The quickest way to render clean, responsive, animated charts — line, bar, pie, doughnut, radar, polar. 8 chart types, sensible defaults, great documentation. If you just need a chart, this is it.
<canvas id="sales"></canvas>
<script>
new Chart('sales', {
type: 'bar',
data: { labels: ['Jan','Feb','Mar'], datasets: [{ data: [5,12,8] }] },
});
</script>
Apache ECharts
When Chart.js hits its ceiling. Sophisticated financial charts, 3D visualizations, geo maps, huge-dataset performance. Pays back its extra learning curve if you need serious charts.
D3.js
The ultimate low-level data-viz toolkit. D3 doesn't render for you — it gives you data binding, scales, shapes, axes, force layouts, and leaves the rendering to SVG/Canvas/WebGL. Reach for it when you're building custom visualizations nothing else offers.
Maps
Leaflet
The standard for open-source interactive maps. ~40 KB, works with OpenStreetMap tiles (free, no API key), supports markers, popups, GeoJSON layers, clustering. Used by 100k+ sites.
<div id="map" style="height: 400px;"></div>
<script>
const map = L.map('map').setView([48.8566, 2.3522], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.marker([48.8566, 2.3522]).addTo(map).bindPopup('Paris');
</script>
MapLibre GL
A vector-tile map renderer, the open-source fork of Mapbox GL JS. Pick this when Leaflet's raster tiles aren't smooth enough — smoother zoom, rotatable 3D maps, better styling.
Media
PhotoSwipe
A gorgeous, accessible image lightbox — responsive, zoomable, keyboard-navigable, touch-swipeable. Replaces old libraries like Lightbox or Fancybox with a modern, framework-free implementation.
Plyr
A beautiful, accessible HTML5 video/audio player. Consistent look across browsers, custom controls, captions, chapter markers, playlist support. Works with YouTube, Vimeo and raw files.
Vidstack
The newer generation of media player — built on web components, works with HLS/DASH streaming, analytics-friendly, very customizable UI.
Utilities
Day.js
A 2 KB drop-in replacement for Moment.js — 97% smaller, same API. Parse, format, manipulate, compare dates without shipping 70 KB to your users.
<script>
console.log(dayjs().format('YYYY-MM-DD'));
console.log(dayjs('2026-04-23').fromNow()); // "a month ago"
</script>
Fuse.js
Fuzzy search over a JavaScript array in ~5 KB. Perfect for client-side search boxes that match partial matches and typos without a backend. Great companion when your dataset is small (< ~1000 items) — for bigger datasets see MiniSearch.
canvas-confetti
The best-in-class confetti library — physics-based particles, shapes, colors, runs on a single canvas. Use it on a purchase confirmation page, a form-submit success, a milestone reached.
<script>confetti({ particleCount: 150, spread: 70, origin: { y: 0.6 } });</script>
jsPDF
Generate PDF files client-side from JavaScript — invoices, reports, certificates, event tickets. No server required, the PDF is built in the browser and offered as a download.
<script>
const doc = new jspdf.jsPDF();
doc.text('Hello, PDF!', 10, 10);
doc.save('hello.pdf');
</script>
html2canvas
Screenshot any DOM element into a <canvas> — export a business card, a meme, a chart as a PNG. Pairs with jsPDF for "print this section" features.
Performance
vanilla-lazyload
Lazy-load images, videos, iframes and backgrounds with the native IntersectionObserver — keeps above-the-fold snappy on image-heavy pages. Tiny, framework-free.
Modern browsers support <img loading="lazy"> out of the box. Reach for vanilla-lazyload only when you need things native loading can't do — background images, iframes, CSS-scoped effects.
Pairing these with Flexweg
Everything on this page works out of the box on a Flexweg-hosted site. None of them need a backend, an API key, or a build step. Drop the <script> tag, write a few lines of JS, deploy. For more advanced patterns (proxying secret keys, pulling dynamic data), see:
- Connect to external databases — five patterns for getting real data in and out of a static site.
- Forms on your site — Flexweg's built-in form system.
- Accept payments with Stripe — add a checkout in minutes.
Where to find more
- JavaScript Rising Stars — annual ranking of trending JS projects.
- Awesome Vanilla JS — curated list of framework-free libraries.
- Bundlephobia — check a library's size before you add it.
- CodePen — search for "swiper", "gsap", "leaflet" to see live examples.
Static sites can do 95% of what a full app can do, and every library above proves it.