Patterns.dev
Patterns.dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.
About Patterns.dev
Patterns.dev is a free online resource covering design, rendering, and performance patterns for building web applications with vanilla JavaScript or modern frameworks. Content is organized into sections for JavaScript/Node.js patterns (such as Singleton, Proxy, Observer, Module, and Factory patterns), React and Next.js patterns (including HOC, Render Props, Hooks, Server-side Rendering, and React Server Components), and Vue patterns (including Composables, Provide/Inject, and Renderless Components). It also covers loading and performance optimization techniques such as code splitting, tree shaking, preloading, prefetching, and list virtualization.
The site presents patterns as descriptive references rather than prescriptive rules, framing itself as a catalog for awareness rather than a checklist of requirements to follow. Content is available to read online or download as an eBook or PDF, and includes practical examples on CodeSandbox and visual animations.
Patterns.dev is aimed at web developers working with vanilla JavaScript, React, Next.js, or Vue who want reference material on architectural patterns and performance optimization for building and scaling web applications.
Key features
- Free online catalog of JavaScript, React, Next.js, and Vue design patterns
- Covers rendering patterns like SSR, SSG, ISR, and React Server Components
- Web performance patterns including code splitting, tree shaking, and preload/prefetch
- Practical examples on CodeSandbox with visual animations
- Downloadable eBook or PDF, plus a free online read
Frequently asked questions
Is Patterns.dev free?
Yes, Patterns.dev is a free online resource, and the content is also available as a downloadable eBook or PDF.
What frameworks and languages does it cover?
It covers vanilla JavaScript and Node.js as well as framework-specific patterns for React, Next.js, and Vue.js.
Who is Patterns.dev for?
It is for developers who want to improve how they architect web apps using established design, rendering, and performance patterns.
Does it include practical examples, not just theory?
Yes, it offers practical examples on CodeSandbox and visual animations to help explain the patterns.
Show your product to thousands of developers
· 100k monthly pageviews
· 7k newsletter subscribers
You might also like
LinkedIn Learning
Learn/ProgrammingLearn business, creative, and technology skills to achieve your personal and professional goals. Join LinkedIn Learning today to get access to thousands of courses.
Mastery Games
Learn/ProgrammingLearn frontend development through play, repetition, and sleep. Each game builds up your skills from the ground up using the educational process of scaffolding. You learn one new concept at a time, and leverage spaced repetition to solidify each concept.
Nextradar
Learn/ProgrammingNavigate the Next.js Ecosystem with ease. Stay up to date with the latest Next.js tools and resources.
Pluralsight
Learn/ProgrammingBuild your IT toolkit with the skills you need to excel in your job, including security best practices, server infrastructure and virtualization. Explore our IT courses now.
PracHub
Interview/Learn/Code ChallengePractice 8,500+ real tech-interview questions from 400+ top companies — coding, SQL, ML, and system design — in an in-browser console with AI-assisted hints.
Programiz
Learn/ProgrammingLearn to code in Python, C/C++, Java, and other popular programming languages with our easy to follow tutorials, examples, online compiler and references.
