Weekly Web Design & Development News: Collective #655
Everything you need to know in development & design this week, rounded up for you (Week 20, 2026).
You'll find the most essential things right now: JavaScript & CSS libraries, useful code snippets, crucial web dev news & resources, curated AI tools, free design assets, and plenty of other good stuff we found!
Highlights:
- OpenAI just added three new audio models to their API, unlocking a whole new class of voice apps.
- Grab this huge open-source collection of copy-and-paste shadcn components and blocks to build your next UI faster.
- ebsr is a neat new JS library that lets you run real-time AI image upscaling right in the browser.
- If you're looking for a solid Claude Design alternative, the newly released Open Design is free, open-source, and definitely worth a look.
- Smashing Magazine breaks down the architecture and actual trade-offs of building local-first web apps.
- Drop this ridiculously cool WebGL liquid metal effect into your next React project.
- over 30 other handy dev tools, JS libraries, and reads
- +3 fresh Figma UI kits and icon packs
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
WebGL Chart - GPU-Powered WebGL Canvas Chart Library for JavaScript.
Autumn-Note - Full-featured WYSIWYG HTML Editor With Image Upload.
neiki-gallery - Full-featured Vanilla JS Lightbox & Image Gallery.
Bubble Tooltips - Material Design Inspired Bubble Tooltips with Pure CSS.
pagiflow - Touch-Ready, High-Performance Vanilla JS Slider.
bs-markdown-editor - Bootstrap 5 Markdown Editor with Preview.
jQuery bsTimepicker - Clock Dial Time Picker for Bootstrap.
beautiful-html-templates - A library of HTML slide templates designed so any coding agent can pick the right one and produce a beautiful deck on the user's behalf, automatically.
websr - Javascript library for running real-time AI Upscaling in the browser.
view-transitions-mock - A non-visual polyfill for Same-Document View Transitions.
Discover more JavaScript & CSS Libraries →
NextGen JavaScript
tauri-ui - Tauri Desktop App Scaffolding with shadcn/ui.
shadcn-dashboard-landing-template - Modern Shadcn Dashboard & Landing Page Templates for Vite and Next.js.
carouselcn - Copy-Paste React Carousel with Tailwind and shadcn/ui.
rangeflow - React Date Range Picker with Slider & TailwindCSS.
metal-fx - React WebGL Liquid Metal Effect.
expo-ios-like-date-picker - React Native/Expo iOS-like Date Picker for Android.
shadcn-studio - An open-source collection of copy-and-paste shadcn components, blocks, and templates.
a11y-starter-kit-code - A free, production-ready accessibility starter kit.
astro-sonnet - A polished blog and portfolio starter built with Astro for content-driven sites.
vue-gantt - Vue-native Gantt chart component for building interactive project timelines.
react-native-nitro-qrcode - Fast QR code generator for React Native and Expo with Nitro, native C++, PNG export, gradients, and no react-native-svg or Skia.
react-native-nitro-cache - High-performance, General-purpose unified cache for images, videos, audio, and files in React Native.
fitbox - Reflow-free text-to-box fitting for React, built on Pretext.
web-audio-api - Portable implementation of Web audio API.
@pinojs/redact - Redact JS objects with the same API as fast-redact, but uses innovative selective cloning instead of mutating the original.
Discover more Next.js & shadcn/ui resources →
Web Dev Tools & Resources
mirage - A Unified Virtual Filesystem For AI Agents.
brightbean-studio - Open-source, self-hostable social media management platform.
quien - A better whois and domain intelligence toolkit.
crashcat - Physics engine for javascript, built for games, simulations, and creative websites.
klattsch - Primitive parallel-formant speech synth in the browser.
mochi - The library for faithful browser automation.
designpull - Design tokens in, CSS and components out.
speech-speed - Chrome extension that dynamically adjusts video playback speed based on how fast the speaker is talking.
rdt-cli - A CLI for Reddit — browse feeds, read posts, search, and interact via reverse-engineered API.
officeParser - A robust, strictly-typed Node.js and Browser library for parsing office files (docx, pptx, xlsx, odt, odp, ods, pdf, rtf).
Graphic Design Freebies
Glass Icon Pack - Glass Icon Pack SVG (Figma).
Google Workspace 2026 Icons - Google Workspace 2026 Icons Pack Figma.
Button UI Kit - Figma Button UI Kit with 120 Variants.
Discover more Graphic Design Freebies →
Curated AI Tools for Developers and Designers
Open Design - Free Open-Source Claude Design Alternative.
Chromex - A Chrome MV3 side-panel extension that connects your browser to Codex via a local bridge.
GPT‑Realtime - OpenAI just released three audio models in the API that unlock a new class of voice apps for developers.
DeepSeek TUI - Free AI Coding Agent for DeepSeek (Claude Code Alternative).
Schole - Turn everyday work into personalized AI learning.
Kanwas AI - Free AI Workspace for Teams and Agents.
Loupe - Free Open-Source AI Reviewer for Scientific Papers.
Chandra OCR 2 - Free Accurate OCR for Complex Documents.
bifrost - Fastest enterprise AI gateway (50x faster than LiteLLM) with adaptive load balancer, cluster mode, guardrails, 1000+ models support & <100 µs overhead at 5k RPS.
News & Articles
10 Best Free AI Diagram Generators in 2026 (Link)
OpenAI Codex Commands Cheat Sheet. (Link)
The Architecture Of Local-First Web Development (Link)
Using safe-area-inset to build mobile-safe layouts. (Link)
Designing Stable Interfaces For Streaming Content (Link)
Trustworthy JavaScript for the Open Web. (Link)
- Prev: Weekly Web Design & Development News: Collective #654
- Next: None
