DEV Community: jQueryScript

Yace: Tiny Extensible Code Editor for the Browser

jQueryScript — Thu, 30 Jul 2026 13:02:04 +0000

Yace is a tiny (under 2KB) code editor that upgrades a plain textarea with syntax highlighting, undo/redo, bracket pairing, and custom rendering — all through a pipeline of plugins and highlighters.

Real <textarea> underneath keeps native caret, IME, and accessibility.
Works with any framework: vanilla JS, React, Vue.
Tree-shakeable, zero dependencies.
Write your own plugin or highlighter in a handful of lines.

Perfect for documentation playgrounds, Markdown editors, AI prompt inputs, and any place where a full IDE would be overkill.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Status Indicator: An Animated Web Component for Workflow Steps

jQueryScript — Thu, 30 Jul 2026 12:36:24 +0000

Drag across five workflow dots and watch the active one stretch into a labeled pill. status-indicator packages that interaction as a dependency-free Web Component.

Click, touch, or scrub across status choices.
Replace the default labels, colors, and icons.
Navigate through radiogroup keyboard controls.
Theme the control with CSS custom properties.
Honor reduced-motion preferences automatically.

No framework and no build step.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Lifeline: Scroll-Scrubbed Timeline Component for Next.js

jQueryScript — Thu, 30 Jul 2026 11:41:40 +0000

Lifeline: a component registry that adds a story-driven timeline to Next.js and shadcn/ui projects.

Horizontal scroll scrubbing on desktop.
Vertical timeline layout on mobile.
Event text, links, portraits, logos, photos, and video.
Draggable media cards with a lightbox.
Full-page and embedded modes.
Editable source installed through the shadcn CLI.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Nexvyn UI: Animated shadcn/ui Components with Spring Physics

jQueryScript — Thu, 30 Jul 2026 11:20:16 +0000

Nexvyn UI: a shadcn/ui registry with 33 React components built around spring motion and tactile interaction.

Navigation, tabs, drawers, menus, and form controls
Chat composer, media controls, and copy actions
Animated orbs, audio visualizations, and device mockups
Editable Tailwind and TypeScript source installed through the shadcn CLI

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Amber Console: Retro Terminal CSS Framework

jQueryScript — Wed, 29 Jul 2026 16:42:59 +0000

Amber Console styles plain HTML into a glowing amber control panel, the kind of interface that used to run heavy machinery, and it does it from a single stylesheet with zero runtime dependencies.

One <link> tag installs the whole component set: buttons, tabs, meters, dialogs, tables, and more.
Two palettes, neon and amber, both computed to pass WCAG AA contrast.
Optional 6.6KB JavaScript adds plasma bloom, CRT scanlines, and a phosphor afterglow effect that lets things decay instead of blinking off.
State binds through ARIA attributes, so it drops into React, Vue, or a static HTML page the same way.

Worth a look for dashboards, status boards, or any project that wants to look like it is running machinery.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

ChatGPT Model Selector: Draggable Web Component for AI Reasoning Tiers

jQueryScript — Wed, 15 Jul 2026 10:51:15 +0000

ChatGPT Model Selector: a JavaScript library that renders a draggable, five-tier intelligence picker for AI chat interfaces. It ships as a zero-dependency Web Component alongside a matching SwiftUI package for iOS and macOS.

Key features:

Five-stop drag, click, and keyboard slider with magnetic snapping
Animated blue-to-violet color fill with a Canvas sparkle stream
Confetti celebration when a user reaches the Ultra tier
Full reduced-motion support and a standard change event
No dependencies, no build step, works with a single script tag

Useful for anyone building a model picker, settings panel, or AI composer UI that needs a fast-versus-smart tradeoff control.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Claude Model Selector: Animated Effort Level Picker

jQueryScript — Wed, 15 Jul 2026 10:20:14 +0000

Claude Model Selector: a JavaScript library that renders a draggable six-level effort picker as a zero-dependency web component.

Features:

Magnetic drag with spring physics snapping on release
Full keyboard support with arrow keys, Home, and End
An animated Canvas pixel field on its top tier
Built-in prefers-reduced-motion handling
Theming through CSS custom properties, no Shadow DOM workarounds needed

Useful if you are building a settings panel, an AI tool configuration screen, or any interface that needs a smooth intensity or workload selector without pulling in a UI framework.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

BeUI v2: Framer Motion Components for React and Next.js

jQueryScript — Wed, 15 Jul 2026 08:18:36 +0000

beUI: an animated component collection for React and Next.js.

• 31 components and 16 larger UI blocks.
• shadcn registry installation.
• Tailwind CSS and Motion-based interactions.
• Editable local React and TypeScript source.
• Components for forms, overlays, tables, loaders, navigation, file uploads, scheduling, and more.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

colorContrast.js: WCAG Contrast Checker for the Web

jQueryScript — Wed, 15 Jul 2026 08:00:27 +0000

colorContrast.js 2.0 turns the original background-brightness utility into a full JavaScript color contrast toolkit.

It handles:

• WCAG AA and AAA checks
• Automatic foreground color selection
• HEX, HSL, OKLCH, Lab, Display P3, and other CSS colors
• Transparency compositing
• Palette contrast matrices
• Live DOM element analysis
• TypeScript declarations
• A separate legacy jQuery build

Useful for theme editors, design systems, accessibility tools, and any UI with dynamic colors.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Liquid Glass: Apple-Style Refraction for Any Element

jQueryScript — Mon, 13 Jul 2026 10:46:03 +0000

liquid-glass: a JavaScript library that renders real SVG-based refraction on any DOM element, no dependencies required.

Key features:

Bends backdrop content at a panel's rim with a faint prism fringe in Chromium browsers.
Falls back to a frosted blur automatically on Safari and Firefox.
Keeps interior text and form inputs fully usable, since it works through backdrop-filter.
Regenerates its displacement map automatically on resize.
Ships as one file with a small refresh/destroy API for framework cleanup.

Useful for dashboards, modals, and nav bars that want an Apple-style liquid glass look without a WebGL dependency.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

ds.css: A Pure CSS Nintendo DS Lite UI Framework

jQueryScript — Thu, 02 Jul 2026 10:40:06 +0000

ds.css: a CSS library that recreates the Nintendo DS Lite firmware interface for your web projects.

Key features include:

16 themed colors with lighter shade variants built in
Colored buttons, inputs, radio groups, and progress bars
A Pictochat-style messaging panel with a highlight class
An alert component with an optional loading animation
Zero JavaScript, install via npm or copy the CSS folder directly

Good pick if you're building a retro portfolio, a nostalgia landing page, or just want a handheld console look without hand-coding every gradient.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Startercn: Build a Custom shadcn/ui Registry with Next.js

jQueryScript — Fri, 26 Jun 2026 02:15:35 +0000

Startercn: a Next.js starter kit for publishing your own shadcn/ui component registry.

Features

Write and own local TypeScript component source.
Generate installable registry JSON files.
Publish docs and component endpoints from one project.
Let users install components through the shadcn CLI.

👉 Blog Post

👉 GitHub Repo