Every tool, one honest take

The thoughtful elder of web publications — standards, craft and the why behind the how. Less how-to, more how-to-think.

Where you go when good-looking is not enough and you want wow. Use sparingly; a little goes a long way, and a whole page of effects reads as a template.

The classic color wheel for building harmonies and checking color-blind safety. Free, reliable, and it speaks every color model.

Generates accessible palettes from target contrast ratios and exports design tokens. The pick when accessibility drives your color system, not the other way around.

The closest thing Node has to Laravel — a complete, conventions-first backend framework. Lovely when you want everything decided for you and just want to build.

Terminal AI pairing with first-class git — every change is a commit you can undo. My pick when I want an agent that respects version control and runs on any model.

A spreadsheet that thinks it's a database — and it's right. The backbone of countless no-code stacks; its API makes it a quick backend for small projects.

Search that feels instant and forgives typos, as a hosted API — the gold standard for site and app search. Brilliant DX; costs climb with scale, so watch the meter.

Worth it mainly if you live in AWS — it knows your services and can do real code migrations. Outside that world, other assistants feel sharper.

Mixpanel's main rival — serious product analytics for growth teams. Pick it when measuring and moving product metrics is a core job, not a nice-to-have.

Another Figma-to-code bridge, focused on developer handoff and live prototypes. Treat its output as scaffolding, not final code.

The classic just-add-a-class CSS animation library. Ancient by web standards and still handy for a quick attention cue.

The sweet spot between hand-rolled CSS and a heavy motion framework — tiny, framework-agnostic and a joy for staggered, timeline-based motion. If you are not on React, this is my first reach.

Tweak ready-made CSS animations in the browser and copy only the keyframes you use. Great for grabbing a one-off effect without adding a dependency.

Compose CSS animations from utility attributes without writing keyframes — a neat mental model. Tiny, but development is quiet, so weigh maturity.

The default for data-dense enterprise and admin UIs — tables, forms, the works. Distinctive look; great for dashboards, less so for marketing sites.

Strong at coding, careful reasoning and long context — and the engine behind a lot of the agent tools in this library. Pay-per-token; prompt caching keeps repeat costs down.

Animate-on-scroll with nothing but data attributes — the lazy, effective way to fade things in. Maintenance is quiet, but it still does the job in two minutes.

An open-source Firebase alternative with auth, databases, storage, functions and realtime. The pick when you want Firebase's breadth without the lock-in.

Headless components built on state machines that behave identically across four frameworks. The pick if you're not React-only. From the Chakra team.

The best choice for content sites, blogs and marketing pages — fast by default, and its content collections are a joy for data-driven sites (this library runs on them). Bring React only where you actually need it.

Built for big, gnarly repos where context is everything. If your codebase is huge and other tools lose the thread, this is the one to trial.

The enterprise identity standard — social, SSO, MFA, the lot. Rock-solid and feature-deep; pricing climbs steeply once you need enterprise connections.

Drop one function on a parent and added, removed and moved elements animate themselves — 2kB, reduced-motion aware. The 'Prettier for motion' tagline is earned.

Frontend hosting plus AWS backend services, with Git-based CI/CD. Worth it if you're already in AWS; the billing model and ecosystem are a lot to learn otherwise.

The benchmark for ambitious, animated web design — Site of the Day sets the bar. Half motivation, half intimidation; the place to calibrate what world-class looks like.

A batteries-included WebGL/WebGPU engine — more out-of-the-box tooling than Three.js, with great WebXR support. The pick when you want an engine, not a library.

Smooth, app-like transitions between pages on a classic multi-page site. The trick behind a lot of those seamless agency-site navigations.

Unstyled React primitives from the people behind Radix, MUI and Floating UI, now at 1.0. Essentially next-gen Radix — a safe bet for new headless work.

The open-source Airtable — self-host it and own your data. The pick when you like the Airtable model but not the lock-in or the bill.

Adobe's portfolio network, stronger on in-depth case studies and branding work. Where to go for the thinking behind a project, not just the pretty frames.

Curated designer portfolios, resumes and case studies, leaning more senior. Where to look when you're leveling up your own portfolio.

Open-source, framework-agnostic auth that lives inside your own code — email, OAuth, 2FA, multi-tenancy via plugins. The self-hosted answer to Clerk, and the TypeScript crowd's new default.

Uptime monitoring, on-call and logs in one tidy product with a nice status-page feature. A solid all-in-one when you want to know the moment something goes down.

A blazing Rust toolchain that formats and lints in one fast tool, aiming to replace Prettier + ESLint. The performance pick; the ecosystem is younger than what it replaces.

Customisable illustration sets you can recolor and remix to fit a brand. A step up from generic flat illustrations when you want some personality.

Great for spinning up a working prototype in one sitting without touching your local setup. Burns through tokens fast and complex apps outgrow it — but for demos and validation it is hard to beat.

The framework that taught the web responsive grids. Unfashionable now and recognisably 'Bootstrappy', but still a fast, stable choice when you just need it to work.

A Git-native API client that stores collections as plain-text files in your repo. The pick for teams who want version-controlled, offline, no-cloud API requests.

Raw, rule-breaking brutalist web design in one place. A reference for when a project wants to deliberately avoid the standard SaaS look.

The most capable no-code app builder — real database, logic and auth, no code. You can build a genuine product in it; complex apps get tangled and you're locked to the platform.

Its Visual Copilot turns Figma into real component code — the design-to-code bridge that actually works. Handy when handoff is the bottleneck.

A clean, CSS-only framework — readable classes, no JS, easy to learn. A pleasant middle ground between Bootstrap and going full utility-first.

An all-in-one JS/TS runtime, bundler, test runner and package manager in one fast binary. A compelling Node alternative — try it for the speed, mind the edge cases.

Cheap, fast pay-as-you-go CDN, storage, DNS and video. No free tier, but the per-GB rates are famously low — a cost-efficient edge layer.

The browser-support tables you check before using a shiny CSS or JS feature. Bookmark it; it settles 'can I actually ship this?' in seconds.

Not a product-design tool, but the fastest way for non-designers to make decent social images, slides and assets. Handy alongside real tools, not instead of them.

