Design Pattern Reference
Browse, search, and learn all 23 GoF design patterns with interactive TypeScript examples.
About This Tool
The Design Pattern Reference is a comprehensive, browser-based tool that covers all 23 Gang of Four (GoF) design patterns organized into three categories: Creational, Structural, and Behavioral. Each pattern includes a clear intent statement, problem and solution descriptions, a complete TypeScript code example, an ASCII-art UML diagram, usage guidelines, pros and cons, and relationships to other patterns.
Design patterns are proven solutions to recurring software design problems. First catalogued by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides in their seminal 1994 book Design Patterns: Elements of Reusable Object-Oriented Software, these 23 patterns remain foundational knowledge for software engineers working in any object-oriented language.
All processing happens entirely in your browser. No data is sent to any server, and the tool works offline once loaded. This makes it a fast, private reference you can use during coding sessions, code reviews, or interview preparation without any signup or installation.
The patterns are searchable by name, intent, or category, making it easy to find the right pattern for your use case. Code examples are written in TypeScript and can be copied with a single click, ready to paste into your projects or adapt for your specific needs. The ASCII diagrams provide a quick visual overview of each pattern's structure without requiring external UML tools.
Whether you are studying for a technical interview, refactoring legacy code, or designing a new system from scratch, this reference provides the essential information you need to apply design patterns effectively. You can also explore related patterns to understand how they complement or substitute for each other in different scenarios.
How to Use
- Browse the pattern grid to see all 23 patterns organized by category (Creational, Structural, Behavioral).
- Use the search bar to find patterns by name, intent, or category keyword.
- Click a category filter button to show only Creational, Structural, or Behavioral patterns.
- Click any pattern card to view its detailed information including intent, problem, and solution.
- Switch between the Code Example, Diagram, and Details tabs to explore different aspects of the pattern.
- Click Copy on the code example to copy the TypeScript code to your clipboard, or use Ctrl+Shift+C.
- In the Details tab, click any related pattern badge to navigate directly to that pattern.
- Press Escape to return to the pattern grid from a detail view.
Popular Design Pattern Examples
FAQ
Is my data safe when using this tool?
Yes. This is a purely client-side reference tool. No data is sent to any server. All pattern data is bundled into the page and rendered in your browser. There is no user input that leaves your device.
What are the Gang of Four (GoF) design patterns?
The Gang of Four design patterns are 23 classic software design patterns catalogued in the 1994 book 'Design Patterns: Elements of Reusable Object-Oriented Software' by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides. They are divided into three categories: Creational (5 patterns about object creation), Structural (7 patterns about object composition), and Behavioral (11 patterns about object interaction and responsibility).
Why are the code examples in TypeScript?
TypeScript provides clear type annotations that make the pattern structures explicit and easy to understand. The examples are straightforward enough to be adapted to JavaScript, Java, C#, Python, or any other object-oriented language. TypeScript's interface and class syntax closely matches the UML-style descriptions in the original GoF book.
How do I choose the right design pattern?
Start by identifying the problem you are facing: Is it about object creation (Creational), organizing classes (Structural), or managing object behavior and communication (Behavioral)? Then read the intent and problem descriptions for patterns in that category. The 'When to Use' section in each pattern's Details tab provides specific scenarios. Related patterns can also guide you to alternatives.
Can I use these patterns in functional programming?
Many GoF patterns were designed for object-oriented programming, but their underlying principles apply broadly. Some patterns like Strategy, Observer, and Iterator map directly to functional concepts (higher-order functions, reactive streams, generators). Others like Singleton or Template Method are less relevant in purely functional codebases.
Are these patterns still relevant in modern development?
Yes. While frameworks and languages have evolved to provide built-in support for some patterns (e.g., dependency injection frameworks implement Factory patterns, React hooks use Observer-like patterns), understanding the underlying design principles remains essential for writing maintainable, extensible software. The patterns provide a shared vocabulary for discussing architecture decisions with other developers.
What do the ASCII diagrams represent?
The ASCII diagrams are simplified UML class diagrams showing the key classes, interfaces, and relationships in each pattern. Boxes represent classes or interfaces, arrows show inheritance or composition relationships, and labels describe the roles each class plays. They provide a quick structural overview without needing external UML tools.