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</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-10tcxp6_START --><meta name="title" content="EasyNPM | Search"><meta name="description" content="Search npm packages with advanced filters, one-click install commands, and bag support."><!-- HEAD_svelte-10tcxp6_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-muted hover:text-ink">Home</a> <a href="/search" class="text-sm font-medium transition-colors duration-[var(--dur-short)] text-accent">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"><div class="mx-auto min-h-[calc(100vh-8rem)] max-w-container-max px-margin-mobile py-stack-lg text-left md:px-gutter"><div class="flex flex-col gap-stack-md"><div class="flex items-center gap-stack-sm"><div class="group relative flex-1"><div class="pointer-events-none absolute inset-y-0 left-4 flex items-center transition-transform duration-300 ease-smooth group-focus-within:scale-110" data-svelte-h="svelte-bstsbc"><span class="material-symbols-outlined text-slate-muted transition-colors duration-300 group-focus-within:text-primary">search</span></div> <input id="search-input" data-testid="search-input" type="text" placeholder="Search for packages (e.g., react, lodash, tailwind)..." class="w-full rounded-xl border border-surface-border bg-surface-container-lowest py-4 pl-14 pr-14 font-body-md text-body-md text-on-surface shadow-sm transition-all duration-300 ease-smooth focus:outline-none focus:ring-2 focus:ring-primary focus:shadow-md dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" value=""> <div class="pointer-events-none absolute inset-y-0 right-4 hidden items-center md:flex" data-svelte-h="svelte-1fhd673"><kbd class="inline-flex items-center gap-1 rounded border border-surface-border bg-surface-container px-2 py-1 font-code-snippet text-body-sm text-slate-muted dark:border-gray-600 dark:bg-gray-700"><span class="text-xs">â</span>K</kbd></div></div> <button type="button" data-testid="search-filter-toggle" class="interactive-press relative flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-xl border border-surface-border bg-surface-container-lowest text-secondary transition-all duration-300 hover:border-primary/30 hover:text-primary dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400" aria-label="Toggle advanced filters" aria-expanded="false"><span class="material-symbols-outlined" data-svelte-h="svelte-ki3ow1">tune</span> </button></div> <div class="mt-stack-md flex flex-col items-center gap-stack-md rounded-xl border border-surface-border bg-surface-container-low p-stack-lg text-center dark:border-gray-700 dark:bg-gray-800 md:flex-row md:text-left" data-svelte-h="svelte-tfk8ql"><span class="material-symbols-outlined text-5xl text-primary">package_2</span> <div><h2 class="font-headline-lg text-headline-lg text-slate-text dark:text-gray-100">Start searching</h2> <p class="mt-2 font-body-md text-body-md text-slate-muted dark:text-gray-400">Enter a package name to discover npm packages with scores, install c
46ommands, and more.</p></div></div></div></div> </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> 47 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> 48 49
49<script> 50 { 51 __sveltekit_11ecdb = { 52 base: new URL(".", location).pathname.slice(0, -1) 53 }; 54 55 const element = document.currentScript.parentElement; 56 57 Promise.all([ 58 import("./_app/immutable/entry/start.DydoQtw6.js"), 59 import("./_app/immutable/entry/app.Cbvl52o2.js") 60 ]).then(([kit, app]) => { 61 kit.start(app, element, { 62 node_ids: [0, 3], 63 data: [null,null], 64 form: null, 65 error: null 66 }); 67 }); 68 } 69 </script>
69 70 </div> 71 </body> 72</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.