Dirt-cheap, dead-simple one-page sites — a landing page or link-in-bio in minutes. When you need a single page and nothing more, nothing is faster.

Accessible React components with a lovely style-props API — a comfortable default. The core stays free; pre-built blocks are the upsell.

Subscription billing once it gets complicated — trials, proration, dunning, revenue ops. Worth it when your billing logic has outgrown raw Stripe; overkill before that.

The most capable agent for real, multi-file work right now — it reasons about your whole repo instead of autocompleting the current line. Needs a paid Claude plan, but it earns it.

Drop-in auth with beautiful prebuilt React components and B2B/org features. The fastest way to good-looking auth in a frontend-heavy app; pricing scales with active users.

Agentic power on your own API keys, with every action shown and approved before it runs. Great if you want autonomy without a subscription and don't mind paying for tokens.

Git-to-URL hosting on Cloudflare's edge with unlimited bandwidth on the free plan — hard to beat on cost. Cloudflare is steering new full-stack work toward Workers, so the two keep merging.

Serverless functions that run at the edge, close to users, billed by compute not uptime. The backbone of Cloudflare's platform; pair with KV, D1 and R2 for state.

Store, transform and deliver images and video with on-the-fly URL transforms over a CDN. The media layer that saves you building an image pipeline.

The front-end playground for quick HTML/CSS/JS demos and sharing. The fastest way to prototype an effect or share a snippet; not for full apps.

Design portfolios from interns and early-career designers at top tech companies. The reference for structuring your own portfolio and case studies.

A daily gallery of UI shots organised by component challenge — forms, checkout, and so on. Free, and handy when you need ideas for one specific component.

A grab-bag of palette tools with exports in every space including OKLCH. A solid utility belt when the simple tools run out.

A bottomless gallery of hand-picked four-color palettes to copy. Inspiration, not a generator — great for a quick starting point.

Lyft's tool for building color scales from hue/saturation/luminosity curves. For designers who want to engineer an accessible system, not just pick swatches.

Paste a hex and get everything about it — conversions, schemes, blindness simulation. The reference page for understanding a single color.

Feed it one color, get palettes and ready-made CSS gradients. Fast when you have a brand color and need everything around it.

Managed, authenticated tool access for agents so you don't hand-roll OAuth for every integration. The plumbing layer for agents that actually do things.

A reactive TypeScript backend — database, server functions, realtime and vector search in one. Loved by the AI-app crowd; queries update live with no plumbing.

An open-source, self-hostable Heroku/Vercel alternative you point at your own servers. The pick when you want PaaS convenience without the per-seat bill — you just bring a VPS.

The fast palette generator everyone starts with — hit spacebar, lock what you like. Free and frictionless; Pro adds extras you mostly won't need.

Hand-curated free HD/4K footage aimed at aesthetically consistent website backgrounds. Smaller but tasteful — good for hero loops.

Scaffolds a typesafe Next.js + tRPC + Prisma + Tailwind stack in seconds. Still the fastest way to start an end-to-end-typed app.

The site that tells you what '0 */6 * * *' actually means before you commit it. Bookmark it; cron syntax never sticks.

An Awwwards-style awards gallery with broader, more permissive curation. A deep well of award-quality sites to browse when you need range.

A dead-simple linear/radial gradient maker with copy-paste CSS. Bookmark it for the five-second gradient.

A vast archive of CSS articles and the Almanac reference. Publishing slowed after the DigitalOcean acquisition, but the back catalogue is gold.

The most polished place to feel AI in your editor — tab-completion and inline edits are genuinely good. The free tier is enough to learn on before you hit the paywall.

Semantic class names and 30+ themes on top of Tailwind, so you write less utility soup. Great for prototyping; theming is its superpower.

Date handling without dragging in a giant library — import just the functions you use. The sensible modern choice now that Moment is legacy.

Moment's tiny successor — the same familiar API in 2kB. Pick it when you want Moment's ergonomics without Moment's weight.

A global edge platform for JS/TS with fast cold starts and built-in KV storage. The natural home for Deno apps and edge functions.

Fast, offline-capable docs for 100+ languages and frameworks in one searchable app. The quickest way to look something up without bouncing between doc sites.

An engineer you delegate whole tasks to, not an in-editor helper. Impressive for async work, but priced for teams and still needs a human watching.

Generate consistent, fun avatars from any string — perfect placeholder profile pictures with no uploads. An HTTP API means you can use it anywhere.

Git-based deploys on DigitalOcean's predictable-priced cloud, with free static sites. A sensible choice when you want a real cloud without AWS complexity.

A tiny, Docker-powered self-hosted PaaS — git push to your own box with Heroku-style buildpacks. Ideal for terminal-comfortable indie devs running their own server.

Hand-drawn vector illustrations with a warmer, less generic look. Reach for it when the flat-illustration aesthetic feels too corporate.

The indispensable helper kit for R3F — controls, loaders, cameras, environments, shaders, all ready-made. You'll install it five minutes after R3F.

The endless feed of UI, branding and illustration shots. Great for visual ideas; remember most shots are concepts, not shipped products — don't copy the impractical bits.

A thin, SQL-close TypeScript ORM with great types and a tiny runtime. My pick when I want to stay near SQL and have agents generate correct queries.

The best-sounding text-to-speech and voice cloning around, with a clean API. The default when your app needs a voice that doesn't sound like a robot.

A refreshingly simple static site generator — bring your own templates, ship pure HTML. The pick when even Astro feels like too much framework for a content site.

A free, well-written online book that teaches JavaScript properly, with interactive examples. The canonical free text for actually learning the language.

A deep, opinionated full-stack curriculum from Kent C. Dodds — testing, React, the whole stack. A serious paid investment for going pro, not a quick read.

The standard JS/TS linter, with a huge rule and plugin ecosystem. Essential for catching bugs and enforcing conventions; flat config is the norm now.

Hand-drawn-style whiteboarding for diagrams and quick UX sketches. The fastest way to think on a canvas; the core is free and open source.

Free, mentored coding practice across dozens of languages. Great for drilling fundamentals with feedback from real people.

The way to build real native apps with React, and the React team's own recommendation. The framework is free; pay only if you want their cloud build service.

