1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=db9435ae-af56-42b8-99ae-855eefcd59c1 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <link rel="icon" href="./favicon.png" /> 9 <meta name="viewport" content="width=device-width" /> 10 <link 11 href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=JetBrains+Mono:wght@500;700&display=swap" 12 rel="stylesheet" 13 /> 14 <link 15 href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap" 16 rel="stylesheet" 17 /> 18 <link 19 href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" 20 rel="stylesheet" 21 /> 22 <title>EasyNPM | Search. Find. Install.</title><!-- HEAD_svelte-19epqvd_START -->
22<script data-svelte-h="svelte-1oo2ycg">if ('color-theme' in localStorage) { 23 // explicit preference - overrides author's choice 24 localStorage.getItem('color-theme') === 'dark' 25 ? window.document.documentElement.classList.add('dark') 26 : window.document.documentElement.classList.remove('dark'); 27 } else { 28 // browser preference - does not overrides 29 if (window.matchMedia('(prefers-color-scheme: dark)').matches) 30 window.document.documentElement.classList.add('dark'); 31 }</script>
31<!-- HEAD_svelte-19epqvd_END --><!-- HEAD_svelte-10n98ev_START --><meta name="title" content="EasyNPM | Search. Find. Install."><meta name="description" content="The ultra-fast developer companion for discovering npm packages. Search, find, and install with one-click commands."><meta property="og:type" content="website"><meta property="og:url" content="https://easynpm.netlify.app/"><meta property="og:title" content="EasyNPM | Search. Find. Install."><meta property="og:description" content="The ultra-fast developer companion for discovering npm packages. Search, find, and install with one-click commands."><meta property="og:image" content="https://easynpm.netlify.app/logo.png"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://easynpm.netlify.app/"><meta property="twitter:title" content="EasyNPM | Search. Find. Install."><meta property="twitter:description" content="The ultra-fast developer companion for discovering npm packages. Search, find, and install with one-click commands."><meta property="twitter:image" content="https://easynpm.netlify.app/logo.png"><!-- HEAD_svelte-10n98ev_END --> 32 <link href="./_app/immutable/assets/Indicator.Dy6h9WFn.css" rel="stylesheet"> 33 <link href="./_app/immutable/assets/0.CEhy7KjR.css" rel="stylesheet"> 34
34<script 35 async 36 src="https://analytics.umami.is/script.js" 37 data-website-id="56d4494a-17bc-4263-b195-3016c021a458" 38 ></script>
38 39 </head> 40 <body 41 data-sveltekit-preload-data="hover" 42 class="bg-paper font-body text-ink" 43 > 44 <div style="display: contents"> <div class="relative min-h-screen"><nav class="fixed top-0 w-full border-b border-rule backdrop-blur-md" style="z-index: 200; background: var(--color-nav-bg)"><div class="mx-auto flex h-16 items-center justify-between px-5 md:px-6" style="max-width: var(--page-max)"><a href="/" class="flex items-center gap-2 font-display text-xl font-bold tracking-[-0.015em] text-ink transition-opacity duration-[var(--dur-micro)] hover:opacity-70" data-svelte-h="svelte-16b14jb"><span class="material-symbols-outlined text-accent" style="font-size: 22px">search</span> 45 EasyNPM</a> <div class="flex items-center gap-5"><div class="hidden items-center gap-4 md:flex"><a href="/" class="text-sm font-medium transition-colors duration-[var(--dur-short)] text-accent">Home</a> <a href="/search" class="text-sm font-medium transition-colors duration-[var(--dur-short)] text-muted hover:text-ink">Search</a></div> <button aria-label="Dark mode" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"><span class="hidden dark:block"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 46 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg> </span> <span class="block dark:hidden"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg> </span></button> <button type="button" id="bag-trigger" data-testid="nav-bag-open" class="p-2 hover:bg-surface-container rounded-lg transition-all active:scale-95 duration-100 ease-in-out relative" aria-label="Open bag"><span class="material-symbols-outlined text-secondary dark:text-gray-400" data-svelte-h="svelte-1kgbjbc">shopping_bag</span> </button> <div></div> </div></div></nav> <main class="pt-16"><section class="relative px-5 pb-28 pt-32 md:px-6"> <div class="pointer-events-none absolute inset-0 -z-10" style="background: radial-gradient(ellipse 80% 50% at 20% 40%, var(--color-accent-soft) 0%, transparent 70%)"></div> <div class="mx-auto" style="max-width: var(--page-max)"><h1 class="animate-fade-in-up font-display text-display text-ink" style="animation-delay: 0ms; overflow-wrap: anywhere; min-width: 0" data-svelte-h="svelte-nfg84r">Search<span class="text-accent">.</span> Find<span class="text-accent">.</span> Install<span class="text-accent">.</span></h1> <div class="animate-fade-in-up mt-5 h-1 w-16 rounded-pill bg-accent" style="animation-delay: 60ms"></div> <p class="animate-fade-in-up mt-6 max-w-lg text-lg leading-relaxed text-muted" style="animation-delay: 100ms" data-svelte-h="svelte-179ahlh">The developer companion for discovering npm packages. Built for speed, precision, and 47 zero-distraction workflows.</p> <div class="animate-fade-in-up group relative mt-10 max-w-2xl" style="animation-delay: 180ms"><div class="pointer-events-none absolute inset-y-0 left-5 flex items-center" data-svelte-h="svelte-4ddrob"><span class="material-symbols-outlined text-[22px] text-neutral transition-colors duration-[var(--dur-short)] group-focus-within:text-accent">search</span></div> <input id="home-hero-search" data-testid="home-search-input" type="text" placeholder="Search for packages (e.g., react, lodash, tailwind)..." class="w-full rounded-lg border border-rule bg-paper py-5 pl-14 pr-16 text-base text-ink shadow-whisper placeholder:text-neutral focus:border-accent focus:shadow-lifted focus:outline-none" style="transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out)" value=""> <div class="pointer-events-none absolute inset-y-0 right-5 hidden items-center md:flex" data-svelte-h="svelte-1c8qmx8"><kbd class="inline-flex items-center gap-1 rounded-sm border border-rule bg-paper-2 px-2.5 py-1 font-mono text-xs text-neutral"><span class="text-[10px]">â</span>K</kbd></div></div> <div class="animate-fade-in-up mt-6 flex gap-1.5" style="animation-delay: 260ms"><button type="button" data-testid="home-package-manager-npm" class="press rounded-pill px-5 py-2 font-mono text-xs font-medium uppercase tracking-wide transition-colors duration-[var(--dur-short)] bg-ink text-paper shadow-whisper">npm </button><button type="button" data-testid="home-package-manager-yarn" class="press rounded-pill px-5 py-2 font-mono text-xs font-medium uppercase tracking-wide transition-colors duration-[var(--dur-short)] border border-rule text-muted hover:bg-paper-3 hover:text-ink">yarn </button><button type="button" data-testid="home-package-manager-pnpm" class="press rounded-pill px-5 py-2 font-mono text-xs font-medium uppercase tracking-wide transition-colors duration-[var(--dur-short)] border border-rule text-muted hover:bg-paper-3 hover:text-ink">pnpm </button></div></div></section> <div class="px-5 md:px-6" data-svelte-h="svelte-g4xm92"><div class="mx-auto border-t-[3px] border-rule" style="max-width: var(--page-max)"></div></div> <section class="bg-accent-soft px-5 py-24 md:px-6"><div class="mx-auto" style="max-width: var(--page-max)"><div class="grid min-w-0 grid-cols-1 gap-5 md:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)_minmax(0,0.85fr)]"><div class="reveal "><div class="hover-lift flex min-w-0 flex-col overflow-hidden rounded-lg border border-rule bg-paper shadow-whisper"> <div class="h-0.5 bg-accent"></div> <div class="p-7"><div class="flex items-center gap-3"><div class="flex h-9 w-9 items-center justify-center rounded bg-accent-soft"><span class="material-symbols-outlined text-lg text-accent">grid_view</span></div> <h3 class="font-display text-lg font-bold tracking-tight text-ink">Minimal UI </h3></div> <p class="mt-4 text-sm leading-relaxed text-muted">Aggressive focus on readability. No ads, no bloat, just the data you need to make decisions fast. </p></div> <figure class="relative mt-auto border-t border-rule"><img src="/search_result_light.png" alt="EasyNPM search results showing package list with download stats and freshness indicators" class="block w-full object-cover dark:hidden" style="aspect-ratio: 3/2; object-position: left top" loading="lazy"> <img src="/search_result_dark.png" alt="EasyNPM search results showing package list with download stats and freshness indicators" class="hidden w-full object-cover dark:block" style="aspect-ratio: 3/2; object-position: left top" loading="lazy"> <div class="pointer-events-none absolute inset-x-0 bottom-0 h-12" style="background: linear-gradient(to top, var(--color-paper), transparent)"></div> </figure></div> </div><div class="reveal " style="--reveal-delay: 100ms"><div class="hover-lift flex min-w-0 flex-col overflow-hidden rounded-lg border border-rule bg-paper shadow-whisper"> <div class="h-0.5 bg-accent"></div> <div class="p-7"><div class="flex items-center gap-3"><div class="flex h-9 w-9 items-center justify-center rounded bg-accent-soft"><span class="material-symbols-outlined text-lg text-accent">terminal</span></div> <h3 class="font-display text-lg font-bold tracking-tight text-ink">One-click Commands </h3></div> <p class="mt-4 text-sm leading-relaxed text-muted">Instantly copy installation commands for any package manager. Switch between npm, yarn, and pnpm flawlessly. </p></div> <figure class="relative mt-auto border-t border-rule">
47<img src="/one_click_light.png" alt="Install commands for npm, yarn, and pnpm displayed side by side" class="block w-full object-cover dark:hidden" style="aspect-ratio: 3/2; object-position: left bottom" loading="lazy"> <img src="/one_click_dark.png" alt="Install commands for npm, yarn, and pnpm displayed side by side" class="hidden w-full object-cover dark:block" style="aspect-ratio: 3/2; object-position: left bottom" loading="lazy"> <div class="pointer-events-none absolute inset-x-0 bottom-0 h-12" style="background: linear-gradient(to top, var(--color-paper), transparent)"></div> </figure></div> </div><div class="reveal " style="--reveal-delay: 200ms"><div class="hover-lift flex min-w-0 flex-col overflow-hidden rounded-lg border border-rule bg-paper shadow-whisper"> <div class="h-0.5 bg-accent"></div> <div class="p-7"><div class="flex items-center gap-3"><div class="flex h-9 w-9 items-center justify-center rounded bg-accent-soft"><span class="material-symbols-outlined text-lg text-accent">shopping_basket</span></div> <h3 class="font-display text-lg font-bold tracking-tight text-ink">Bag and Copy </h3></div> <p class="mt-4 text-sm leading-relaxed text-muted">Add multiple packages to your "Bag" and generate a single installation command for your project. </p></div> <figure class="relative mt-auto border-t border-rule"><img src="/bag_light.png" alt="Bag popover showing multiple packages ready for batch install" class="block w-full object-cover dark:hidden" style="aspect-ratio: 3/2; object-position: center top" loading="lazy"> <img src="/bag_dark.png" alt="Bag popover showing multiple packages ready for batch install" class="hidden w-full object-cover dark:block" style="aspect-ratio: 3/2; object-position: center top" loading="lazy"> <div class="pointer-events-none absolute inset-x-0 bottom-0 h-12" style="background: linear-gradient(to top, var(--color-paper), transparent)"></div> </figure></div> </div></div></div></section> <section class="px-5 py-28 md:px-6"><div class="mx-auto" style="max-width: var(--page-max)"><div class="flex flex-col gap-12 md:flex-row md:items-center md:gap-16"><div class="reveal flex-1"><h2 class="font-display text-2xl font-bold tracking-tight text-ink md:text-3xl" data-svelte-h="svelte-1m73jgr">Experience Pure Performance</h2> <p class="mt-4 max-w-md text-base leading-relaxed text-muted" data-svelte-h="svelte-114fd0m">We've stripped away everything that slows you down. Search algorithms tuned for 48 high-relevance results. Downloads, stars, and bundle size at a glance.</p> <div class="mt-8 space-y-3"><div class="reveal "><div class="flex items-start gap-3"><div class="mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-accent-soft" data-svelte-h="svelte-1477zxd"><span class="material-symbols-outlined text-accent" style="font-size: 14px">check</span></div> <span class="text-sm font-medium text-ink">Mathematically precise package ranking</span></div> </div><div class="reveal " style="--reveal-delay: 60ms"><div class="flex items-start gap-3"><div class="mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-accent-soft" data-svelte-h="svelte-1477zxd"><span class="material-symbols-outlined text-accent" style="font-size: 14px">check</span></div> <span class="text-sm font-medium text-ink">Live bundle size tracking</span></div> </div><div class="reveal " style="--reveal-delay: 120ms"><div class="flex items-start gap-3"><div class="mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-accent-soft" data-svelte-h="svelte-1477zxd"><span class="material-symbols-outlined text-accent" style="font-size: 14px">check</span></div> <span class="text-sm font-medium text-ink">Real-time dependency graphs</span></div> </div></div></div> <div class="reveal min-w-0 flex-1" style="--reveal-delay: 120ms"><div class="relative" data-svelte-h="svelte-1uhigcn"> <figure class="hover-lift overflow-hidden rounded-lg border border-rule shadow-lifted"><img src="/advanced_filter_light.png" alt="Advanced filtering with quality, popularity, and maintenance sliders alongside search results" class="block w-full dark:hidden" loading="lazy"> <img src="/advanced_filter.png" alt="Advanced filtering with quality, popularity, and maintenance sliders alongside search results" class="hidden w-full dark:block" loading="lazy"></figure> <figure class="absolute -bottom-6 -right-3 hidden w-28 overflow-hidden rounded-lg border border-rule shadow-lifted md:block" style="transform: rotate(2deg)"><img src="/mobile_light.png" alt="EasyNPM mobile search view" class="block w-full dark:hidden" loading="lazy"> <img src="/mobile_dark.png" alt="EasyNPM mobile search view" class="hidden w-full dark:block" loading="lazy"></figure></div></div></div></div></section> <section class="px-5 py-24 md:px-6"><div class="reveal "><div class="relative mx-auto overflow-hidden rounded-xl border border-rule bg-accent-soft p-10 md:p-16" style="max-width: var(--page-max)" data-svelte-h="svelte-15qaq9d"> <div class="pointer-events-none absolute -right-12 -top-12 h-48 w-48 rounded-full bg-accent opacity-[0.07]"></div> <div class="pointer-events-none absolute -bottom-8 -left-8 h-32 w-32 rounded-full bg-accent opacity-[0.05]"></div> <div class="relative flex flex-col gap-10 md:flex-row md:items-center md:justify-between"><div><h2 class="font-display text-2xl font-bold tracking-tight text-ink md:text-3xl">Find your next dependency<span class="text-accent">.</span></h2> <p class="mt-3 max-w-md text-base text-muted">Join developers who have made EasyNPM their default package search.</p></div> <div class="flex flex-shrink-0 flex-col gap-3 sm:flex-row"><a href="/search" data-testid="home-cta-start-search" class="press inline-flex items-center justify-center rounded bg-accent px-7 py-3 text-sm font-semibold text-paper transition-colors duration-[var(--dur-short)] hover:bg-accent-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" style="--tw-outline-color: var(--color-focus)">Start Searching</a> <a href="https://github.com/aksharahegde/easynpm#readme" target="_blank" rel="noopener noreferrer" data-testid="home-cta-documentation" class="press inline-flex items-center justify-center rounded border border-rule bg-paper px-7 py-3 text-sm font-medium text-ink transition-colors duration-[var(--dur-short)] hover:bg-paper-3 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" style="--tw-outline-color: var(--color-focus)">View Documentation</a></div></div></div></div></section> </main> <footer class="border-t border-rule bg-paper-2 px-5 py-16 md:px-6"><div class="mx-auto" style="max-width: var(--page-max)"><p class="font-display text-2xl font-bold tracking-tight text-ink md:text-3xl" style="max-width: 28ch" data-svelte-h="svelte-1enw9ca">The fastest way to find your next dependency.</p> <div class="mt-8 flex flex-col items-start justify-between gap-4 border-t border-rule pt-4 md:flex-row md:items-baseline"><span class="flex items-center gap-1.5 font-display text-base font-bold text-ink" data-svelte-h="svelte-9zfzxv"><span class="material-symbols-outlined text-accent" style="font-size: 18px">search</span> 49 EasyNPM</span> <div class="flex flex-wrap items-baseline gap-4"><a href="https://github.com/aksharahegde/easynpm#readme" target="_blank" rel="noopener noreferrer" class="text-sm text-muted transition-colors duration-[var(--dur-short)] hover:text-ink" data-svelte-h="svelte-1i9cpg7">Docs</a> <a href="https://github.com/aksharahegde/easynpm" target="_blank" rel="noopener noreferrer" class="text-sm text-muted transition-colors duration-[var(--dur-short)] hover:text-ink" data-svelte-h="svelte-179xil0">GitHub</a> <span class="text-sm text-neutral">© 2026 <a href="https://akshara.dev" target="_blank" rel="noopener noreferrer" class="transition-colors hover:text-accent" data-svelte-h="svelte-6itg24">Akshara Hegde</a></span></div></div></div></footer> <button type="button" data-testid="bag-fab-open" class="group animate-gentle-float fixed bottom-8 right-8 z-40 flex h-16 w-16 items-center justify-center rounded-full bg-primary text-on-primary shadow-lg transition-all duration-300 ease-smooth hover:scale-105 hover:bg-accent-orange-hover hover:shadow-xl active:scale-95" aria-label="Open bag"><span class="material-symbols-outlined transition-transform duration-300 group-hover:rotate-6" data-svelte-h="svelte-1sh6tlv">shopping_bag</span> <span class="absolute -top-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full border-2 border-primary bg-surface-container-lowest text-xs font-bold text-primary transition-transform duration-300 dark:bg-gray-800">0</span></button></div> 50 51
51<script> 52 { 53 __sveltekit_11ecdb = { 54 base: new URL(".", location).pathname.slice(0, -1) 55 }; 56 57 const element = document.currentScript.parentElement; 58 59 Promise.all([ 60 import("./_app/immutable/entry/start.DydoQtw6.js"), 61 import("./_app/immutable/entry/app.Cbvl52o2.js") 62 ]).then(([kit, app]) => { 63 kit.start(app, element, { 64 node_ids: [0, 2], 65 data: [null,null], 66 form: null, 67 error: null 68 }); 69 }); 70 } 71 </script>
71 72 </div> 73 </body> 74</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.