awesome-web-development
github.com/nepaul/awesome-web-development βπ§‘ A curated list of awesome web development resources.
Use this list with your AI agent
Add the Context Awesome MCP server to Claude, Cursor, or any MCP client, then ask:
"Show me out-of-box ui solution resources from awesome-web-development"
Installation instructions βWhat's inside
Tools
- :+1::+1::+1:Emmet - the essential toolkit for web-developers
the essential toolkit for web-developers
- :+1:json-server Mock Get a full fake REST API with zero coding in less than 30 seconds (seriously)
- API Blueprint is simple and accessible to everybody involved in the API lifecycle. Its syntax is concise yet expressive. With API Blueprint you can quickly design and prototype APIs to be created or document and test already deployed mission-critical APIs.APIs & Mock
- BrowserStack - Instant access to all real mobile and desktop browsers. Say goodbye to your lab of devices and virtual machines.
Instant access to all real mobile and desktop browsers. Say goodbye to your lab of devices and virtual machines.
- CodeTour πΊοΈIDE
CodeTour is a Visual Studio Code extension, which allows you to record and play back guided walkthroughs of your codebases. It's like a table of contents, that can make it easier to onboard (or re-board!) to a new project/feature area, visualize bug reports, or understand the context of a code review/PR change. A "code tour" is simply a series of interactive steps, each of which are associated with a specific directory, or file/line, and include a description of the respective code. This allows developers to clone a repo, and then immediately start learning it, without needing to refer to a CONTRIBUTING.md file and/or rely on help from others. Tours can either be checked into a repo, to enable sharing with other contributors, or exported to a "tour file", which allows anyone to replay the same tour, without having to clone any code to do it!
- docsify: A magical documentation site generator.Docs
Editor
- Ace - A standalone code editor written in JavaScript
A standalone code editor written in JavaScript
- Backlight
- ckeditor: Smart WYSIWYG HTML editor
- CodeMirror
- draft.js - A framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences
A framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences
- Editor.js Next generation block styled editor. Free. Use for pleasure.
Open Source Apps
- AFFiNE
The Next-Gen Knowledge Base to Replace Notion & Miro.
- chalk.ist
Create beautiful images of your source code
- Fakeflix
- jsonvisio.com
JSON Visio is a tool that generates graph diagrams from JSON objects. These diagrams are much easier to navigate than the textual format and to make it even more convenient, the tool also allows you to search the nodes. Additionally, the generated diagrams can also be downloaded or clipboard as image.
- Lepton is a lean code snippet manager powered by GitHub Gist.
- MarkText - Next generation markdown editor
Next generation markdown editor
Touch
- AlloyFinger - super tiny size multi-touch gestures library for the web
super tiny size multi-touch gestures library for the web
Notification
Animations
- animate.css - A cross-browser library of CSS animations. As easy to use as an easy thing
A cross-browser library of CSS animations. As easy to use as an easy thing
- π π anime.js - JavaScript Animation Engine
JavaScript Animation Engine
- countUp.js: Animates a numerical value by counting to it
- cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by CSS with minimal markup. Completely open source and MIT licensed.
- css-loaders - A collection of loading spinners animated with CSS
A collection of loading spinners animated with CSS
- dynamics.js: Dynamics.js is a JavaScript library to create physics-based animations
Modal
- animatedModal.js :strong:Beautiful! - A jQuery plugin to create a fullscreen modal with CSS3 transitions
A jQuery plugin to create a fullscreen modal with CSS3 transitions
Images
- Anime.js (/ΛΓ¦n.Ι.meΙͺ/) is a lightweight JavaScript animation library with a simple, yet powerful API.It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
- BigScreen - A simple library for using the JavaScript Fullscreen API
A simple library for using the JavaScript Fullscreen API
- commitlintStatic Code Checking(Lint)
Lint commit messages:
- fancyBox - A tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages
A tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages
- google-guetzli: Guetzli is a JPEG encoder that aims for excellent compression density at high visual quality. Guetzli-generated images are typically 20-30% smaller than images of equivalent quality generated by libjpeg. Guetzli generates only sequential (nonprogressive) JPEGs due to faster decompression speeds they offer.Compression
- π graphicsmagick - is the swiss army knife of image processing. Comprised of 267K physical lines of source code in the base package (or 1,225K including 3rd party libraries) it provides a robust and efficient collection of tools and libraries which support reading, writing, and manipulating an image in over 88 major formats including important formats like DPX, GIF, JPEG, JPEG-2000, PNG, PDF, PNM, and TIFF.
is the swiss army knife of image processing. Comprised of 267K physical lines of source code in the base package (or 1,225K including 3rd party libraries) it provides a robust and efficient collection of tools and libraries which support reading, writing, and manipulating an image in over 88 major formats including important formats like DPX, GIF, JPEG, JPEG-2000, PNG, PDF, PNM, and TIFF.
Showing a sample of 332 resources. View the full list on GitHub β