The go-to for fast image and video generation behind an API. If you're building a media-gen feature, its speed and model selection are hard to beat; you pay per use.

Enterprise edge cloud with CDN, WAF and Compute@Edge. Serious infrastructure with a monthly minimum — overkill unless you're operating at scale.

Privacy analytics with a polished, no-fuss product and no free tier. Pick it over the open-source options if you'd rather pay for a hands-off hosted experience.

The default design tool for product work, and where most UI starts before it becomes code. Real-time collaboration killed the alternatives; the free tier is plenty to learn on.

Google's veteran BaaS — realtime database, auth, hosting and functions, all wired together. Fast to start and great for mobile; proprietary and Google-flavoured, so weigh lock-in.

600+ Tailwind components with a matching Figma kit and framework ports. Broad and design-handoff-friendly; pro blocks are the upsell.

Runs your app as containers near your users worldwide, with managed Postgres. Powerful for globally distributed apps; the free allowances are gone, so it's pay-as-you-go now.

A searchable archive of type in the wild — see how a typeface actually performs before you commit. Niche, but gold for typography decisions.

Free, professional-grade typefaces in full families. Quality that rivals paid foundries — my first stop when Google Fonts feels overused.

Self-host open-license fonts as npm packages instead of hitting Google's CDN. Better privacy and performance, straight into your build — this site runs on it.

A form backend so static and frontend-only sites can collect submissions with no server. The classic way to wire up a contact form on a JAMstack site.

Design and publish a real, animated site without code, with AI to speed it up. Lovely for marketing sites and portfolios; you trade some control for the polish.

A free, interactive curriculum with thousands of challenges and real certifications. The most accessible on-ramp into coding, backed by a huge community.

Deep, practitioner-taught video courses on front-end and full-stack. Paid, but the depth and the instructors are worth a subscription when you're leveling up.

Real designs to build from, so you practise turning Figma into front-end code instead of yet another to-do app. The best way to build a portfolio while you learn.

Once the go-to React static framework, now in maintenance mode with a fading plugin ecosystem. Honest take: don't start new projects on it — use Astro or Next instead.

Google's open answer to Claude Code, with a generous free tier on a personal account. A no-cost way to get a capable agent in your terminal.

The safe default that lives in every editor and ties straight into GitHub's PR flow. Less agentic than the newer crowd, but the free tier and ubiquity make it an easy first AI assistant.

Genuinely free static hosting straight from a repo, custom domain and HTTPS included. Perfect for docs, portfolios and project sites; no server-side code.

Spreadsheet-to-app in an afternoon, now with AI assists. Great for internal tools and simple mobile apps built from data you already have.

Tightly curated high-end web design with a heavy motion focus — the floor is high. The best single feed for calibrating modern interaction and motion design.

The fastest way to try Gemini and ship it — a genuinely useful free tier and a very long context window. Worth keeping in your back pocket even if another model is your default.

Free, powerful and everywhere — but GA4 is complex, privacy-fraught and often more than a small site needs. Know it because clients ask for it; reach for something lighter when you can.

The zero-friction way to get typography that is not the system default. Pick one characterful display face and one clean workhorse — Instrument Serif, Inter and Geist are safe, current bets.

Absurdly fast inference for open models — tokens stream so quickly it changes what feels possible in a UI. The free tier is enough to feel the speed; reach for it when latency is the product.

The heavyweight for production motion and scroll-driven storytelling — and as of 2024 every plugin is free thanks to Webflow. If you have seen an award-winning site animate, it was probably this.

The simplest way to sell a digital product — paste a button, get paid. Great for creators and quick launches; the per-sale fee is the trade for zero setup.

Generate editable SVG waves, blobs, gradients and stacked shapes for backgrounds. Drop the SVG straight into a site for an on-brand hero in minutes.

Shows palettes applied to a real layout with each color's UI role labelled. Brilliant for learning which color goes where.

Point it at a Postgres database and get a production GraphQL API in minutes, permissions included. A huge shortcut when GraphQL is your interface of choice.

Unstyled, accessible primitives made to pair with Tailwind utilities. Smaller than Radix, but a natural fit if you're already on Tailwind.

Free, repeatable SVG background patterns with adjustable color and opacity, from the Tailwind crowd. Copy-paste texture for an otherwise flat section.

Clean MIT-licensed icons from the Tailwind team, in outline, solid and mini. Focused and tasteful; pairs naturally with Tailwind, though you'll outgrow the set on bigger apps.

The PaaS that defined git-push-to-deploy. Honest take: free tiers are long gone and it's in wind-down for new features — fine if you already use it, not where I'd start today.

The old NextUI, rebuilt on React Aria + Tailwind — accessible primitives with a modern, styled look. A nice middle ground between headless and batteries-included.

A tiny, lightning-fast web framework that runs everywhere — Cloudflare, Bun, Deno, Node. My pick for building an API or edge backend without ceremony.

A fast, open-source, self-hostable API client across web, desktop and CLI. The lightweight Postman alternative when you want speed and no account.

Heatmaps and recordings that show where users click, scroll and rage-quit. The quick way to see how people actually use a page, not how you think they do.

Copy-paste CSS hover effects — grows, floats, shadows, you name it. Dated, but handy for grabbing one tasteful hover without writing keyframes.

Bold, indie, trend-forward sites rather than corporate polish. Good for breaking out of the template aesthetic.

ML-generated schemes assigned to layout roles, with contrast and creativity controls. Surprisingly good for brand and site color in one shot.

The GitHub of machine learning — where open models live and where you go to find, host or demo one. Essential to know even if you mostly call hosted APIs.

Ready-made Tailwind gradient classes you can paste straight into your markup. A time-saver if you live in Tailwind.

Free, copy-paste Tailwind components with no install and no catch. Perfect for grabbing one good section without adopting a whole library.

One API over 200,000+ icons from 150+ sets — search across Heroicons, Tabler, Phosphor and more at once. The meta-library when no single set has it.

Thousands of crisp, consistent icons, totally free with no upsell. A lovely, slightly more distinctive alternative to the usual sets.

A marketplace for icons, illustrations, 3D assets and Lotties with a big free tier. Strong specifically for 3D illustrations and Lottie animations.

