web-design
Layrr is the visual editor for real code. Design visually, edit any stack, own everything. A browser coding agent interface for selecting elements and sending instructions directly to Claude Code.
Wirebrowser is a debugging, interception, and memory-inspection toolkit powered by the Chrome DevTools Protocol (CDP). It unifies network manipulation, API testing, automation scripting, and deep JavaScript memory inspection into one interface. With features like Breakpoint-Driven Heap Search and real-time Live Object Search, Wirebrowser provides researchers and engineers with precise, high-visibility tools for client-side analysis, reverse engineering, and complex application debugging.
CSS voxel engine for the DOM.
A CSS voxel engine. A 3D grid for the DOM. Renders HTML cuboids by stacking CSS grid layers and applying transforms.
Supports colors and textures, interactions and culling, plus shapes, areas and projections. All without </canvas>.
Fix Unreadable Colors in Python. Make your text readable for everyone.
CM-Colors automatically fixes your colors so they are easy to read. It finds similar colors that work for everyone, so you don't have to guess.
Related contents:
Type-safe Composable CSS.
From simple UI styles to full Design Systems, write code using Styleframe’s powerful TypeScript CSS API — AI-ready by design. Write type-safe, composable, future-proof Design Systems code using styleframe's powerful TypeScript CSS API.
A design system for building retro Apple-inspired interfaces.
System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.
Related contents:
Explore color as we see it. OKLCH Color Picker, Generator and Converter.
Discover how the OKLCH color model works. Learn, experiment and create more consistent and perceptually uniform color palettes.
The current sky at your approximate location, rendered as a CSS gradient.
Exploring how to present Web platform features adoptability.
Baseline gives you clear information about which web platform features work across our core browser set today. When reading an article, or choosing a library for your project, if the features used are all part of Baseline, you can trust the level of browser compatibility. By aligning with Baseline, there should be fewer surprises when testing your site.
Related contents:
Beautiful spoiler effects
Framework-agnostic web component with Telegram-inspired particle animations. Drop it into React, Vue, Svelte, or vanilla JavaScript in seconds.
Pronounced "Alix".
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
CSS files are available in French, English, Spanish, Greek, Arabic, Portuguese, Russian, Chinese, Polish and Dutch — and leveled or full.
Related contents:
Create Beautiful Themes for shadcn/ui.
Shadcn Themer is a web application that lets you to create, customize, and share themes for shadcn/ui
Advanced Open Source Website Builder.
Open source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports all CSS properties, and can be hosted anywhere, including with us.
Webstudio is an Open Source Visual Development Platform for developers, designers, and cross-functional teams. You own the data, components, and infrastructure. You can use the hosted version or roll out your own.
Related contents:
Useful CSS custom functions using the new @function rule
Design tools and tips for developers in a hurry.
✨😂 2000+ ways to add design flair, user delight, and whimsy to your product.
Related contents:
Beautiful typographic defaults for HTML you don't control.
The official Tailwind CSS Typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.
Related contents:
loadmo.re is Kim Lê Boutin's personal selection of unconventional web references. It collects distinctive mobile experiences as a living archive for design inspiration. To keep up with updates, follow us on Instagram.
Braid aims to make cross-brand UI development as fast as possible while maintaining a high level of quality and accessibility. In order to achieve this, Braid provides as a set of React components and CSS variable-based styling themes using vanilla-extract.
Related contents:
Create beautiful, customizable themes for your Nuxt UI components. Define your own colors and customize all variants to your liking.
Related contents:
The Braid Design System believes UI (User Interface) components should not provide surrounding white space. For example, a list item having a margin below it to add a gap between itself and the next item. This margin breaks component encapsulation, making it harder to use. A well-built component should not affect anything outside itself.
Related contents:
chrome-devtools-mcp lets your coding agent (such as Gemini, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.
Related contents:
React component library for vintage icons from classic games, software and operating systems.
A comprehensive React component library featuring over 2,300 classic icons from vintage operating systems and software. Includes iconic designs from Windows 95, 98, XP, Vista, 7, classic games, and retro applications. Perfect for retro-themed applications, nostalgic UIs, and preserving digital history.
Create Distorted & Zalgo Text Effects. Transform Text into Digital Art
Create stunning glitch effects, zalgo text, and corrupted fonts instantly. Perfect for social media, gaming, and creative projects.
Fully customizable AI chatbot component for your website.
Deep Chat is a fully customizable AI chat component that can be injected into your website with just one line of code. Whether you want to create a chatbot that leverages popular APIs such as ChatGPT or connect to your own custom service, this component can do it all!
Design with AI. Transform ideas into UI designs for mobile and web applications.
Related contents:
the elegant TypeScript UI framework.
Ripple is a TypeScript UI framework that takes the best parts of React, Solid and Svelte and combines them into one package.
LocalSite is a 100% local web development platform powered by Ollama. Generate modern, responsive websites using AI models running directly on your machine.
Related contents:
The definitive tree component for the Web.
Super-easy integration of complex tree components into React. Supports ordered and unordered drag-and-drop, extensive keybindings, search, renaming and more. Fully customizable and accessible. Headless Tree is the official successor for React Complex Tree.
What's the best JavaScript minifier?
🏃♂️🏃♀️🏃 JS minification benchmarks: babel-minify, esbuild, terser, uglify-js, swc, google closure compiler, tdewolff/minify, oxc-minify
Beautiful, fast and modern React UI Library.
Make beautiful websites regardless of your design experience. Beautiful, fast and modern React UI library for building accessible and customizable web applications.
Related contents:
Style your webpage like Edward Tufte’s handouts.
Edward Tufte uses a distinctive style in his handouts: simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts. tufte-css brings that style to HTML documents.
Different Dynamic Typing SVG Generator—multi-line & blank-space formatting, multiple cursor styles, customizable delete speed, and more.
Related contents:
Context-aware web performance for everyone.
Obs.js uses the Navigator and Battery APIs to get contextual information about your users’ connection strength and battery status. You can use this data to adapt your site/app to their environment, or beacon the data off to an analytics endpoint.
Related contents:
Open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS, and Motion. Pairs beautifully with shadcn/ui.
The Markdown Editor That's a Textarea.
A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~45KB minified with all features.
View the source of this page for an example of how to implement a lightweight preview image for YouTube videos that is resilient to image load failures. There is no iframe on this page at load time. The iframe is only created when the user clicks the preview.
Related contents:
The Developer-First Cookie Banner
c15t is an open source framework for managing cookies, consent, and privacy compliance. Built for modern web apps. It’s fully customizable, framework-agnostic, and designed to give developers full control over the user experience without black-box logic or vendor lock-in.
c15t (consent management) unifies analytics, consent tracking, and privacy controls into a single performant solution. Built for modern development teams, it transforms privacy management from a compliance burden into a fully observable system.
Zero-runtime Stylesheets-in-TypeScript.
Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.
Related contents:
Prebuilt UI blocks to ship beautiful MVPs fast.
Copy-paste beautiful, responsive components without worrying about styling or animations. Build faster, launch sooner.
MVPBlocks is an open-source component library for developers to copy, customize, and launch MVPs lightning-fast—no installations, just pure productivity.
A custom registry of composable, accessible and open source shadcn/ui components.
Community-Powered Animation Magic. Get your animations easily done with only Tailwind CSS classes.
Hundreds of ready-to-play sound effects for your React applications Add delight to your UI with just a few lines of code
Critical CSS refers to the minimal set of CSS rules required to render the visible portion of a webpage (above the fold). By extracting and inlining this CSS into your HTML, the browser can render content faster without waiting to load all stylesheets, improving performance and Core Web Vitals like First Contentful Paint (FCP).
Hello, and welcome to CSS Hell, where you will be subjected to 15 unimaginably torturous CSS puzzles. "What did I do to deserve this?", you ask. But you know perfectly well: you blashpemized Cascading Style Sheets. I saw that time your friends were complaining about CSS and you piled on with "CSS isn't even a real programming language"
Build the 2D and 3D Web Without Coding. Your visual workspace for React / Three Fiber.
Triplex is your visual workspace for building React / Three Fiber components. Build 2D and 3D components without coding using its visual and input controls. Jump down to code when you need to.
Related contents:
Tailwind CSS grid generator is a tool that helps developers create custom Tailwind grid layouts more easily. The generator allows users to specify the number of columns, rows, the gutter size, the DIV width (span).
Related contents:
Theme Editor & Generator. A visual no-code theme editor for shadcn/ui components.
tweakcn is a powerful Visual Theme Editor for tailwind CSS & shadcn/ui components. It comes with Beautiful theme presets to get started, while aiming to offer advanced customisation for each aspect of your UI
AMP is a web component framework to easily create user-first experiences for the web.
Related contents:
Test and preview fonts.
Pick fonts for your website without breaking your head. Test fonts on live websites .
Pick fonts that demand Attention. Text makes up 80% of your UI, the rest are white spaces. The right font doesn't just display information—it shapes perception. Choose the perfect font, and turn casual visitors into loyal customers.
React components & templates for building rich text editor UIs with Tiptap.
Tiptap UI Components is a library of modular, MIT-licensed React components, templates, and primitives that help you build rich text editor UIs faster, on top of the headless Tiptap framework.
A growing library of fancy, fun, animated react components & microinteractions to make the web fun again. Free & Open Source.
gallery of error 404 page designs.
A place to find all those lost pages, worth finding.
WebTUI is a modular CSS library that brings the beauty of Terminal UIs to the browser.
tool to compute lighthouse score
Related contents:
A drop-in image optimization service for the modern web.
PicPerf is a drop-in service for making your website's images light, modern, and fast. Just prefix your image URLs or use an official integration (WordPress, Statamic, & more) to start reaping the benefits.
Related contents:
mCaptcha is proof-of-work based captcha system that is privacy focused and fully automated. A no-nonsense CAPTCHA system with seamless UX.
mCaptcha is a privacy respecting, free CAPTCHA system with a kickass UX. Your users no longer have to interact with ridiculous image-based CAPTCHA system, wasting precious mental bandwidth. Instead, your computer will do the work for you, see for yourself!