100 Free Vanilla JavaScript Projects

Real projects built with plain JavaScript and the newest browser features, each with a live demo and a single HTML file. No framework, no build step, free for commercial use.

Live gallery: https://mmrahmanbappi.github.io/100-vanilla-javascript-projects/

Projects so far

#	Project	What it does	Live	Preview
001	Local AI Chatbot	A private chat assistant that runs on your graphics card	Demo
002	Image Classifier	Drop a photo and see what the AI thinks it is	Demo
003	Speech to Text Notes	A voice notes app that writes down what you say	Demo
004	AI Text Summarizer	Paste a long article and get the key points	Demo
005	Smart Writing Assistant	A writing helper that drafts, rewrites and checks your text	Demo
006	Live Translator	A translator that works as you type, in 15 languages	Demo
007	Background Remover	Cut the background out of any photo in seconds	Demo
008	Semantic Search for Notes	Search your notes by meaning, not exact words	Demo
009	Voice Command Controller	Control a smart home dashboard with your voice	Demo
010	QR and Barcode Scanner	Scan QR codes and barcodes with your camera	Demo
011	UI Component Library	Six reusable Web Components you can drop into any page	Demo
012	View Transitions Gallery	A photo gallery where images grow smoothly into the detail page	Demo
013	Client-side Router	A tiny single page app router with real URLs	Demo
014	Popovers Without Libraries	Tooltips, menus, toasts and a side sheet with no library	Demo
015	Signals State Library	A 40 line reactive state library running a shopping cart	Demo
016	Infinite Scroll Feed	A photo feed that loads more posts as you scroll	Demo
017	Responsive Dashboard Widgets	Dashboard widgets that change layout when you resize them	Demo
018	Kanban Board	A Trello style task board with drag and drop	Demo
019	Color Picker and Palette Tool	A color picker that pulls palettes from photos and checks contrast	Demo
020	Accessible Modal and Form Kit	An accessible sign up form inside a native dialog	Demo
021	Offline-first Todo PWA	A todo app you can install that works with no internet	Demo
022	Expense Tracker PWA	A spending tracker with charts that syncs when back online	Demo
023	Reminder Notifications	A reminder app with Done and Snooze buttons in the notification	Demo
024	Local Markdown Editor	A Markdown editor that saves real files on your disk	Demo
025	Share Target Link Saver	A reading list app that appears in your phone's share menu	Demo
026	Multi-tab Sync	Open it in several tabs and watch them stay in sync	Demo
027	Instant-loading Blog	A blog where the next page is ready before you click	Demo
028	Passkey Login Demo	Sign up and sign in with your fingerprint instead of a password	Demo
029	Client-side Password Manager	An encrypted password vault that only your master password opens	Demo
030	Secure File Encryptor	Lock any file with a password, right in your browser	Demo
031	TOTP 2FA Authenticator	An authenticator app that makes six digit 2FA codes	Demo
032	Video Call App	A peer to peer video call between two browsers	Demo
033	Screen Recorder	Record your screen with your voice and your face in the corner	Demo
034	Browser Video Editor	Trim a clip, add a filter and a title, and export an MP4	Demo
035	Collaborative Whiteboard	A shared drawing board with live cursors	Demo
036	Music Visualizer	Turn music into moving bars, waves and a glowing ring	Demo
037	WebGPU Particle Playground	Up to a million glowing particles that follow your mouse	Demo
038	Image Compressor	Shrink photos in bulk without uploading them	Demo
039	Live Chat App	A real time chat with rooms and typing indicators	Demo
040	Online Code Playground	A CodePen style editor with live preview and share links	Demo
041	Bluetooth Device Dashboard	Read live heart rate and battery from a Bluetooth device	Demo
042	Arduino Serial Monitor	Read and plot data from an Arduino or ESP32 over USB	Demo
043	WebAssembly Image Filters	Photo filters in hand written WebAssembly, raced against JavaScript	Demo
044	Performance Monitor Widget	A live panel for Core Web Vitals on any page	Demo
045	Browser File Compressor	Gzip any file or unpack a .gz right in the browser	Demo
046	Scheduler API Demo	See why long tasks freeze a page and how to fix it	Demo
047	JSON Formatter and Validator	Format, check and browse JSON, even large files	Demo
048	Regex Tester	Test regular expressions with live highlights and groups	Demo
049	Mini Postman API Client	Send API requests and read clean responses	Demo
050	Temporal Date and Time Toolkit	Time zones, date math and Unix time with the new Temporal API	Demo
051	Mega Menu Navigation	A big dropdown menu with columns, keyboard support and a mobile drawer	Demo
052	Sticky Header and Scroll Progress	A header that shrinks on scroll with a reading progress bar and back to top button	Demo
053	Touch Image Slider	A photo slider with swipe, autoplay, dots and keyboard control	Demo
054	Lightbox Gallery with Zoom	A photo grid that opens a full screen viewer with zoom and pan	Demo
055	Tabs and Accordion Kit	Accessible tabs and accordions with keyboard support and smooth height animation	Demo
056	Pricing Table with Toggle	A pricing table with a monthly and yearly switch, currencies and a seat slider	Demo
057	Testimonial Carousel	A customer reviews slider that shows one, two or three cards depending on space	Demo
058	Cookie Consent Banner	A GDPR style cookie banner with categories, saved choices and blocked scripts	Demo
059	Scrollspy Table of Contents	An automatic table of contents that highlights the section you are reading	Demo
060	Theme Switcher	A light, dark and system theme switch that remembers the choice with no flash	Demo
061	Multi-step Form Wizard	A sign up form split into steps with checks, a progress bar and a saved draft	Demo
062	File Upload Dropzone	A drag and drop uploader with previews, size limits and progress bars	Demo
063	Date Range Picker	A two month calendar for picking check in and check out dates	Demo
064	Autocomplete Search	A search box that suggests results as you type, with keyboard control	Demo
065	OTP Code Input	A six box verification code input with paste, auto advance and a resend timer	Demo
066	Password Strength Meter	A password box that rates strength, estimates crack time and suggests a strong password	Demo
067	Phone Input with Country Codes	A phone number field with a searchable country list and automatic formatting	Demo
068	Star Rating and Review Form	A review form with half star ratings, photos and a live rating summary	Demo
069	Signature Pad	A canvas where people sign with a finger, pen or mouse and save a PNG	Demo
070	Mini Rich Text Editor	A small editor with bold, headings, lists and links that exports clean HTML and Markdown	Demo
071	Shopping Cart with Coupons	A cart drawer with quantities, coupon codes, free shipping progress and saved items	Demo
072	Product Variant Picker	A product page where colour and size change the picture, price and stock	Demo
073	Product Filter and Sort	A product listing with category, price, colour and rating filters saved in the URL	Demo
074	Checkout Form	A one page checkout with address, delivery options, card checks and an order summary	Demo
075	Multi-currency Prices	Prices that switch to the visitor's currency with local formatting and neat rounding	Demo
076	Invoice Generator	An editable invoice that does the maths and prints to a clean PDF	Demo
077	Booking Slot Calendar	An appointment picker with services, available time slots and a calendar file	Demo
078	Store Locator	A list of shops sorted by distance from you, with open now status and a simple map	Demo
079	Order Tracking Timeline	An order status page with a step timeline, delivery estimate and live updates	Demo
080	Wishlist and Compare	Heart products to a saved wishlist and compare up to three side by side	Demo
081	Data Table	A sortable, searchable table with filters, pages, row selection and CSV export	Demo
082	SVG Charts Kit	Line, bar and donut charts drawn with plain SVG, with tooltips and a data table	Demo
083	Markdown Blog Engine	A tiny blog that reads Markdown posts, with tags, search and reading time	Demo
084	Blur-up Lazy Images	A photo grid that shows tiny blurred placeholders and loads full images when they scroll into view	Demo
085	Countdown Timer Kit	An event countdown, a sale timer, a kitchen timer with sound and a stopwatch with laps	Demo
086	Toast Notification Center	Toast messages with types, positions, undo actions and a notification history	Demo
087	Threaded Comments	A comment section with nested replies, likes, editing, sorting and relative times	Demo
088	Language Switcher	A page that switches between five languages, including right to left Arabic	Demo
089	Searchable FAQ	An FAQ with instant search, categories, deep links, votes and automatic schema markup	Demo
090	Before and After Slider	A draggable slider that compares two images, like before and after a photo edit	Demo
091	Meta Tag Generator	A form that writes your title, description and social tags with live search and share previews	Demo
092	OG Image Maker	A canvas tool that makes 1200 by 630 share images with your title and brand	Demo
093	Schema JSON-LD Builder	A form that writes structured data for businesses, products, articles, events and FAQs	Demo
094	Favicon Generator	A tool that makes every favicon size and a web manifest from a letter or an image	Demo
095	Responsive Image Maker	A tool that resizes one photo into several sizes and writes the srcset code	Demo
096	Sitemap Generator	A tool that turns a list of pages into sitemap.xml and robots.txt	Demo
097	Accessibility Checker	A checker that finds missing alt text, low contrast, heading gaps and unlabeled fields	Demo
098	Spam-proof Contact Form	A contact form that blocks bots with a honeypot, a timing check and simple content rules	Demo
099	Privacy Analytics Lite	A cookie free visit counter with a small dashboard of pages, sources and devices	Demo
100	Page SEO Audit	An on-page SEO checker that scores a page and lists what to fix	Demo

Categories

• 1. AI in the Browser (live)
• 2. Modern UI (live)
• 3. PWA and Offline (live)
• 4. Security and Auth (live)
• 5. Media and Real Time (live)
• 6. Hardware and Performance (live)
• 7. Developer Tools (live)
• 8. Website Sections (live)
• 9. Forms and Input (live)
• 10. E-commerce and Business (live)
• 11. Content and Data (live)
• 12. SEO and Site Tools (live)

How to use a project

1. Open the project folder and download demo.html.
2. Serve it with npx serve . or python -m http.server, since camera, microphone and AI features do not run from file://.
3. Change the text and colors, then upload it anywhere: GitHub Pages, Netlify, Vercel or your own server.

License

MIT. Use these projects in personal and commercial work. Project 007 uses the RMBG 1.4 model, which is for non-commercial use only. Projects 035 and 039 include a small server.js for syncing across devices. A star on the repo helps more people find them.