Durable, event-driven functions with retries and steps baked in — great for AI pipelines and anything that must not silently fail. Reach for it when reliability beats a cron.

A cleaner, open-source API client for REST, GraphQL and gRPC. A lighter Postman alternative — though a past forced-login move pushed some to Bruno.

The modern JavaScript tutorial — thorough, free, and kept current. The book-style reference I'd point any serious JS learner to.

Thirty small builds in vanilla JS, free — the cure for framework-brain and tutorial paralysis. You finish actually understanding the language.

If you live in IntelliJ or WebStorm, this with the Junie agent is the native fit. Outside JetBrains there's little reason to reach for it.

Gorgeously interactive articles on CSS, React and animation, plus paid courses. His free posts alone will level up your CSS intuition.

Bottom-up, atomic state that scales from one value to a whole app without ceremony. Lovely when state is granular — a different mental model than stores, in a good way.

Paste JSON and see it as an interactive graph — a fast way to understand a gnarly API response. Handy whenever nested JSON stops making sense in your head.

If CSS frustrates you, Kevin Powell is the antidote — clear, modern, free CSS teaching. The internet's de facto CSS teacher for a reason.

A timeline editor for hand-building CSS @keyframes, more powerful than preset pickers. Open it when you actually need custom keyframes.

An AI tool that learns your taste and generates combos you'll actually like, with contrast ratings. A fun way to escape the same five palettes.

A serverless platform with a genuine no-card free tier, including free Postgres. Worth watching after the Mistral acquisition — direction may tilt toward AI and inference.

One of the longest-running landing-page galleries, filterable by style and industry. Its themed collections make targeted reference hunting fast.

The big, batteries-included framework for chains and agents — powerful, but sometimes more abstraction than a simple app needs. Great when your pipeline is genuinely complex; overkill when it isn't.

Thousands of landing-page screenshots, free to browse, categorised and searchable. A big, no-paywall reference library for marketing pages.

Payments plus the tax-and-compliance headache handled for you, since they're the merchant of record. The indie-friendly way to sell digital products without becoming a tax expert; now owned by Stripe.

The smooth-scroll library on every award-winning site, and for good reason — silky, accessible, and it plays nicely with GSAP ScrollTrigger. My default for that buttery scroll feel.

Drop multiplayer presence, cursors and collaborative editing into an app without building the realtime backend. The shortcut to a Figma-style 'live' feel.

The framework built around getting your data into a model — indexing, retrieval, RAG. Reach for it when the hard part is your documents, not the prompt.

A friendly desktop app for running local models, with a built-in chat and an OpenAI-compatible server. The GUI counterpart to Ollama when you'd rather click than type.

Design-to-code that converts your Figma into responsive front-end components. Useful for a head start on handoff; you'll still refactor the output.

Smooth scroll with parallax baked in; v5 is now a layer on top of Lenis. Use it for the parallax helpers; otherwise reach for Lenis directly.

Watch a recording of exactly what the user did before the bug, with console and network alongside. Invaluable for reproducing the unreproducible.

Placeholder photos by URL — drop in a size and get a real image, no asset hunt. The fastest way to make a layout look populated while you build.

JSON animations a designer exports and you ship with one player — the standard for vector motion on web and apps. The format is open; LottieFiles is the platform around it.

Describe a full-stack app and get a deployed one with auth and a database wired up. The fastest prompt-to-product path — keep expectations realistic past the prototype.

The icon set I reach for by default — over a thousand consistent, tweakable icons with first-class React, Vue and Svelte packages. Open-source and ubiquitous, so AI tools already know it.

A free, fast, offline-capable design app with assets baked in. A genuine free alternative for UI design if Figma's pricing or cloud-only model bugs you.

Screenshot-to-UI and prompt-to-React with design-system constraints. A nice middle ground between v0 and a full app builder.

150+ animated React components designed to sit alongside shadcn/ui. Where you go for the flashy hero bits — use sparingly so it doesn't read as a template.

Zapier's more visual, more powerful cousin — branching, loops and logic on a canvas. Cheaper at volume and better for complex flows, with a steeper start.

A batteries-included SaaS kit with billing, teams and RBAC done for you, plus AI rules files in the box. Worth the license if you're shipping a real SaaS.

A huge, fully-free React kit with brilliant hooks — dark mode and a11y handled out of the box. My go-to when I want everything in one place with no paywall.

Google's generator for Material 3 themes with dynamic color and token export. Essential if you're building on Material; overkill if you're not.

The most complete React library if you want (or a client wants) Material Design. Comprehensive but opinionated — fighting its look takes real effort.

The canonical reference for HTML, CSS, JS and web APIs — accurate and exhaustive. When you need the real answer about how the platform works, it's here.

The open-source, headless commerce engine you customise in code — a Shopify alternative for developers. The pick when you need a bespoke store and want to own the stack; you host it.

The open-source answer to Algolia — fast, typo-tolerant, easy to self-host. The pick when you want great search without the Algolia bill.

WebGL mesh-gradient maker — drag color points into organic, modern backgrounds. The source of those soft multi-color hero gradients you keep seeing.

Heatmaps and session replay, genuinely free and unlimited, from Microsoft. Hard to argue with free — a no-cost way to watch how people use your site.

A tightly curated feed of minimal, restrained web design. The reference when 'less' is the brief.

The big collaborative whiteboard for workshops, planning and sticky-note chaos. Overkill for solo sketching; the default once a team needs to think together.

Strong open-weight models and a clean API, with a European data story some teams need. A credible, often cheaper alternative to the big two.

Free stock video, music and sound effects from Envato, no attribution. Strong for short background video loops.

Deep event-based product analytics for understanding funnels and retention. Strong for data-driven product teams; more than a brochure site needs.

Real production app screens organised into flows and patterns. The reference for how shipped products handle onboarding, paywalls and settings — serious use needs Pro.

Thousands of device, print and lifestyle scenes for inserting screenshots, with Figma plugins. Big library; the free tier is limited.

Not a tool but the standard — the USB-C for plugging agents into your tools and data. Learn it; it's quietly becoming infrastructure for everything agentic.

