https://driverjs.com/

html driverjs.com collected 2026-09-24 18:52:31 UTC 63,241 bytes, 50 lines download raw bytes

1<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Driver.js - Product Tours &amp; Highlights in Vanilla JS</title><meta content=index,follow name=robots><meta content="Driver.js is a lightweight, no-dependency JavaScript library for building product tours, feature highlights, hints and contextual help. It is just ~5kb and MIT licensed." name=description itemprop=description><link href=https://driverjs.com/ rel=canonical><meta content="Kamran Ahmed" name=author><meta content=summary_large_image name=twitter:card><meta content=@nilbuild name=twitter:creator><meta content="Driver.js - Product Tours &amp; Highlights in Vanilla JS" name=twitter:title><meta content="Driver.js is a lightweight, no-dependency JavaScript library for building product tours, feature highlights, hints and contextual help. It is just ~5kb and MIT licensed." name=twitter:description><meta content=https://driverjs.com/og-img.png name=twitter:image><meta content=1200 property=og:image:width><meta content=630 property=og:image:height><meta content=https://driverjs.com/og-img.png property=og:image><meta content="Driver.js â lightweight JavaScript library for product tours and highlights" property=og:image:alt><meta content=Driver.js property=og:site_name><meta content="Driver.js - Product Tours &amp; Highlights in Vanilla JS" property=og:title><meta content="Driver.js is a lightweight, no-dependency JavaScript library for building product tours, feature highlights, hints and contextual help. It is just ~5kb and MIT licensed." property=og:description><meta content=website property=og:type><meta content=en_US property=og:locale><meta content=https://driverjs.com/ property=og:url><meta content="width=device-width" name=viewport><link href=/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/favicon.ico rel=icon sizes=any><link href=/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><style>.driver-popover{all:unset;font-family:var(--driver-popover-font-family,"Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif);box-sizing:border-box;color:#2d2d2d;z-index:1000000000;background-color:#fff;border-radius:5px;min-width:250px;max-width:300px;margin:0;padding:15px;position:fixed;top:0;right:0;box-shadow:0 1px 10px #0006}.driver-popover-title{zoom:1;margin:0;font-size:19px;font-weight:700;line-height:1.5;display:block;position:relative}.driver-popover-close-btn{all:unset;cursor:pointer;color:#d2d2d2;z-index:1;text-align:center;width:32px;height:28px;font-size:18px;font-weight:500;transition:color .2s;position:absolute;top:0;right:0}.driver-popover-close-btn:focus,.driver-popover-close-btn:hover{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{zoom:1;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.5}.driver-popover-footer{text-align:right;zoom:1;justify-content:space-between;align-items:center;margin-top:15px;display:flex}.driver-popover-progress-text{color:#727272;zoom:1;font-size:13px;font-weight:400}.driver-popover-footer-btn{all:unset;box-sizing:border-box;color:#2d2d2d;cursor:pointer;zoom:1;background-color:#fff;border:1px solid #ccc;border-radius:3px;outline:0;padding:3px 7px;font-size:12px;line-height:1.3;text-decoration:none;display:inline-block}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}.driver-popover-footer-btn:focus,.driver-popover-footer-btn:hover{background-color:#f7f7f7}.driver-popover-navigation-btns{flex-grow:1;justify-content:flex-end;display:flex}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";border:5px solid #fff;position:absolute}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{border-top-color:#0000;border-bottom-color:#0000;border-right-color:#0000;left:100%}.driver-popover-arrow-side-right{border-top-color:#0000;border-bottom-color:#0000;border-left-color:#0000;right:100%}.driver-popover-arrow-side-top{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;top:100%}.driver-popover-arrow-side-bottom{border-top-color:#0000;border-left-color:#0000;border-right-color:#0000;bottom:100%}.driver-popover-arrow-none,.driver-popover-arrow-side-center{display:none}.driver-active .driver-overlay{pointer-events:none}.driver-active.driver-no-scroll{overflow:hidden}.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}

