addEventListener
Listen for clicks the idiomatic way.
Snippet library
Short tagged patterns — HTML, CSS, JavaScript, React, and Web Components to paste and adapt.
Trail
Tags
Animated underline on hover
Line that grows with transform — light and accessible.
attachShadow
Open Shadow DOM and inject markup + CSS.
Basic dialog
Native modal with showModal().
Basic slot
Project light DOM into the shadow with <slot>.
Basic useQuery
queryKey + queryFn.
Button types
submit, button, and reset with clear intent.
Card with soft shadow
Light elevation for content blocks.
CE in React
Use the tag in JSX after registering the element.
CE in Vue
Side-effect import + tag in a Vue template.
Center with Flex
Absolute center of a child in the container.
Center with Grid
place-items centers on a single grid axis.
Chip list
Compact tag group with automatic wrap.
Clamp text to N lines
Multiline cut with -webkit-line-clamp.
Class toggle
Toggle visual state via classList.
classList for menus
Open/close a mobile menu.
Compose with children
Content slot in the component.
Conditional render
&& and ternary in JSX.
createElement
Create and insert DOM nodes.
CSS in Shadow DOM
Encapsulated styles with :host and ::slotted.
CSS-only tooltip
Hint on hover/focus using attr() and a pseudo-element.
Custom checkbox
Custom look while keeping the native input accessible.
Custom radio
Option group with consistent look and visible focus.
customElements.define
Register a Custom Element with a hyphenated name.
dataset
Read data-* as camelCase.
Debounce (sketch)
Delay execution until the user pauses.
define guard
Avoid errors if the module is imported twice.
Destructure props
Clean signature with destructuring.
Details / summary
Native disclosure without JavaScript.
Dual export
Named class + register() + auto-register.
fetch JSON
async/await with an ok check.
Full bleed in a narrow container
Section that escapes the column and fills 100vw.
Functional component
Function that returns JSX.
Glassmorphism effect
Frosted glass with backdrop-filter.
Gradient text
Fill text with linear-gradient via clip.
Hide on print
Hide nav, buttons, and ads with @media print.
Image object-fit cover
Fill the frame without distortion — smart crop.
Label + input
Explicit for/id association.
map with key
List with a stable identifier.
Media aspect ratio
Keep 16:9 (or another) without padding hacks.
Meta viewport
Essential viewport for mobile layout.
Minimal reset
A clean start without wiping the whole UA stylesheet.
observedAttributes
React to HTML attribute changes.
Open Graph (stub)
Basic meta tags for social previews.
package.json exports
exports field pointing at the lib ESM.
Picture + source
Responsive image via media query.
Pill badge
Rounded label for status and tags.
preventDefault
Cancel default submit or navigation.
Primary button
Base CTA style with hover.
querySelectorAll + loop
Iterate a NodeList with forEach.
Screen-reader-only text
Accessible visually hidden (sr-only).
Simple container query
Style based on component width.
Skeleton loading
Animated placeholder while content loads.
Skip link
Skip navigation and jump to content.
Smooth scroll
Anchors with native animated scrolling.
Spacing with gap
Replace manual margins with gap in flex/grid.
Sticky footer
Footer at the bottom of the viewport even with little content.
Sticky navigation
Keep the bar at the top while scrolling.
time + datetime
Human-readable date with machine-readable value.
Truncate text to one line
Ellipsis when text overflows the width.
useEffect on mount
Empty deps array + cleanup.
useMutation + invalidate
Mutate and refresh the cache.
useState toggle
Boolean with a functional setter.
Variables for dark mode
Light/dark theme base with custom properties.
Visible focus ring
:focus-visible state without removing accessibility.
Vite lib mode
vite.config snippet for library mode.
Zustand store
create + selector.