Google's web component to drop a 3D or AR model on a page with one tag. The simplest possible way to show a product in 3D, AR included.

The default for React animation: spring physics, layout animations and gestures with a clean declarative API. The core is free and open source; only the Motion+ extras cost money.

The developer's automation tool — self-host it, drop into code when you need to, and build AI agent workflows. The pick when Zapier feels too limited or too costly.

One of the nicest Vue 3 component libraries — complete, themeable, well-typed. A strong default if you're building with Vue.

Sub-1kB shared state that works across frameworks — the reason it's Astro's recommended store for islands. Perfect when you need a little shared state without a big library.

A whole gallery of just navbars — oddly specific, genuinely useful when you're stuck on yours. Proof there's an inspiration site for everything.

Postgres that branches like Git, which is oddly perfect for preview deployments. Reach for it when you want just the database, not the whole Supabase bundle.

Opinionated, Angular-flavoured structure for Node backends — modules, DI, the lot. Heavy for a small API, but a sane backbone for a large, team-built one.

Vercel's closest peer and a great default if you are not on Next.js. The built-in form handling alone saves you a backend for simple sites.

The default when you are building a real app, not a content site — server components and the app router are powerful once they click. Heavier and more opinionated than Astro; pick it when interactivity is the point.

Vercel's own open-source SaaS template — Next, Postgres, Drizzle, Stripe, auth, dashboard. A free, trustworthy skeleton to fork for your next product.

Next.js for the Vue world: file routing, SSR, auto-imports and a huge module ecosystem. If you like Vue, this is the obvious full-stack home.

A more powerful, more opinionated monorepo toolkit — generators, a project graph, distributed caching. Worth it for large multi-team repos; heavier than Turborepo for small ones.

The picker for OKLCH — the perceptual color space that makes consistent, accessible palettes far easier. Where modern CSS color is heading; worth learning now.

Run capable open models on your own machine with one command — no cloud, no bill. The easiest on-ramp to local AI for privacy, offline work and tinkering.

The go-to showcase for single-page sites and landing pages since forever. If you're building a one-pager, this is the reference.

Figma-like direct manipulation on top of a real React codebase, with edits written back to code. Promising for designers who want to touch the actual app.

A carefully-built open-source palette designed specifically for UI work. A safe, accessible set of colors when you don't want to invent your own.

The model API most apps reach for first — broad capabilities, great docs, a huge ecosystem. You pay per token with no real free tier, so mind the meter as you scale.

The leading open-source autonomous coding agent — delegate a task, watch it work in a sandbox. The free, self-hostable answer to Devin; bring your own model.

One API key, one bill, hundreds of models — switch providers without rewriting anything. The pragmatic way to stay model-agnostic, and some models are free.

Creative coding made friendly — draw, animate and play with generative graphics in a few lines. The staple of art-school sketches and generative experiments.

Like Lemon Squeezy but more enterprise — they handle global tax and act as merchant of record. A strong pick for SaaS selling worldwide that doesn't want the tax burden.

Recorded user flows from real apps — onboarding, checkout, cancellation — so you can see how the pros handle a flow. UX reference you can't get from screenshots alone.

The old-school RYB color-wheel designer with every harmony mode and a live preview. Dated UI, but still a precise way to reason about color theory.

A vector-graphics framework on Canvas with deep Bezier and boolean-path tools. The pick for illustration, diagram and path-heavy tools.

Styled presets on Ark UI + Panda CSS, multi-framework, now under the Chakra org. A good route to a consistent design system beyond React.

A free book on design, rendering and performance patterns for modern web apps. Strongest on architecture — the stuff tutorials skip.

A code-first, Next.js-native headless CMS that installs into your app with data in your own database. Increasingly the Next/TypeScript crowd's favourite CMS.

The open-source, self-hostable Figma alternative built on web standards. The pick if you want design freedom (or to escape lock-in) without a per-seat bill.

Free stock photos and video, no attribution, commercial-friendly (owned by Canva). Low-friction for mockups and hero imagery.

Thousands of icons across six weights, so you can match stroke to your type. Flexible and tasteful — my pick when Lucide's single weight isn't enough.

Photoshop in a browser tab, for free — and it opens PSDs. The clutch tool when you need to tweak an image and don't have (or want) Photoshop.

A managed vector database for similarity search and RAG over embeddings. The default when you're building AI features that retrieve by meaning; managed-only.

Automation for people who can code — drop JavaScript or Python between steps and hit any API. The middle ground between Zapier's simplicity and writing a whole backend.

Royalty-free images, video, vectors and even music under one permissive license. Broad coverage; quality is more variable than curated libraries.

One of the fastest 2D WebGL renderers on the web, used by Adobe and Disney. Reach for it when raw 2D rendering performance matters more than a full engine.

Serverless MySQL (and now Postgres) with Git-like schema branches. Powerful at scale, but the free Hobby tier is gone — it's paid from the start now.

Simple, privacy-first analytics that fit on one screen and need no cookie banner. The antidote to Google Analytics bloat; self-host it free or pay for the hosted version.

An open-source WebGL game engine with a collaborative browser editor. Strong for real-time 3D and games when you want a Unity-like workflow on the web.

Microsoft's end-to-end browser testing — reliable, fast, cross-browser, with great tooling. The serious choice for testing real user flows.

A fast, disk-efficient package manager with a strict, correct node_modules layout and great monorepo support. The quiet upgrade over npm you won't go back from.

An entire backend in one Go file — SQLite, auth, realtime, admin UI, REST API. Absurdly convenient for small apps and prototypes; you self-host it.

A developer-first merchant of record with a lovely API and entitlements like license keys and GitHub access. The fresh, indie-friendly take on monetizing software; check the per-sale fee.

Free, no-strings CC0 HDRIs, textures and models — the asset pantry for any 3D project. The quality is high and the license is as permissive as it gets.

Product analytics, session replay, feature flags and A/B tests in one open-source platform with a huge free tier. The pick when you want to understand behaviour, not just pageviews.

The heavyweight API platform — design, test, document, mock, collaborate. Powerful but cloud-account-heavy; some find it more than they need.

Transactional email obsessed with deliverability and speed, with separated streams. The pick when an email absolutely has to land in the inbox.

