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.
