<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8">  <meta class="r-meta-e" content="width=device-width, initial-scale=1" name="viewport"> <meta class="r-meta-e" name="description" content="Load modern JavaScript packages built for you on-demand. Works in modern web browsers, node.js, and deno."> <meta class="r-meta-e" content="jsdelivr, cdn, npm, github, js, javascript, free, open source, oss, deno, wordpress" name="keywords"> <meta class="r-meta-e" content="en_US" property="og:locale"> <meta class="r-meta-e" content="website" property="og:type"> <meta class="r-meta-e" property="og:title" content="esm.run by jsDelivr - A New-Age CDN for JavaScript modules"> <meta class="r-meta-e" property="og:description" content="Load modern JavaScript packages built for you on-demand. Works in modern web browsers, node.js, and deno."> <meta class="r-meta-e" property="og:url" content="https://www.jsdelivr.com/esm"> <meta class="r-meta-e" content="jsDelivr" property="og:site_name"> <meta class="r-meta-e" property="og:image" content="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/og-jsdelivr.png"> <meta class="r-meta-e" property="og:image:secure_url" content="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/og-jsdelivr.png"> <meta class="r-meta-e" content="1280" property="og:image:width"> <meta class="r-meta-e" content="640" property="og:image:height"> <meta class="r-meta-e" name="twitter:image" content="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/og-jsdelivr.png"> <meta class="r-meta-e" content="summary_large_image" name="twitter:card"> <meta class="r-meta-e" name="twitter:description" content="Load modern JavaScript packages built for you on-demand. Works in modern web browsers, node.js, and deno."> <meta class="r-meta-e" name="twitter:title" content="esm.run by jsDelivr - A New-Age CDN for JavaScript modules"> <meta class="r-meta-e" content="@jsdelivr" name="twitter:site"> <meta class="r-meta-e" content="@jsdelivr" name="twitter:creator"> <title class="r-meta-e">esm.run by jsDelivr - A New-Age CDN for JavaScript modules</title> <link class="r-meta-e" type="image/x-icon" rel="icon" href="/favicon.ico"> <link class="r-meta-e" type="image/svg+xml" rel="icon" href="/icons/favicon.svg"> <link class="r-meta-e" sizes="48x48" type="image/png" rel="icon" href="/icons/favicon-48x48.png"> <link class="r-meta-e" sizes="32x32" type="image/png" rel="icon" href="/icons/favicon-32x32.png"> <link class="r-meta-e" sizes="16x16" type="image/png" rel="icon" href="/icons/favicon-16x16.png"> <link class="r-meta-e" sizes="180x180" rel="apple-touch-icon" href="/icons/apple-touch-icon.png"> <link class="r-meta-e" rel="manifest" href="/icons/site.webmanifest"> <link class="r-meta-e" color="#e64e3d" rel="mask-icon" href="/icons/safari-pinned-tab.svg"> <meta class="r-meta-e" content="jsDelivr" name="apple-mobile-web-app-title"> <meta class="r-meta-e" content="jsDelivr" name="application-name"> <meta class="r-meta-e" content="#ffffff" name="msapplication-TileColor"> <meta class="r-meta-e" name="msapplication-config" content="/icons/browserconfig.xml"> <meta class="r-meta-e" content="#ffffff" name="theme-color">  <!--  Static part that doesn't change after the initial render.  --> <!--  Maybe will be useful in Firefox at some point.  --> <link href="https://cdn.jsdelivr.net/" rel="dns-prefetch"> <link href="https://data.jsdelivr.com/" rel="dns-prefetch"> <link href="https://datum.jsdelivr.com/" rel="dns-prefetch"> <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/" rel="preconnect"> <link crossorigin="anonymous" href="https://data.jsdelivr.com/" rel="preconnect"> <link crossorigin="anonymous" href="https://datum.jsdelivr.com/" rel="preconnect"> <link rel="stylesheet" href="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/css/app.css?v=d5be422e8581de6817b81cb1272895dacc4d56fe"> <link onload="this.media=&#39;all&#39;" media="print" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link type="application/xml" href="/sitemap/index.xml" rel="sitemap"> <link title="jsDelivr" type="application/opensearchdescription+xml" href="/opensearch.xml" rel="search"> <style>				@font-face {
					font-family: 'Lexend';
					font-style: normal;
					font-weight: 100 900;
					src: url(https://cdn.jsdelivr.net/fontsource/fonts/lexend:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
				}

				@font-face {
					font-family: 'Source Code Pro';
					font-style: normal;
					font-weight: 200 900;
					src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-code-pro:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
				}

				@font-face {
					font-family: 'Inter';
					font-style: normal;
					font-weight: 100 900;
					src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
				}
			</style> </head> <body><div id="page"><header class="c-header  header-with-orange-bg"><nav class="navbar navbar-default navbar-filled"><div class="container-fluid container-mw"><div class="navbar-header"><a class="main-logo" href="/"><!-- 
						Looking for the logo?
						Get all versions here: https://github.com/jsdelivr/jsdelivr-media
					 -->  <img title="jsDelivr" height="34" width="140" src="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/jsdelivr-horizontal-full-white.svg"> </a>  <button class="navbar-toggle collapsed" aria-expanded="false" data-target="#main-navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button></div> <div class="collapse navbar-collapse" id="main-navbar"><ul class="nav navbar-nav navbar-right about-navbar-right"><li><a href="/about">About Us</a></li> <li><a href="/network">Network</a></li> <li><a href="/statistics">Stats</a></li> <li><a href="/sponsors">Sponsors</a></li> <li class="dropdown"><a class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">Tools <i class="fa fa-angle-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"><li><a href="/tools/purge">Purge cache</a></li> <li class="divider" role="separator"></li> <li class="dropdown-header"><div>Convert from</div></li> <li><a href="/github">GitHub</a></li> <li><a href="/google">Google Hosted Libraries</a></li> <li><a href="/unpkg">unpkg</a></li> <li><a href="/skypack">Skypack</a></li> <li><a href="/esmsh">esm.sh</a></li></ul></li> <li class="dropdown"><a class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">Resources <i class="fa fa-angle-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"><li><a class="router-ignore" href="/blog/" target="_blank">Blog <i class="fa fa-external-link" aria-hidden="true"></i></a></li> <li><a href="https://jsdelivr.us11.list-manage.com/subscribe?u=0c85fe2c9a60310df9a3d6751&amp;id=283887f736" rel="noopener noreferrer" target="_blank">Newsletter <i class="fa fa-external-link" aria-hidden="true"></i></a></li> <li><a href="/esm">esm.run</a></li> <li class="dropdown-header"><div>Documentation</div></li> <li><a href="/documentation">Open Source CDN</a></li> <li><a class="router-ignore" href="/docs/data.jsdelivr.com">Public API</a></li></ul></li> <li><a target="_blank" href="https://globalping.io">Globalping<i class="fa fa-external-link"></i></a></li> <li><a title="GitHub" href="https://github.com/jsdelivr/jsdelivr" rel="noopener noreferrer" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> <span class="icon-label-mobile">GitHub</span></a></li> <li><a title="Twitter" href="https://twitter.com/jsDelivr" rel="noopener noreferrer" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> <span class="icon-label-mobile">Twitter</span></a></li> <li><a class="router-ignore" title="Discord" href="/discord" rel="noopener noreferrer" target="_blank"><svg class="fa" style="margin-top: 1px;" title="Discord" height="14" width="14" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485.065 485.065 0 0 0 404.081 32.03a1.816 1.816 0 0 0-1.923.91 337.461 337.461 0 0 0-14.9 30.6 447.848 447.848 0 0 0-134.426 0 309.541 309.541 0 0 0-15.135-30.6 1.89 1.89 0 0 0-1.924-.91 483.689 483.689 0 0 0-119.688 37.107 1.712 1.712 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.016 2.016 0 0 0 .765 1.375 487.666 487.666 0 0 0 146.825 74.189 1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588 321.173 321.173 0 0 1-45.868-21.853 1.885 1.885 0 0 1-.185-3.126 251.047 251.047 0 0 0 9.109-7.137 1.819 1.819 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.812 1.812 0 0 1 1.924.233 234.533 234.533 0 0 0 9.132 7.16 1.884 1.884 0 0 1-.162 3.126 301.407 301.407 0 0 1-45.89 21.83 1.875 1.875 0 0 0-1 2.611 391.055 391.055 0 0 0 30.014 48.815 1.864 1.864 0 0 0 2.063.7A486.048 486.048 0 0 0 610.7 405.729a1.882 1.882 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541ZM222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239 0 32.654-23.41 59.241-52.843 59.241Zm195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239 0 32.654-23.177 59.241-52.844 59.241Z" fill="#fff"></path></svg> <span class="icon-label-mobile">Discord</span></a></li></ul></div></div></nav></header> <div class="p-esm"><div class="c-header-gradient"><img class="header-gradient_primary" height="684" width="1440" fetchpriority="high" src="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/about/about-gradient.jpg"> <div class="header-gradient_secondary"></div> <div class="header-gradient_map"></div></div> <div class="content"><section class="content_title"><h1>A New-Age CDN for JavaScript modules</h1> <h2><span>Load modern JavaScript packages built for you on-demand</span> <span>Works in modern web browsers, node.js, and deno</span></h2></section> <section class="content_main-box"><div class="code"><div class="code_import"><span>import</span> <input class="package-name-input" placeholder="name" tabindex="1" value="d3"></div> <div class="code_from"><span>from 'https://esm.run/d3';</span></div></div> <div class="buttons"><form target="_blank" method="POST" action="https://jsfiddle.net/api/post/library/pure"><input type="hidden" value="esm.run d3 demo" name="title"> <input type="hidden" value="// See https://www.npmjs.com/package/d3 documentation.
