HTML Recipes

HTML Recipes is an open-source collection of copy-paste HTML snippets for common web scenarios, built with Eleventy and maintained on GitHub.

What is HTML Recipes?

HTML Recipes is a collection of quick copy HTML snippets that address a variety of common scenarios. Each snippet is raw HTML meant to be copied directly into a project. The project is hosted as a GitHub repository with 137 stars, and the site is generated with the Eleventy static site generator. It was created by @5t3ph, and the repository welcomes community contributions through a contributing guide.

Key Features

• Copy-ready snippets — Each entry provides raw HTML that can be pasted directly into a page without a build step.
• Built with Eleventy — The snippet browser is generated as a static site using the Eleventy (11ty) static site generator.
• Open-source and free — The entire collection is publicly available on GitHub, and anyone can use or modify it.
• Community contributions — Contributors can add new snippets by following the process in the CONTRIBUTING.md file.
• Focused on HTML — The snippets are pure markup and can be paired with any CSS framework or plain CSS.
• Variety of scenarios — The collection covers common web design patterns suitable for many page types.

Who is it for?

• Front-end developers — They can grab tested HTML patterns instead of writing markup from scratch for common components.
• Web designers — They can use the snippets as a starting point for building out page sections during prototyping.
• Eleventy users — Since the project itself is an Eleventy site, developers using 11ty can study its source code and also use the snippets.
• Developers learning HTML — The snippets provide clean examples to reference when learning how to structure typical page elements.

What can you do with HTML Recipes?

• Rapid prototyping: Copy a snippet into a mockup to quickly add a common UI element without writing code from memory.
• Learning HTML structure: Examine the markup of each snippet to see how common layout chunks are typically written.
• Contributing snippets: Submit your own useful HTML snippets to the collection, following the repository's contribution guidelines.