1to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in var(--driver-animation-duration,.4s) ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in var(--driver-animation-duration,.4s)}.driver-active-element-parent-no-scroll{overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover{all:unset;font-family:var(--driver-popover-font-family,"Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif);box-sizing:border-box;color:#2d2d2d;z-index:1000000000;background-color:#fff;border-radius:5px;min-width:250px;max-width:300px;margin:0;padding:15px;position:fixed;top:0;right:0;box-shadow:0 1px 10px #0006}.driver-popover-title{zoom:1;margin:0;font-size:19px;font-weight:700;line-height:1.5;display:block;position:relative}.driver-popover-close-btn{all:unset;cursor:pointer;color:#d2d2d2;z-index:1;text-align:center;width:32px;height:28px;font-size:18px;font-weight:500;transition:color .2s;position:absolute;top:0;right:0}.driver-popover-close-btn:focus,.driver-popover-close-btn:hover{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{zoom:1;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.5}.driver-popover-footer{text-align:right;zoom:1;justify-content:space-between;align-items:center;margin-top:15px;display:flex}.driver-popover-progress-text{color:#727272;zoom:1;font-size:13px;font-weight:400}.driver-popover-footer-btn{all:unset;box-sizing:border-box;color:#2d2d2d;cursor:pointer;zoom:1;background-color:#fff;border:1px solid #ccc;border-radius:3px;outline:0;padding:3px 7px;font-size:12px;line-height:1.3;text-decoration:none;display:inline-block}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}.driver-popover-footer-btn:focus,.driver-popover-footer-btn:hover{background-color:#f7f7f7}.driver-popover-navigation-btns{flex-grow:1;justify-content:flex-end;display:flex}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";border:5px solid #fff;position:absolute}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{border-top-color:#0000;border-bottom-color:#0000;border-right-color:#0000;left:100%}.driver-popover-arrow-side-right{border-top-color:#0000;border-bottom-color:#0000;border-left-color:#0000;right:100%}.driver-popover-arrow-side-top{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;top:100%}.driver-popover-arrow-side-bottom{border-top-color:#0000;border-left-color:#0000;border-right-color:#0000;bottom:100%}.driver-popover-arrow-none,.driver-popover-arrow-side-center{display:none}.driver-hint{all:unset;box-sizing:border-box;width:var(--driver-hint-size,24px);height:var(--driver-hint-size,24px);cursor:pointer;z-index:999999996;display:block;position:fixed;transform:translate(-50%,-50%)}.driver-hint[aria-expanded=true]{z-index:999999998}.driver-hint-hidden{display:none}.driver-hint-dot,.driver-hint-pulse{background-color:var(--driver-hint-color,#818cf8);border-radius:50%;position:absolute}.driver-hint-dot{inset:25%}.driver-hint-pulse{opacity:.6;pointer-events:none;animation:driver-hint-pulse var(--driver-hint-animation-duration,2s) ease-out infinite;inset:0}@keyframes driver-hint-pulse{0%{opacity:.6;transform:scale(.5)}70%{opacity:0;transform:scale(1.5)}to{opacity:0;transform:scale(1.5)}}.driver-hint-no-animation .driver-hint-pulse{animation:none}@media (prefers-reduced-motion:reduce){.driver-hint-pulse{animation:none}}.driver-hint-popover .driver-popover-arrow{border-width:7px}.driver-hint-popover.driver-popover{box-shadow:none;filter:drop-shadow(0 1px 4px #00000040) drop-shadow(0 4px 12px #0003)}.driver-hint-overlay{z-index:999999997;pointer-events:none;width:100%;height:100%;animation:.2s ease-out driver-hint-overlay-fade;position:fixed;inset:0}@keyframes driver-hint-overlay-fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.driver-hint-overlay{animation:none}}.driver-active .driver-hint{display:none}</style><link href=/_astro/BaseLayout.BoRSwUVK.css rel=stylesheet><style>.marquee-track[data-astro-cid-itpnsnrj]{will-change:transform;animation:32s linear infinite marquee-scroll}@keyframes marquee-scroll{0%{transform:translate(0)}to{transform:translate(-33.333%)}}@media (prefers-reduced-motion:reduce){.marquee-track[data-astro-cid-itpnsnrj]{animation:none}}.marker[data-astro-cid-vnotnvy4]{color:#111827;box-decoration-break:clone;background-color:#fef08a;border-radius:.4em .7em .45em .65em;padding:.06em .4em;font-weight:600}.hero-hint-beacon{--driver-hint-size:30px}.driver-popover.hero-hint-popover{color:#111827;background-color:#fff;border-radius:14px;box-shadow:0 14px 34px #1118272e,0 2px 6px #11182714}.driver-popover.hero-hint-popover .driver-popover-title{color:#111827;font-weight:600}.driver-popover.hero-hint-popover .driver-popover-description{color:#111827a8}.driver-popover.hero-hint-popover .driver-popover-close-btn{color:#1118278c}.driver-popover.hero-hint-popover .driver-popover-close-btn:hover{color:#111827}.driver-popover.hero-hint-popover .driver-popover-footer-btn{color:#fff;text-shadow:none;box-shadow:none;background-color:#4f46e5;border:none;border-radius:9px;padding:9px 20px;font-size:13px;font-weight:400}.driver-popover.hero-hint-popover .driver-popover-footer-btn:hover{background-color:#4338ca}.driver-popover.hero-hint-popover .driver-popover-arrow-side-left.driver-popover-arrow{border-left-color:#fff}.driver-popover.hero-hint-popover .driver-popover-arrow-side-right.driver-popover-arrow{border-right-color:#fff}.driver-popover.hero-hint-popover .driver-popover-arrow-side-top.driver-popover-arrow{border-top-color:#fff}.driver-popover.hero-hint-popover .driver-popover-arrow-side-bottom.driver-popover-arrow{border-bottom-color:#fff}#code-showcase pre.astro-code{margin:0;font-size:.875rem;line-height:1.7;background:0 0!important}@media (width>=768px){#code-showcase pre.astro-code{font-size:1rem}}.marquee-mask[data-astro-cid-23gkgyqt]{mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000)}.marquee-track[data-astro-cid-23gkgyqt]{animation:30s linear infinite marquee-scroll}@media (prefers-reduced-motion:reduce){.marquee-track[data-astro-cid-23gkgyqt]{animation:none}}.marker[data-astro-cid-5k54e7ww]{box-decoration-break:clone;background-color:#fef08a;border-radius:.4em .7em .45em .65em;padding:.02em .3em}</style></head><body><div class="border-gray-200 bg-white border-b select-none"><div class="mx-auto max-w-[1050px] px-7 sm:px-10"><div class="flex items-center h-16 justify-between"><a class="flex items-center gap-2.5 font-bold font-semibold justify-end text-gray-900 text-xl" href=/ data-nav-logo><img alt="driver.js logo" class="w-auto h-10" src=/mascot-head.png height=775 width=900>driver.js</a><span class="flex items-center gap-3"><a class="font-medium text-base hover:bg-gray-100 px-3 py-1.5 rounded-lg text-gray-900 transition-colors" href=/docs/installation data-nav-docs><span class="hidden sm:inline">Documentation</span><span class="inline sm:hidden">Docs</span></a><a class="hover:text-gray-600 text-gray-900" href=https://github.com/nilbuild/driver.js target=_blank aria-label=GitHub><svg class="h-6 w-6" fill=currentColor viewBox="0 0 496 512" aria-hidden=true><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></span></div></div></div>

1<div class="overflow-hidden bg-yellow-300/80 via-transparent"><div class="mx-auto max-w-[1050px] px-7 sm:px-10"><div class="flex items-center gap-4 justify-start lg:py-25 md:py-14 py-10"><div class=flex-grow data-hero-text><h1 class="font-bold mb-2 md:mb-3 lg:mb-4 lg:text-9xl md:text-8xl text-7xl" data-driver-name>driver.js</h1><p class="text-base !leading-normal lg:text-3xl md:text-2xl" data-driver-tagline>Lightweight JavaScript library for product tours, highlights, and contextual help for your product.</p><div class="flex flex-col gap-4 items-stretch sm:flex-row lg:mt-10 md:mt-8 mt-4"><div class=relative data-demo-split><div class="flex border-black border-2 rounded-2xl active:shadow-[2px_2px_0_0_#000] active:translate-x-[3px] active:translate-y-[3px] bg-gray-800 shadow-[5px_5px_0_0_#000] text-white transition-all items-stretch overflow-hidden"><button class="text-lg font-semibold md:text-xl cursor-pointer focus-visible:outline-none focus:outline-none md:py-3 px-7 py-2.5 hover:bg-gray-700" data-demo-tour>Show Demo</button><button class="flex items-center border-black cursor-pointer focus-visible:outline-none focus:outline-none hover:bg-gray-700 border-l-2 px-3" type=button aria-expanded=false aria-haspopup=true aria-label="Choose a demo" data-demo-menu-toggle><svg class="h-5 w-5" fill=currentColor viewBox="0 0 20 20" aria-hidden=true><path d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06z" clip-rule=evenodd fill-rule=evenodd></path></svg></button></div><div class="hidden bg-white border-2 border-black fixed overflow-hidden rounded-xl shadow-[4px_4px_0_0_#000] w-56 z-50" data-demo-menu><button class="font-medium cursor-pointer px-4 text-black block hover:bg-yellow-200 py-2.5 text-base text-left w-full" type=button data-demo-item=tour>Product tour</button><button class="font-medium cursor-pointer px-4 text-black border-black block border-t-2 hover:bg-yellow-200 py-2.5 text-base text-left w-full" type=button data-demo-item=hints>Feature hints</button><button class="font-medium cursor-pointer px-4 text-black border-black block border-t-2 hover:bg-yellow-200 py-2.5 text-base text-left w-full" type=button data-demo-item=highlight>Simple highlight</button></div></div><a class="text-black border-black cursor-pointer border-2 transition-all bg-white focus-visible:outline-none focus:outline-none active:shadow-[2px_2px_0_0_#000] active:translate-x-[3px] active:translate-y-[3px] font-semibold hover:bg-gray-100 md:py-3 md:text-xl px-7 py-2.5 rounded-2xl shadow-[5px_5px_0_0_#000] text-center text-lg" href=/docs/installation data-docs-link>Get Started</a></div></div><div class="hidden flex-shrink-0 sm:flex"><img alt="driver.js mascot" class="w-auto lg:h-[300px] md:h-64 relative sm:h-56 top-[12px]" src=/fox-mascot.png height=744 width=1130></div></div></div></div>

1<script type=module src=/_astro/HeroSection.astro_astro_type_script_index_0_lang.t7rpU37a.js></script>

1<div class="overflow-hidden bg-black" data-astro-cid-itpnsnrj><div class="flex items-center marquee-track w-max h-12 md:h-14" data-astro-cid-itpnsnrj><div class="flex items-center" data-astro-cid-itpnsnrj aria-hidden=false><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Supports all Major Browsers</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Works on Mobile Devices</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Highly Customizable</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Light-weight</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>No dependencies</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Tours, Highlights &amp; Hints</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>MIT Licensed</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Written in TypeScript</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Vanilla JavaScript</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Easy to use</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Accessible</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Frameworks Ready</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span></div><div class="flex items-center" data-astro-cid-itpnsnrj aria-hidden=true><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Supports all Major Browsers</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Works on Mobile Devices</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Highly Customizable</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Light-weight</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>No dependencies</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Tours, Highlights &amp; Hints</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>MIT Licensed</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Written in TypeScript</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Vanilla JavaScript</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Easy to use</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Accessible</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span><span class="flex items-center" data-astro-cid-itpnsnrj><span class="font-medium md:text-base text-sm px-5 text-white whitespace-nowrap" data-astro-cid-itpnsnrj>Frameworks Ready</span><span class="rounded-full bg-yellow-400 h-1.5 w-1.5" data-astro-cid-itpnsnrj></span></span></div></div></div><div class="border-gray-200 bg-white border-b" data-astro-cid-vnotnvy4><div class="mx-auto max-w-[1050px] px-7 sm:px-10"><div class="md:py-9 py-7" data-astro-cid-vnotnvy4><div class="flex items-center justify-center flex-wrap gap-x-10 gap-y-6 md:gap-x-14" data-astro-cid-vnotnvy4><div class="flex items-center justify-center group relative" data-astro-cid-vnotnvy4><img alt="Red Hat" class="w-auto duration-200 grayscale group-hover:grayscale-0 group-hover:opacity-100 opacity-60 transition h-10" src=/companies/redhat.svg data-astro-cid-vnotnvy4><span class="font-medium text-white whitespace-nowrap -translate-x-1/2 absolute bg-gray-900 bottom-1/2 duration-200 group-hover:opacity-100 group-hover:translate-y-0 left-1/2 mb-8 opacity-0 pointer-events-none px-2.5 py-1 rounded-md text-xs transition translate-y-1" data-astro-cid-vnotnvy4>Red Hat<span class="-mt-px -translate-x-1/2 -translate-y-1/2 absolute bg-gray-900 h-2 left-1/2 rotate-45 top-full w-2" data-astro-cid-vnotnvy4></span></span></div><div class="flex items-center justify-center group relative" data-astro-cid-vnotnvy4><img alt=Alibaba class="w-auto duration-200 grayscale group-hover:grayscale-0 group-hover:opacity-100 opacity-60 transition h-8" src=/companies/alibaba.svg data-astro-cid-vnotnvy4><span class="font-medium text-white whitespace-nowrap -translate-x-1/2 absolute bg-gray-900 bottom-1/2 duration-200 group-hover:opacity-100 group-hover:translate-y-0 left-1/2 mb-8 opacity-0 pointer-events-none px-2.5 py-1 rounded-md text-xs transition translate-y-1" data-astro-cid-vnotnvy4>Alibaba<span class="-mt-px -translate-x-1/2 -translate-y-1/2 absolute bg-gray-900 h-2 left-1/2 rotate-45 top-full w-2" data-astro-cid-vnotnvy4></span></span></div><div class="flex items-center justify-center group relative" data-astro-cid-vnotnvy4><img alt=MIT class="w-auto duration-200 grayscale group-hover:grayscale-0 group-hover:opacity-100 opacity-60 transition h-8" src=/companies/mit.svg data-astro-cid-vnotnvy4><span class="font-medium text-white whitespace-nowrap -translate-x-1/2 absolute bg-gray-900 bottom-1/2 duration-200 group-hover:opacity-100 group-hover:translate-y-0 left-1/2 mb-8 opacity-0 pointer-events-none px-2.5 py-1 rounded-md text-xs transition translate-y-1" data-astro-cid-vnotnvy4>MIT<span class="-mt-px -translate-x-1/2 -translate-y-1/2 absolute bg-gray-900 h-2 left-1/2 rotate-45 top-full w-2" data-astro-cid-vnotnvy4></span></span></div><div class="flex items-center justify-center group relative" data-astro-cid-vnotnvy4><img alt=Ethereum class="w-auto duration-200 grayscale group-hover:grayscale-0 group-hover:opacity-100 opacity-60 transition h-9" src=/companies/ethereum.svg data-astro-cid-vnotnvy4><span class="font-medium text-white whitespace-nowrap -translate-x-1/2 absolute bg-gray-900 bottom-1/2 duration-200 group-hover:opacity-100 group-hover:translate-y-0 left-1/2 mb-8 opacity-0 pointer-events-none px-2.5 py-1 rounded-md text-xs transition translate-y-1" data-astro-cid-vnotnvy4>Ethereum<span class="-mt-px -translate-x-1/2 -translate-y-1/2 absolute bg-gray-900 h-2 left-1/2 rotate-45 top-full w-2" data-astro-cid-vnotnvy4></span></span></div><div class="flex items-center justify-center group relative" data-astro-cid-vnotnvy4><img alt=GitKraken class="w-auto duration-200 grayscale group-hover:grayscale-0 group-hover:opacity-100 opacity-60 transition h-11" src=/companies/gitkraken.svg data-astro-cid-vnotnvy4><span class="font-medium text-white whitespace-nowrap -translate-x-1/2 absolute bg-gray-900 bottom-1/2 duration-200 group-hover:opacity-100 group-hover:translate-y-0 left-1/2 mb-8 opacity-0 pointer-events-none px-2.5 py-1 rounded-md text-xs transition translate-y-1" data-astro-cid-vnotnvy4>GitKraken<span class="-mt-px -translate-x-1/2 -translate-y-1/2 absolute bg-gray-900 h-2 left-1/2 rotate-45 top-full w-2" data-astro-cid-vnotnvy4></span></span></div><div class="flex items-center justify-center group relative" data-astro-cid-vnotnvy4><img alt=Apache class="w-auto duration-200 grayscale group-hover:grayscale-0 group-hover:opacity-100 opacity-60 transition h-10" src=/companies/apache.svg data-astro-cid-vnotnvy4><span class="font-medium text-white whitespace-nowrap -translate-x-1/2 absolute bg-gray-900 bottom-1/2 duration-200 group-hover:opacity-100 group-hover:translate-y-0 left-1/2 mb-8 opacity-0 pointer-events-none px-2.5 py-1 rounded-md text-xs transition translate-y-1" data-astro-cid-vnotnvy4>Apache<span class="-mt-px -translate-x-1/2 -translate-y-1/2 absolute bg-gray-900 h-2 left-1/2 rotate-45 top-full w-2" data-astro-cid-vnotnvy4></span></span></div><div class="flex items-center justify-center group relative" data-astro-cid-vnotnvy4><img alt=Intel class="w-auto duration-200 grayscale group-hover:grayscale-0 group-hover:opacity-100 opacity-60 transition h-16" src=/companies/intel.svg data-astro-cid-vnotnvy4><span class="font-medium text-white whitespace-nowrap -translate-x-1/2 absolute bg-gray-900 bottom-1/2 duration-200 group-hover:opacity-100 group-hover:translate-y-0 left-1/2 mb-8 opacity-0 pointer-events-none px-2.5 py-1 rounded-md text-xs transition translate-y-1" data-astro-cid-vnotnvy4>

1Intel<span class="-mt-px -translate-x-1/2 -translate-y-1/2 absolute bg-gray-900 h-2 left-1/2 rotate-45 top-full w-2" data-astro-cid-vnotnvy4></span></span></div><div class="flex items-center justify-center group relative" data-astro-cid-vnotnvy4><img alt=Fiverr class="w-auto duration-200 grayscale group-hover:grayscale-0 group-hover:opacity-100 opacity-60 transition h-[5.5rem]" src=/companies/fiverr.svg data-astro-cid-vnotnvy4><span class="font-medium text-white whitespace-nowrap -translate-x-1/2 absolute bg-gray-900 bottom-1/2 duration-200 group-hover:opacity-100 group-hover:translate-y-0 left-1/2 mb-8 opacity-0 pointer-events-none px-2.5 py-1 rounded-md text-xs transition translate-y-1" data-astro-cid-vnotnvy4>Fiverr<span class="-mt-px -translate-x-1/2 -translate-y-1/2 absolute bg-gray-900 h-2 left-1/2 rotate-45 top-full w-2" data-astro-cid-vnotnvy4></span></span></div></div><p class="text-base md:text-lg mx-auto max-w-2xl mt-6 text-center text-gray-500" data-astro-cid-vnotnvy4><span class=marker data-astro-cid-vnotnvy4>4M+</span> monthly downloads, used by <span class=marker data-astro-cid-vnotnvy4>tens of thousands of projects</span>.</p></div></div></div><div class="text-black lg:pt-20 bg-white md:pb-20 md:pt-12 pb-12 pt-10"><div class="mx-auto max-w-[1050px] px-7 sm:px-10"><h2 class="font-bold text-3xl mb-2 md:mb-3 md:text-4xl" data-examples-heading>Examples</h2><p class="text-base md:text-lg text-black/70 leading-relaxed" data-examples-tagline>Click an example below to see driver.js in action, or find more <a class="text-black underline underline-offset-4" href=/docs/installation>in the documentation</a>.</p><div class="flex flex-wrap md:gap-3 gap-3 lg:gap-4 md:mt-8 mt-6" data-example-btns><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=animated-tour>Animated Tour</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=static-tour>Non-Animated Tour</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=async-tour>Async Tour</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=no-element>No Element</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=confirm-on-exit>Confirm on Exit</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=show-progress>Show Progress</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=simple-element-highlight>Simple Highlight</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=simple-element-highlight-popover>Highlight with Popover</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=prevent-close>Prevent Closing</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=overlay-color>Overlay Color</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=popover-position>Popover Positioning</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=customizing-popover>Customizing Popover</button><button class="font-medium md:text-base border-2 cursor-pointer px-4 py-2 border-black text-black active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-white duration-100 focus-visible:outline-none focus:outline-none hover:bg-yellow-300 lg:text-lg rounded-xl shadow-[3px_3px_0_0_#000] transition-all" id=hooks-everything>Hooks for Everything</button><a class="flex items-center border-black border-2 px-5 shadow-[3px_3px_0_0_#000] active:shadow-[1px_1px_0_0_#000] active:translate-x-[2px] active:translate-y-[2px] bg-yellow-300 cursor-pointer duration-100 font-medium hover:bg-yellow-400 lg:text-lg py-2 rounded-xl text-base text-black transition-all" href=/docs/installation>and more ...</a></div>

1<script type=module src=/_astro/Examples.astro_astro_type_script_index_0_lang.GqKidtyj.js></script>

1</div></div><div class="border-gray-200 bg-white border-t md:py-20 py-12"><div class="mx-auto max-w-[1050px] px-7 sm:px-10"><h2 class="font-bold text-3xl mb-2 md:mb-3 md:text-4xl">Use Cases</h2><p class="text-base md:text-lg text-black/70 mb-14">Due to its extensive API, driver.js can be used for a wide range of use cases.</p><div class="grid grid-cols-1 mt-8 sm:grid-cols-2 gap-x-8 gap-y-8 lg:gap-x-10 lg:grid-cols-3"><div><span class="rounded-full bg-yellow-400 block h-1 w-8"></span><h3 class="text-black font-semibold md:text-xl text-lg mt-3">Onboard Users</h3><p class="text-black/60 md:text-base mt-1.5 text-sm">Explain how to use your product and answer common questions.</p></div><div><span class="rounded-full bg-yellow-400 block h-1 w-8"></span><h3 class="text-black font-semibold md:text-xl text-lg mt-3">Interactive Tutorials</h3><p class="text-black/60 md:text-base mt-1.5 text-sm">Walk users through tasks step by step, letting them act as they learn.</p></div><div><span class="rounded-full bg-yellow-400 block h-1 w-8"></span><h3 class="text-black font-semibold md:text-xl text-lg mt-3">Feature Adoption</h3><p class="text-black/60 md:text-base mt-1.5 text-sm">Spotlight new features so your users don&#39;t miss them.</p></div><div><span class="rounded-full bg-yellow-400 block h-1 w-8"></span><h3 class="text-black font-semibold md:text-xl text-lg mt-3">Contextual Help</h3><p class="text-black/60 md:text-base mt-1.5 text-sm">Provide in-context guidance right where your users need it.</p></div><div><span class="rounded-full bg-yellow-400 block h-1 w-8"></span><h3 class="text-black font-semibold md:text-xl text-lg mt-3">Form Guidance</h3><p class="text-black/60 md:text-base mt-1.5 text-sm">Guide users field by field and point straight to inputs that need fixing.</p></div><div><span class="rounded-full bg-yellow-400 block h-1 w-8"></span><h3 class="text-black font-semibold md:text-xl text-lg mt-3">Remove Distractions</h3><p class="text-black/60 md:text-base mt-1.5 text-sm">Highlight what matters and focus your users&#39; attention.</p></div></div></div></div><div class="border-gray-200 bg-white border-t md:py-20 py-12"><div class="mx-auto max-w-[1050px] px-7 sm:px-10"><h2 class="font-bold text-3xl mb-2 md:mb-3 md:text-4xl">Your first tour in seconds ð¦</h2><p class="text-base md:text-lg text-black/70 mb-8 md:mb-10">Import driver.js, describe your steps, and call <code class="text-black bg-gray-100 px-1.5 py-0.5 rounded text-sm">drive()</code>. That's the whole setup. Hints follow the same recipe with <code class="text-black bg-gray-100 px-1.5 py-0.5 rounded text-sm">show()</code>.</p><div class="overflow-hidden rounded-2xl bg-[#101010] shadow-[6px_6px_0_0_#000]" id=code-showcase><div class="flex flex-wrap md:gap-3 gap-2 md:p-4 md:pb-6 p-3 pb-5"><button class="font-medium md:text-base text-sm border-2 code-tab cursor-pointer md:px-5 md:py-2 px-4 py-2 rounded-lg transition-colors bg-yellow-300 border-black text-black" type=button data-code-tab=0>Product Tour</button><button class="font-medium md:text-base text-sm border-2 code-tab cursor-pointer md:px-5 md:py-2 px-4 py-2 rounded-lg transition-colors bg-white/15 border-transparent hover:bg-white/25 hover:text-white text-gray-200" type=button data-code-tab=1>Single Highlight</button><button class="font-medium md:text-base text-sm border-2 code-tab cursor-pointer md:px-5 md:py-2 px-4 py-2 rounded-lg transition-colors bg-white/15 border-transparent hover:bg-white/25 hover:text-white text-gray-200" type=button data-code-tab=2>Hints</button></div><div class="md:pb-5 md:px-5 overflow-x-auto pb-4 px-3"><div class=block data-code-panel=0><pre class="astro-code monokai" data-language=js style=background-color:#272822;color:#f8f8f2;overflow-x:auto tabindex=0><code><span class=line><span style=color:#f92672>import</span><span style=color:#f8f8f2> { driver } </span><span style=color:#f92672>from</span><span style=color:#e6db74> "driver.js"</span><span style=color:#f8f8f2>;</span></span>
2<span class=line><span style=color:#f92672>import</span><span style=color:#e6db74> "driver.js/dist/driver.css"</span><span style=color:#f8f8f2>;</span></span>
3<span class=line></span>
4<span class=line><span style=color:#66d9ef;font-style:italic>const</span><span style=color:#f8f8f2>

4 driverObj </span><span style=color:#f92672>=</span><span style=color:#a6e22e> driver</span><span style=color:#f8f8f2>({</span></span>
5<span class=line><span style=color:#f8f8f2>  showProgress: </span><span style=color:#ae81ff>true</span><span style=color:#f8f8f2>,</span></span>
6<span class=line><span style=color:#f8f8f2>  steps: [</span></span>
7<span class=line><span style=color:#f8f8f2>    {</span></span>
8<span class=line><span style=color:#f8f8f2>      element: </span><span style=color:#e6db74>"#search"</span><span style=color:#f8f8f2>,</span></span>
9<span class=line><span style=color:#f8f8f2>      popover: { title: </span><span style=color:#e6db74>"Search"</span><span style=color:#f8f8f2>, description: </span><span style=color:#e6db74>"Find anything in seconds."</span><span style=color:#f8f8f2> },</span></span>
10<span class=line><span style=color:#f8f8f2>    },</span></span>
11<span class=line><span style=color:#f8f8f2>    {</span></span>
12<span class=line><span style=color:#f8f8f2>      element: </span><span style=color:#e6db74>"#notifications"</span><span style=color:#f8f8f2>,</span></span>
13<span class=line><span style=color:#f8f8f2>      popover: { title: </span><span style=color:#e6db74>"Stay updated"</span><span style=color:#f8f8f2>, description: </span><span style=color:#e6db74>"All your alerts live here."</span><span style=color:#f8f8f2> },</span></span>
14<span class=line><span style=color:#f8f8f2>    },</span></span>
15<span class=line><span style=color:#f8f8f2>    {</span></span>
16<span class=line><span style=color:#f8f8f2>      element: </span><span style=color:#e6db74>"#profile"</span><span style=color:#f8f8f2>,</span></span>
17<span class=line><span style=color:#f8f8f2>      popover: { title: </span><span style=color:#e6db74>"Your account"</span><span style=color:#f8f8f2>, description: </span><span style=color:#e6db74>"Manage settings and billing."</span><span style=color:#f8f8f2> },</span></span>
18<span class=line><span style=color:#f8f8f2>    },</span></span>
19<span class=line><span style=color:#f8f8f2>  ],</span></span>
20<span class=line><span style=color:#f8f8f2>});</span></span>
21<span class=line></span>
22<span class=line><span style=color:#f8f8f2>driverObj.</span><span style=color:#a6e22e>drive</span><span style=color:#f8f8f2>();</span></span></code></pre></div><div class=hidden data-code-panel=1><pre class="astro-code monokai" data-language=js style=background-color:#272822;color:#f8f8f2;overflow-x:auto tabindex=0><code><span class=line><span style=color:#f92672>import</span><span style=color:#f8f8f2> { driver } </span><span style=color:#f92672>from</span><span style=color:#e6db74> "driver.js"</span><span style=color:#f8f8f2>;</span></span>
23<span class=line><span style=color:#f92672>import</span><span style=color:#e6db74> "driver.js/dist/driver.css"</span><span style=color:#f8f8f2>;</span></span>
24<span class=line></span>
25<span class=line><span style=color:#66d9ef;font-style:italic>const</span><span style=color:#f8f8f2> driverObj </span><span style=color:#f92672>=</span><span style=color:#a6e22e> driver</span><span style=color:#f8f8f2>();</span></span>
26<span class=line></span>
27<span class=line><span style=color:#f8f8f2>driverObj.</span><span style=color:#a6e22e>highlight</span><span style=color:#f8f8f2>({</span></span>
28<span class=line><span style=color:#f8f8f2>  element: </span><span style=color:#e6db74>"#new-feature"</span><span style=color:#f8f8f2>,</span></span>
29<span class=line><span style=color:#f8f8f2>  popover: {</span></span>
30<span class=line><span style=color:#f8f8f2>    title: </span><span style=color:#e6db74>"New: Dark Mode ð"</span><span style=color:#f8f8f2>,</span></span>
31<span class=line><span style=color:#f8f8f2>    description: </span><span style=color:#e6db74>"Toggle the theme right from the toolbar."</span><span style=color:#f8f8f2>,</span></span>
32<span class=line><span style=color:#f8f8f2>  },</span></span>
33<span class=line><span style=color:#f8f8f2>});</span></span></code></pre></div><div class=hidden data-code-panel=2><pre class="astro-code monokai" data-language=js style=background-color:#272822;color:#f8f8f2;overflow-x:auto tabindex=0><code><span class=line><span style=color:#f92672>

33import</span><span style=color:#f8f8f2> { hints } </span><span style=color:#f92672>from</span><span style=color:#e6db74> "driver.js/hints"</span><span style=color:#f8f8f2>;</span></span>
34<span class=line><span style=color:#f92672>import</span><span style=color:#e6db74> "driver.js/dist/hints.css"</span><span style=color:#f8f8f2>;</span></span>
35<span class=line></span>
36<span class=line><span style=color:#66d9ef;font-style:italic>const</span><span style=color:#f8f8f2> productHints </span><span style=color:#f92672>=</span><span style=color:#a6e22e> hints</span><span style=color:#f8f8f2>({</span></span>
37<span class=line><span style=color:#f8f8f2>  hints: [</span></span>
38<span class=line><span style=color:#f8f8f2>    {</span></span>
39<span class=line><span style=color:#f8f8f2>      element: </span><span style=color:#e6db74>"#export-btn"</span><span style=color:#f8f8f2>,</span></span>
40<span class=line><span style=color:#f8f8f2>      popover: { title: </span><span style=color:#e6db74>"New: Export"</span><span style=color:#f8f8f2>, description: </span><span style=color:#e6db74>"Download reports as CSV or PDF."</span><span style=color:#f8f8f2> },</span></span>
41<span class=line><span style=color:#f8f8f2>    },</span></span>
42<span class=line><span style=color:#f8f8f2>    {</span></span>
43<span class=line><span style=color:#f8f8f2>      element: </span><span style=color:#e6db74>"#filters"</span><span style=color:#f8f8f2>,</span></span>
44<span class=line><span style=color:#f8f8f2>      popover: { title: </span><span style=color:#e6db74>"Filters"</span><span style=color:#f8f8f2>, description: </span><span style=color:#e6db74>"Narrow results by date or owner."</span><span style=color:#f8f8f2> },</span></span>
45<span class=line><span style=color:#f8f8f2>    },</span></span>
46<span class=line><span style=color:#f8f8f2>  ],</span></span>
47<span class=line><span style=color:#f8f8f2>});</span></span>
48<span class=line></span>
49<span class=line><span style=color:#f8f8f2>productHints.</span><span style=color:#a6e22e>show</span><span style=color:#f8f8f2>();</span></span></code></pre></div></div></div></div></div>

49<script type=module>var e=document.getElementById("code-showcase");if(e){let t=["border-black","bg-yellow-300","text-black"],a=["border-transparent","bg-white/15","text-gray-200","hover:bg-white/25","hover:text-white"],l=Array.from(e.querySelectorAll("[data-code-tab]")),r=Array.from(e.querySelectorAll("[data-code-panel]"));l.forEach(e=>{e.addEventListener("click",()=>{let o=e.dataset.codeTab;l.forEach(e=>{let l=e.dataset.codeTab===o;e.classList.remove(...t,...a),e.classList.add(...l?t:a)}),r.forEach(e=>{let t=e.dataset.codePanel===o;e.classList.toggle("block",t),e.classList.toggle("hidden",!t)})})})}</script>

49<div class="border-gray-200 bg-white border-t md:py-20 py-14" data-astro-cid-23gkgyqt><div class="mx-auto max-w-[1050px] px-7 sm:px-10"><div class="grid grid-cols-1 gap-10 sm:gap-6 sm:grid-cols-3 text-center" data-astro-cid-23gkgyqt><div class="flex items-center flex-col" data-astro-cid-23gkgyqt><div class="text-black font-bold tracking-tight md:text-6xl tabular-nums text-5xl" data-astro-cid-23gkgyqt>4.3M</div><div class="flex items-center md:text-base text-sm gap-2 mt-3 text-black/50" data-astro-cid-23gkgyqt><svg class="h-4 md:h-5 md:w-5 w-4" fill=currentColor viewBox="0 0 24 24"><path d="M20.001 3C20.5533 3 21.001 3.44772 21.001 4V20C21.001 20.5523 20.5533 21 20.001 21H4.00098C3.44869 21 3.00098 20.5523 3.00098 20V4C3.00098 3.44772 3.44869 3 4.00098 3H20.001ZM17.001 7H7.00098V17H12.001V9.5H14.501V17H17.001V7Z"/></svg>downloads / month</div></div><div class="flex items-center flex-col" data-astro-cid-23gkgyqt><div class="text-black font-bold tracking-tight md:text-6xl tabular-nums text-5xl" data-astro-cid-23gkgyqt>26.3K+</div><div class="flex items-center md:text-base text-sm gap-2 mt-3 text-black/50" data-astro-cid-23gkgyqt><svg class="h-4 md:h-5 md:w-5 w-4" fill=currentColor viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>github stars</div></div><div class="flex items-center flex-col" data-astro-cid-23gkgyqt><div class="text-black font-bold tracking-tight md:text-6xl tabular-nums text-5xl" data-astro-cid-23gkgyqt>286M</div><div class="flex items-center md:text-base text-sm gap-2 mt-3 text-black/50" data-astro-cid-23gkgyqt><svg class="h-4 md:h-5 md:w-5 w-4" fill=currentColor viewBox="0 0 24 24"><path d="M13 2L3 14h7v8l10-12h-7z"/></svg>cdn hits / month</div></div></div><p class="text-base text-center mt-14 text-black/40" data-astro-cid-23gkgyqt>Works with any framework or library, or even with vanilla JavaScript.</p></div><div class="overflow-hidden marquee-mask mt-6 py-2" data-astro-cid-23gkgyqt><div class="flex items-center marquee-track w-max gap-5" data-astro-cid-23gkgyqt><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=React class="h-7 w-7" src=/frameworks/react.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>React</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Vue class="h-7 w-7" src=/frameworks/vue.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Vue</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Angular class="h-7 w-7" src=/frameworks/angular.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Angular</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Svelte class="h-7 w-7" src=/frameworks/svelte.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Svelte</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Solid class="h-7 w-7" src=/frameworks/solid.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Solid</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Next.js class="h-7 w-7" src=/frameworks/nextjs.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Next.js</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt="Vanilla JS" class="h-7 w-7" src=/frameworks/javascript.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Vanilla JS</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=React class="h-7 w-7" src=/frameworks/react.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>React</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Vue class="h-7 w-7" src=/frameworks/vue.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Vue</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Angular class="h-7 w-7" src=/frameworks/angular.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Angular</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Svelte class="h-7 w-7" src=/frameworks/svelte.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Svelte</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Solid class="h-7 w-7" src=/frameworks/solid.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Solid</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Next.js class="h-7 w-7" src=/frameworks/nextjs.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Next.js</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt="Vanilla JS" class="h-7 w-7" src=/frameworks/javascript.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Vanilla JS</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=React class="h-7 w-7" src=/frameworks/react.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>React</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Vue class="h-7 w-7" src=/frameworks/vue.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Vue</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Angular class="h-7 w-7" src=/frameworks/angular.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Angular</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Svelte class="h-7 w-7" src=/frameworks/svelte.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Svelte</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Solid class="h-7 w-7" src=/frameworks/solid.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Solid</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt=Next.js class="h-7 w-7" src=/frameworks/nextjs.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Next.js</span></span><span class="flex items-center gap-2.5 bg-white border-2 border-black px-5 py-3 rounded-2xl shadow-[3px_3px_0_0_#000]" data-astro-cid-23gkgyqt><img alt="Vanilla JS" class="h-7 w-7" src=/frameworks/javascript.svg height=28 width=28 data-astro-cid-23gkgyqt><span class="whitespace-nowrap font-semibold text-base" data-astro-cid-23gkgyqt>Vanilla JS</span></span></div></div></div><div class="border-gray-200 bg-white border-t pb-28 pt-20" data-astro-cid-5k54e7ww><div class="mx-auto max-w-[1050px] px-7 sm:px-10"><div class="mx-auto max-w-2xl text-center" data-astro-cid-5k54e7ww data-driver-license=MIT><span class="items-center border-black border-2 shadow-[3px_3px_0_0_#000] bg-yellow-300 text-black font-semibold gap-2 inline-flex px-4 py-1.5 rounded-full text-sm" data-astro-cid-5k54e7ww>MIT Licensed</span><h2 class="text-black font-bold tracking-tight !leading-tight md:text-5xl mt-5 text-3xl" data-astro-cid-5k54e7ww>Free for everyone, <span class=marker data-astro-cid-5k54e7ww>forever</span></h2><p class="text-base md:text-lg mb-8 max-w-lg mt-4 mx-auto text-black/60" data-astro-cid-5k54e7ww>driver.js is open source under the MIT license. Use it in your side projects, your startup, or your client work.</p><ul class="mx-auto gap-x-10 gap-y-3 grid grid-cols-1 mt-8 sm:grid-cols-2 text-left w-fit" data-astro-cid-5k54e7ww><li class="flex items-center gap-2.5 font-medium md:text-base text-black/80 text-sm" data-astro-cid-5k54e7ww><span class="flex items-center justify-center bg-yellow-300 flex-shrink-0 h-6 rounded-full text-black w-6" data-astro-cid-5k54e7ww><svg class="h-3.5 w-3.5" fill=none viewBox="0 0 24 24" stroke=currentColor stroke-linejoin=round stroke-width=3 stroke-linecap=round><path d="M5 12l5 5L20 7"/></svg></span>Personal projects</li><li class="flex items-center gap-2.5 font-medium md:text-base text-black/80 text-sm" data-astro-cid-5k54e7ww><span class="flex items-center justify-center bg-yellow-300 flex-shrink-0 h-6 rounded-full text-black w-6" data-astro-cid-5k54e7ww><svg class="h-3.5 w-3.5" fill=none viewBox="0 0 24 24" stroke=currentColor stroke-linejoin=round stroke-width=3 stroke-linecap=round><path d="M5 12l5 5L20 7"/></svg></span>Commercial products</li><li class="flex items-center gap-2.5 font-medium md:text-base text-black/80 text-sm" data-astro-cid-5k54e7ww><span class="flex items-center justify-center bg-yellow-300 flex-shrink-0 h-6 rounded-full text-black w-6" data-astro-cid-5k54e7ww><svg class="h-3.5 w-3.5" fill=none viewBox="0 0 24 24" stroke=currentColor stroke-linejoin=round stroke-width=3 stroke-linecap=round><path d="M5 12l5 5L20 7"/></svg></span>Unlimited projects</li><li class="flex items-center gap-2.5 font-medium md:text-base text-black/80 text-sm" data-astro-cid-5k54e7ww><span class="flex items-center justify-center bg-yellow-300 flex-shrink-0 h-6 rounded-full text-black w-6" data-astro-cid-5k54e7ww><svg class="h-3.5 w-3.5" fill=none viewBox="0 0 24 24" stroke=currentColor stroke-linejoin=round stroke-width=3 stroke-linecap=round><path d="M5 12l5 5L20 7"/></svg></span>No attribution required</li></ul></div></div></div><div class=bg-yellow-300/80><div class="mx-auto max-w-[1050px] px-7 sm:px-10"><div class="flex items-center flex-col md:pb-20 pb-14 text-center"><img alt="driver.js mascot riding a rocket" class="w-auto -mt-8 h-48 lg:-mt-7 lg:h-80 md:-mt-10 md:h-60" src=/rocket-fox.png height=950 width=826><h2 class="text-black font-bold !leading-tight md:text-5xl text-3xl max-w-xl md:mt-8 mt-6">Ship your first tour today</h2><p class="text-base text-black/70 max-w-lg md:mt-4 md:text-xl mt-3">

49A few lines of code and ~5kb is all it takes. No dependencies, no build step, just driver.js.</p><div class="flex flex-col gap-4 items-stretch sm:flex-row md:mt-9 mt-7"><a class="text-black border-black cursor-pointer border-2 transition-all bg-white focus-visible:outline-none focus:outline-none active:shadow-[2px_2px_0_0_#000] active:translate-x-[3px] active:translate-y-[3px] font-semibold hover:bg-gray-100 md:py-3 md:text-xl px-7 py-2.5 rounded-2xl shadow-[5px_5px_0_0_#000] text-center text-lg" href=/docs/installation>Get Started</a><a class="flex items-center border-black border-2 rounded-2xl active:shadow-[2px_2px_0_0_#000] active:translate-x-[3px] active:translate-y-[3px] bg-gray-800 cursor-pointer focus-visible:outline-none focus:outline-none font-semibold gap-2 hover:bg-gray-700 justify-center md:py-3 md:text-xl px-7 py-2.5 shadow-[5px_5px_0_0_#000] text-center text-lg text-white transition-all" href=https://github.com/nilbuild/driver.js target=_blank><svg class="h-3.5 w-3.5 md:h-4 md:w-4" fill=currentColor viewBox="0 0 24 24" stroke=currentColor stroke-linejoin=round stroke-width=1.5><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.785 1.401 8.166L12 18.896l-7.335 3.866 1.401-8.166L.132 9.21l8.2-1.192z"></path></svg>Star on GitHub</a></div></div></div></div><div class="bg-black py-8 text-white"><div class="mx-auto max-w-[1050px] px-7 sm:px-10"><p class="text-lg text-center text-white">MIT Licensed &copy; 2026<span class="hidden sm:inline"><span class=mx-7>&middot;</span><a class="" href=/docs/installation>Docs</a><a class=ml-5 href=https://github.com/nilbuild/driver.js target=_blank>GitHub<img alt="" class="h-3 inline-block ml-2 w-3" src=/arrow.svg height=16 width=16></a><a class=ml-5 href=https://twitter.com/nilbuild target=_blank>Twitter<img alt="" class="h-3 inline-block ml-2 w-3" src=/arrow.svg height=16 width=16></a></span></p></div></div>

49<script type=module>window.fireEvent=e=>{let{action:a,category:n,label:t,value:l}=e;window.gtag?window.gtag("event",a,{event_category:n,event_label:t,value:l}):console.warn("Missing GTAG - Analytics disabled")}</script>

vendor: 57 bytes, line 49

49<script src="https://www.googletagmanager.com/gtag/js?id=

49G-LGE7XP5BHC

vendor: 17 bytes, line 49

49" async></script>

49<script type=module>function e(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],e("js",new Date),e("config","G-LGE7XP5BHC")</script>

49<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"422326874aa7464085886b3344eb5dae","r":1,"spa":2}' crossorigin="anonymous"></script>

49
50</body></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.