import * as d3 from &#39;https://esm.run/d3&#39;;

console.log(d3)
" name="js"> <button class="btn-primary" tabindex="2" type="submit">Open in JSFiddle</button> <span class="buttons-or">or</span> <a class="btn-secondary" tabindex="3" rel="noopener noreferrer" target="_blank" href="https://esm.run/d3">Open in a new tab</a></form></div> <div class="notice"><span>You can use esm.run links for quick demos or prototyping.</span> <span>In production (once this feature is out of beta), always use our main domain.</span></div></section> <section class="content_features"><div class="content_features_row"><div><img alt="" height="48" width="48" src="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/esm/global-multi-cdn.png"> <h4 class="feature-title">Global Multi-CDN powered by jsDelivr</h4> <div class="feature-content">esm.run is powered by jsDelivr and it's sponsors like Cloudflare, Fastly, Bunny, and GCore. This guarantees the best performance and uptime globally, including mainland China.</div></div> <div><img alt="" height="48" width="48" src="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/esm/permanent-storage.png"> <h4 class="feature-title">On-demand builds with permanent storage</h4> <div class="feature-content">Once built, files are stored in a permanent storage shared by all edge servers. That means future access will be always fast, even for files not yet cached at the CDN edge.</div></div> <div><img alt="" height="48" width="48" src="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/esm/optimized-delivery.png"> <h4 class="feature-title">State-of-the-art delivery</h4> <div class="feature-content">HTTP/2, HTTP/3, code minification, brotli compression, fine-tuned HTTP caching, dependency preloading - we always use all available options for improving the overall performance.</div></div></div> <a class="btn-primary" href="/?query=*%20type%3A%20esm">Browse available packages</a></section> <section class="content_performance"><h2>Performance comparison</h2> <div class="content_performance_row"><div class="c-stats-table"><div class="flex stats-table-table"><div class="item state-title">d3 - load time</div> </div></div> <div class="c-stats-table"><div class="flex stats-table-table"><div class="item state-title">d3 - number of requests</div> </div></div></div> <div class="benchmark-text"><div><div class="stats-message">Median of 10 benchmarks run on Feb 06, 2021 measuring the initial load time. To run a real-time benchmark with a package of your choice, use the button bellow.</div></div></div> <div class="benchmark-buttons"><a class="btn-primary ">Run benchmark</a></div></section> <section class="c-new-infographic-banner infographic"><div class="infographic_wrapper"><div class="infographic_content"><h3>Learn more about<br> the infrastructure that<br> powers <strong>jsDelivr</strong></h3> <a class="btn-primary router-ignore" href="/network/infographic" target="_blank">Check our infographic</a></div> <div class="infographic_image-desktop hidden"><img loading="lazy" height="338" width="624" src="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/landing/new/infographics.png" srcset="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/landing/new/infographics@2x.png 2x"></div> <div class="infographic_image hidden"><img loading="lazy" height="205" width="280" src="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/landing/new/infographics.mobile.png" srcset="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/img/landing/new/infographics.mobile@2x.png 2x"></div></div></section></div></div> <footer class="c-footer"><div class="wrapper"><div class="container-fluid container-mw"><div class="row block-main"><div class="col-xs-12 col-sm-6 main-left"><div class="maintain-header"><span class="text-footer-14 op-64">Maintained by</span> <a class="text-footer-14" href="/about#people">jsDelivr team and contributors</a> <br> <span class="text-footer-14 op-64">Founded by</span> <a class="text-footer-14" href="https://dakulov.com/" rel="noopener noreferrer" target="_blank">Dmitriy Akulov</a></div></div> <div class="col-xs-12 col-sm-6 main-right"><div class="main-right-container"><div class="subscribe-header"><span class="text-footer-14">Sign up to our newsletter</span></div> <form class="form-inline subscribe-content" target="_blank" method="POST" action="https://jsdelivr.us11.list-manage.com/subscribe?u=0c85fe2c9a60310df9a3d6751&amp;id=283887f736"><div class="form-group"><input class="form-control" type="email" autocomplete="email" id="new-email" placeholder="Enter your e-mail" name="MERGE0"></div> <button class="btn btn-default semi-bold" type="submit">Subscribe</button></form></div></div></div> <div class="footer-separator"></div> <div class="block-list"><div class="title-copy-bottom op-64">© jsdelivr.com, 2012 - 2025</div> <div class="row list-primary"><div class="col-sm-12"><div class="title-copy op-64">© jsdelivr.com, 2012 - 2025</div> <ul><li><a href="/about">About</a></li> <li><a href="/history">Our History</a></li> <li><a href="/sponsors">Our Sponsors</a></li> <li><a href="/oss-cdn">Custom OSS CDN</a></li> <li><a href="https://status.jsdelivr.com/">Status</a></li> <li><a href="/terms">Terms &amp; Policies</a></li> <li><a href="mailto:d@jsdelivr.com">d@jsdelivr.com</a></li></ul></div></div> <div class="row list-second"><div class="col-sm-12"><div class="title-convert op-64">Convert from:</div> <ul><li><a href="/github">GitHub</a></li> <li><a href="/google">Google Hosted Libraries</a></li> <li><a href="/unpkg">unpkg</a></li> <li><a href="/skypack">Skypack</a></li> <li><a href="/esmsh">esm.sh</a></li></ul></div></div></div> <div class="footer-separator"></div> <div class="footer-blog-links"><div class="footer-blog-links_title op-64">From our Blog</div> <div class="footer-blog-links_block"></div></div></div></div></footer></div> <script id="ractive-data" type="text/plain">		{}
	</script> <script id="ractive-shared" type="text/plain">		{"serverHost":"https://www.jsdelivr.com","assetsHost":"/assets/d5be422e8581de6817b81cb1272895dacc4d56fe","apiDocsHost":"https://data.jsdelivr.com","assetsVersion":"d5be422e8581de6817b81cb1272895dacc4d56fe"}
	</script> <script src="https://cdn.jsdelivr.net/npm/ractive@1.4.0/runtime.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/ractive-route@0.3.11/ractive-route.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/ractive-decorators-sortable@0.2.1/Ractive-decorators-sortable.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/ractive-transitions-fly@0.3.0/dist/ractive-transitions-fly.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/ractive-transitions-slide@0.4.0/dist/ractive-transitions-slide.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.35.1/dist/algoliasearchLite.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/input-autogrow@1.1.1/dist/input-autogrow.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.38.1/dist/autocomplete.jquery.min.js"></script>  <script src="/assets/d5be422e8581de6817b81cb1272895dacc4d56fe/js/app.js?v=d5be422e8581de6817b81cb1272895dacc4d56fe"></script> <script src="https://datum.jsdelivr.com/js/script.js" data-domain="jsdelivr.com" defer></script></body></html>