A big set of free Tailwind blocks and plugins with a Figma system. Reach for it when you want pre-built sections to assemble a page fast.

The opinionated formatter that ended style debates — run it on save and forget. Boring in the best way; just turn it on.

An enormous, enterprise-grade React component suite — if a component exists, PrimeReact probably has it. Heavier and less fashionable than shadcn, but unbeatable for breadth in admin-style apps.

The type-safe ORM that made database access pleasant in TypeScript, now with its own managed Postgres. Schema-first and ergonomic; some find the runtime heavier than Drizzle.

Resumability instead of hydration means near-zero JS on load. Genuinely novel and fast; the ecosystem is smaller, so weigh that against the performance win.

The accessibility and behaviour layer you don't want to write yourself. Bring your own styling — most people meet it through shadcn/ui without realising.

The slickest deploy UX around, with a great template ecosystem — deploy almost anything from Git. No always-free tier anymore: a trial credit, then a small monthly minimum.

Turn a code snippet into a pretty image for a post or slide, in seconds. The polished way to share code that isn't an ugly screenshot.

Adobe's accessibility-first hooks give full markup control and rock-solid ARIA. The serious choice when accessibility is non-negotiable and you'll style it yourself.

The React form library that's fast because it barely re-renders. The default for forms; pair it with Zod for validation and you're basically done.

Since v7 it's quietly a full-stack framework, not just routing — loaders, actions, SSR and all. The pragmatic home for what used to be Remix.

Spring-physics animation that feels alive and stays interruptible. Steeper than declarative libs, but the best at natural, gesture-driven motion — and it pairs with R3F.

Three.js as declarative React components — reactive, composable, the way to do 3D in a React app. If you know React, this is how 3D finally clicks.

Declarative 3D physics for R3F via the Rust Rapier engine. The current go-to for bouncing, colliding, falling things in a React scene.

A low-level primitive for mount/unmount transitions where you bring the CSS. Useful but legacy-feeling now; most reach for Motion or AutoAnimate instead.

Previews your palette and fonts on a real mock page instead of dead swatches — the only honest way to judge a scheme. I open this for every project.

The friendly default for React charts — composable components, sensible defaults, quick to wire up. Great for dashboards that need solid charts without a D3 deep-dive.

An AI image tool that, unusually, outputs editable vector and SVG — icons and illustrations, not just raster. Stands out for design-system-ready assets.

Redux without the boilerplate everyone used to complain about. Still the right call for large, complex apps that need strict, debuggable state; overkill for small ones.

Server-first React built for Cloudflare — Workers, D1, R2. Interesting if you're all-in on that platform; note the brand pivot away from the old GraphQL Redwood.

The book that teaches developers to design — practical, opinionated rules from the Tailwind folks. If your apps work but look off, this is the fastest fix; paid, worth it.

The web/SaaS counterpart to Mobbin — real product screenshots by page type and component. Brilliant for seeing how real apps do pricing, empty states and onboarding.

A headless React framework that eats CRUD apps alive — admin panels, dashboards, B2B back-office UI. If that's what you're building, it saves weeks.

The regex tester with a live explanation panel across every flavour. The reference I open whenever a regex misbehaves.

AI that generates wireframes and full site structures into Figma and Webflow, with a huge component library. A real accelerator for marketing-site design — opinionated, but fast.

Web-standards-first and a joy to learn — but in 2026 its v2 lives on inside React Router 7, so start there unless you're chasing the React-less Remix 3 preview.

A tidy, neutral icon set with matched line and solid variants. A dependable, free choice when Lucide isn't quite the vibe.

A clean PaaS for services, databases, cron and workers from Git — the friendly middle ground between Heroku and raw cloud. Free web services sleep, so budget for paid on anything real.

The easiest way to run thousands of open-source models — image, video, audio — behind one API without managing GPUs. Pay per run; great for adding a model feature without the infra.

Prompt an app into existence and it's already hosted with a database attached. Brilliant for idea-to-live-demo in the browser; you'll outgrow it for serious builds.

A developer-first email API from the React Email team, with a lovely DX. The default transactional email for indie and AI-built apps; React Email makes templates painless.

See your site at a dozen screen sizes side by side, scrolling in sync. A real time-saver when you're chasing responsive bugs.

The fastest way to build a real internal tool — drag components, wire them to your database and APIs. A genuine time-saver for admin panels; per-user pricing adds up.

Interactive animation with state machines, so a button can react instead of just loop. The editor's freemium, but the runtimes are free — a step beyond Lottie when motion needs logic.

Community-curated, clickable developer roadmaps for every role. The map to orient yourself when you don't know what to learn next.

A free, browsable catalog of real SaaS landing pages by industry and style. Complements Saaspo as a no-cost reference of shipped marketing sites.

SaaS UI examples down to the component — pricing tables, modals, dashboards from real apps. Strong for assembling specific SaaS UI references.

A hand-curated archive of SaaS landing pages, filterable by hero style and even color palette. Unusually granular when you want SaaS marketing references.

A headless CMS with a real-time content store and a fully customisable React Studio, queried with GROQ. Flexible enough for structured content that rigid CMSes choke on.

Interactive courses where you can pause and edit the instructor's code in the browser. A genuinely different, hands-on way to learn front-end; real free tier.

Dead-simple scroll-reveal animations. Note the license — GPL for open use, paid if you need to keep your source closed.

The default for knowing when your app breaks and exactly why — stack traces, releases, performance. Wire it up on day one; the free tier covers a lot.

The default answer for good-looking React UI right now. You copy the code into your repo instead of installing a black box — which is exactly the model AI tools work best with.

Marketing and app sections built on shadcn/ui you can paste in. Handy if you've standardised on shadcn and want pre-made blocks; mostly a paid library.

The hub where shader artists write and share GLSL in the browser. The best place to learn by reverse-engineering jaw-dropping community shaders.

Generates the soft, layered box-shadows that actually look real, instead of one harsh blur. A tiny tool that instantly makes cards look more designed.

A paid Next.js boilerplate built for solo founders to launch in a weekend. Pure speed — you're buying time, not magic.

The default for a serious online store — hosted, reliable, endless apps. Overkill if you're selling one digital thing; the right call once you're running a real shop.

Drop a screenshot into a device or 3D mockup, even animated, right in the browser. Handy for social posts and landing-page hero shots.

Brand and logo icons (the ones you're not allowed to redraw) in clean SVG, free. The place to grab that GitHub or Stripe glyph for a footer.

A long-running, tastefully curated web design gallery. A calmer, more design-led browse than the award sites.

A Tailwind-based toolkit purpose-built for Svelte. The pick when you want a cohesive component layer in the SvelteKit world.

The Mac-native original that shaped UI design. Still capable, but Figma's collaboration and reach made it a niche choice — paid, Mac only.

The YouTube of 3D models — where to find, preview and download assets for a web scene. A huge free library if you don't want to model it yourself.

A long-standing publication for designers and developers — front-end, UX, accessibility. Reliable, in-depth articles and a good newsletter.

Bolt a real cart and checkout onto any static or custom site with a snippet. The pick when you want e-commerce on a site you built yourself, not a whole platform.

The fast way to turn an Airtable base into a real portal or internal tool. Brilliant for MVPs and back-office apps; you stay inside its building blocks.

Solid's meta-framework — React-like ergonomics with fine-grained reactivity and tiny JS. Worth it when bundle size and runtime speed really matter.

The toast component everyone copies — buttery stacking animation, one import. shadcn made it the default for a reason; just use it.

Code-search-grounded answers across an org's repos, now an enterprise product. Solid for big teams; solo devs get pointed elsewhere.

Design interactive 3D in the browser with no WebGL knowledge, then embed it. The fastest way for designers to get real 3D on a site — watch the export limits on the free tier.

Splits text into spans so you can animate per letter or word — the basis of a lot of fancy heading reveals. Pair it with CSS or GSAP and go wild.

Strong when you sell both online and in person — the same system runs your web checkout and the card reader. Less of a developer darling than Stripe, but unbeatable for physical retail.

Compress and convert images in the browser with a live before/after — no app, no upload. The quick fix for that 4MB hero photo killing your load time.

Full Node dev environments in the browser via WebContainers — no local setup. Brilliant for reproductions, demos and trying a framework instantly.

Google's free, AI-native design canvas — prompt a UI and get a design plus code. A genuine free contender in the prompt-to-UI space, evolving fast.

Build and document components in isolation, away from your app — the standard for a real component library or design system. Some setup, big payoff for teams.

Customisable, animatable illustrations in several distinct styles. Rare for a free library, you can edit and export them as animations.

The popular open-source, self-hostable headless CMS — auto-generated REST/GraphQL and a customisable admin. No per-editor seat cost when you run it yourself.

The gold standard for taking payments in code — superb docs, APIs and dashboard. Free to integrate; they take a cut per transaction. If you're charging money, you'll probably start here.

Design in real React components and export clean Tailwind — control without leaving the component model. Its MCP server lets agents use your design system too.

The fastest way to get a real database, auth and APIs without running a backend — and it is just Postgres underneath, so you are not locked into something proprietary. My default backend for AI-built apps.

Publish a static site from the terminal with one command. Minimalist and still kicking — handy for quick throwaway deploys.

The official Svelte framework, and the most pleasant DX of the bunch — it compiles the framework away for tiny bundles. My pick when I want less ceremony than React.

A search engine for hundreds of thousands of free SVGs with per-asset licenses. The fallback when the icon you need isn't in any single named set.

No-code, timeline-based SVG animation with export to CSS/JS or Lottie. For designers who want animated SVGs without hand-coding them.

Drop in an SVG and watch it shed bloat — the friendly UI for SVGO. A two-second habit that keeps your icons and illustrations lean.

The carousel that just works across frameworks, with real touch feel. Reach for it instead of hand-rolling a slider; the core is free.

A lighter take on server-state from Vercel — fetch, cache and revalidate with one hook. Simpler than TanStack Query; pick it when you don't need the heavier feature set.

Thousands of consistent outline icons, fully free with no premium tier. A great free alternative when you want breadth on a 24px grid.

The enterprise-privacy pick — self-host or air-gap it and keep your code in-house. You pay for control, not for being the smartest model in the room.

The lingua franca that AI tools are fluent in — generated UI almost always comes out as Tailwind, so knowing it pays off immediately. Polarising, but it is the path of least resistance with agents.

The Tailwind team's own premium components and templates. Paid, but the quality and patterns are a masterclass worth owning.

Forms that don't feel like a tax — free, unlimited, and pleasant to build. My default when I just need a form and don't want to think about it.

A newer, fully-typed, framework-agnostic form library from the TanStack crew. Worth a look if you want first-class types and aren't wedded to React Hook Form.

The library that ended hand-rolled fetch-and-cache logic — caching, refetching and mutations handled. If you fetch server data in React, you want this; it deletes whole categories of bugs.

Type-safe, client-first React on Vite from the TanStack folks, now at 1.0. A strong choice if you already love TanStack Router and Query.

Headless tables done right — sorting, filtering, pagination, virtualization, and you bring the markup. The answer when a data grid outgrows a plain table and you want full styling control.

Build a desktop app with your web stack, but tiny and fast thanks to a Rust core and the OS webview — the lightweight Electron alternative. Reach for it when size and memory matter.

A visual builder that exports reasonably clean code across frameworks. A middle path between design tool and code editor.

The free, interactive book that demystifies GLSL fragment shaders step by step. The canonical starting point if shaders intimidate you.

A free, project-based full-stack curriculum that throws you into building. Demanding and self-directed — the best free path if you'll actually do the work.

A real timeline and graph editor in the browser for sequencing UI, DOM and 3D animation. Brings motion-designer tooling to code; integrates tightly with R3F.

The library that put 3D in the browser and still the standard — almost every web 3D effect you admire is built on it. Steep, but the ecosystem and docs are enormous.

Widely considered the definitive way to learn Three.js, beginner to advanced. Paid, but a one-time buy with lifetime access — worth it if 3D is your path.

Open-source Tailwind palette generator with OKLCH output and a fetchable API. Cleaner, more perceptual scales than the eyeballed approach.

An infinite canvas that's a joy for diagrams and a fantastic SDK to build canvas apps on. Free to use, and increasingly the base for AI canvas experiments.

A broad, affordable home for open-model inference and fine-tuning. A solid pick when you want open models at scale without running your own GPUs.

The place to actually get good at TypeScript — sharp, practical, with a lot of free material. If TS types still feel like wrestling, start here.

Paste anything — JSON, a type, an object — and convert it between formats instantly. The Swiss-army knife for 'turn this into that' chores.

Copy-paste React components for charts and dashboards, now part of Vercel. The fastest way to a decent analytics UI without wrestling a charting lib.

Background jobs and long-running tasks that don't time out, written as code in your own repo. The fix for 'this needs to run for five minutes' on serverless.

A visual editor for R3F scenes where edits write back to your JSX. Promising for building 3D without living in code; runs standalone or in VS Code.

Call your backend like a typed function — change the API and the frontend types update instantly, no codegen. Magic in a full-stack TypeScript monorepo; it ties both ends to TypeScript.

Makes monorepo builds fast by caching everything it can, locally and in CI. The pick when your repo grows several packages and builds start to drag.

SQLite at the edge via libSQL, built for many small databases — per-tenant, per-agent. A fresh take on serverless data; great fit for multi-tenant and AI apps.

CSS-first Tailwind v4 animation utilities — the successor shadcn/ui ships by default. If you're on Tailwind v4, this replaces the old tailwindcss-animate plugin.

A clean 2D drawing API that renders to canvas, SVG or WebGL from one codebase. Nice when you want shapes and motion without committing to a renderer.

The typewriter effect in a tiny package — that 'we build ___' rotating headline you've seen everywhere. One job, done well.

Where to learn what good web typography looks like — real sites, the fonts they use, and pairings that work. The fastest way to level up your type eye.

Generates full Tailwind 50–950 scales from one color, ready to paste into your config. Indispensable if you theme with Tailwind.

A big, browsable library of ready-made gradients with copy-paste CSS. The quick grab when you need a nice gradient and don't want to fiddle.

Sketch or describe an interface and get an editable mockup — fast ideation for non-designers. Good for early concepts, not production design.

Lightweight, privacy-friendly analytics you can self-host for free. A great Plausible alternative when you want to run it yourself at zero cost.

Open-source illustrations you recolor to your brand before downloading. Consistent flat style and zero attribution — the dependable default for spot illustrations.

The default source for placeholder and hero photography that doesn't look like stock. Everyone uses it, so the popular shots are recognisable — dig past page one to stand out.

File uploads for TypeScript apps without wrestling S3 directly — typed, simple, Next-friendly. The 'just let me accept a file' button for indie builders.

Serverless Redis and a vector database over HTTP, billed per request — perfect for spiky edge workloads. Reach for it when you need a cache or queue without running one.

Fastest way to go from a sentence to a decent-looking React component. Treat the output as a starting point, not a finished product — it leans generic if you don't push it.

Zod's featherweight rival — same idea, a fraction of the bundle thanks to a modular design. Reach for it when client bundle size really matters.

Mutate state like a plain object and components just re-render — proxy magic from the pmndrs crew. Delightfully simple when the store model fits your head.

Animated WebGL backgrounds you configure on the site and drop in. The quick route to that subtle moving hero background — just don't overdo it.

The drawer component for mobile, built on Radix Dialog with snap points. The answer when a dialog should slide up from the bottom on phones.

The smoothest path from git push to a live URL, with a preview on every PR. The free Hobby tier is generous for personal projects — just watch the bandwidth and usage limits as you grow.

Makes streaming, tool calls and swapping models a one-liner. If you're building AI features in React or Next, this is the layer to start from — free and open source.

Zero-config analytics if you already deploy on Vercel — privacy-friendly, no extra script to babysit. Convenient, though tied to the platform.

Un-opinionated SSR/SSG on Vite that works with React, Vue or Solid. Reach for it when you want to assemble your own stack rather than adopt conventions.

The fast build tool and dev server under most modern frameworks, and the React team's CRA replacement. If you're starting a frontend project, you're probably already using it.

A fast, Vite-native test runner with a Jest-compatible API. The default for testing modern frontend projects; instant, ESM-friendly, near-zero config to start.

The big, batteries-included Material library for Vue. Comprehensive and mature; you're buying into the Material look.

A modern terminal with built-in AI agents for generating commands and running workflows. A genuinely nicer terminal — the AI is a bonus, the UX is the draw.

Describe your app's auth, routes and data in a short config and Wasp generates the full-stack React/Node plumbing. A genuinely fast way to start a real app.

Google's guidance on performance, accessibility and modern browser features, with solid courses. Great for best practices and Core Web Vitals; remember the Chrome-team lens.

The no-nonsense WCAG contrast checker you bookmark forever. Paste two colors, get a pass/fail — done.

The most powerful visual web builder — pixel control, a real CMS, decent output. The pick for marketing sites when designers want to ship without a dev; it gets pricey and has a learning curve.

The fastest way to wireframe a flow or map an idea — clean, quick, and not precious. Great for the thinking that happens before high-fidelity design.

A polished Cursor rival with a genuinely strong agent and a usable free tier. Worth a look — though its identity is in flux after the Cognition acquisition.

State machines for when your UI logic has real states — loading, error, retrying — and you're tired of boolean soup. A learning curve, but it makes impossible states impossible.

The free book series that explains how JavaScript really works under the hood. Dense, but the cure for 'it works and I don't know why'.

The original glue between apps — connect thousands of tools with no code. Unbeatable breadth; it gets expensive as your task volume grows.

Playful, flat-shaded pseudo-3D — round, friendly shapes without the WebGL weight. Perfect for charming little 3D logos and illustrations.

Blisteringly fast, with AI built in rather than bolted on. If Cursor's Electron weight bothers you, this is the performance answer — and it's open source.

Define a schema once, get runtime validation and a TypeScript type for free. It's everywhere for a reason — forms, API inputs, env vars. The content schema in this very site is Zod.

The state library that finally feels right — tiny, no boilerplate, no context gymnastics. My default for React state; reach for it before you reach for Redux.