The supercharged toolkit for modern web development, AI engineering & DevTools.
dphelper is a powerful, zero-dependency utility library that brings together 53 production-ready tools for web developers, AI engineers, and DevTools creators.
Think of it as your universal toolbox - from DOM manipulation to cryptographic operations, from real-time WebSocket handling to AI-powered token optimization. No more juggling multiple packages. One import, infinite possibilities.
"dphelper is what you'd build if you combined lodash, socket.io, and an AI SDK - but lighter."
[!IMPORTANT] Application state is currently handled through Memorio and RGS.
dphelper has expanded with powerful new modules for modern web development:
// Open/create database
const db = await dphelper.idb.open('mydb', 1, { users: 'id++,name,email' });
// Add record
await dphelper.idb.put('mydb', 'users', { name: 'John', email: 'john@example.com' });
// Query records
const users = await dphelper.idb.getAll('mydb', 'users');
// Query by index
const johns = await dphelper.idb.query('mydb', 'users', 'name', 'John');
// Bulk operations
await dphelper.idb.bulkPut('mydb', 'users', [{name: 'A'}, {name: 'B'}]);
// Create worker from file
const worker = dphelper.worker.create('worker.js', {
onmessage: (e) => console.log(e.data)
});
// Create inline worker
const inlineWorker = dphelper.worker.createInline(`
self.onmessage = e => postMessage(e.data * 2);
`);
// Worker pool for parallel processing
const pool = dphelper.worker.pool('worker.js', 4);
const results = await dphelper.worker.poolExec(pool, [1, 2, 3, 4]);
// SharedWorker for cross-tab communication
const shared = dphelper.worker.shared('worker.js', { name: 'my-shared' });
// Set locale
dphelper.i18n.setLocale('it');
// Add translations
dphelper.i18n.addTranslations('it', {
hello: 'Ciao {name}!',
items: '{count, plural, one{# item} other{# items}}'
});
// Translate with interpolation
dphelper.i18n.t('hello', { name: 'World' }); // "Ciao World!"
// Pluralize
dphelper.i18n.pluralize(5, { one: 'item', other: 'items' }); // "items"
// Format number/currency
dphelper.i18n.number(1234.56, 'de-DE', { style: 'currency', currency: 'EUR' });
// Relative time
dphelper.i18n.relativeTime(Date.now() - 3600000); // "1 hour ago"
// Load image
const img = await dphelper.image.load('photo.jpg');
// Resize
const resized = dphelper.image.resize(img, 100, 100);
// Crop
const cropped = dphelper.image.crop(img, { x: 0, y: 0, width: 50, height: 50 });
// Apply filters
const filtered = dphelper.image.filter(img, { brightness: 1.2, sepia: 0.5 });
// Rotate/Flip
const rotated = dphelper.image.rotate(img, 90);
const flipped = dphelper.image.flip(img, 'horizontal');
// Grayscale/Blur
const gray = dphelper.image.grayscale(img);
const blurred = dphelper.image.blur(img, 5);
// Gzip compression
const compressed = await dphelper.compress.gzip('Hello World');
const decompressed = await dphelper.compress.gunzip(compressed);
// Base64 encoding
const encoded = dphelper.compress.base64Encode('Hello');
const decoded = dphelper.compress.base64Decode(encoded);
// URL encoding
const urlEncoded = dphelper.compress.urlEncode('Hello World!');
const urlDecoded = dphelper.compress.urlDecode(urlEncoded);
// HTML encoding
const htmlEncoded = dphelper.compress.htmlEncode('<script>');
const htmlDecoded = dphelper.compress.htmlDecode('<script>');
// Check availability
const available = dphelper.biometric.isAvailable();
// Get support details
const support = dphelper.biometric.getWebAuthnSupport();
// Register credential
const { success, credentialId } = await dphelper.biometric.register('user123');
// Authenticate
const { success } = await dphelper.biometric.authenticate('user123');
// Check specific sensor
const hasFingerprint = await dphelper.biometric.isSensorAvailable('fingerprint');
npm i dphelper --save-dev
Import it precisely once in your entry point (e.g., index.js, main.ts, or App.tsx):
import "dphelper";
// dphelper is now available globally across your entire project!
For plain HTML/CDN:
<script src="https://unpkg.com/dphelper/dphelper.js"></script>
<!-- Optional check -->
<script>
console.debug(dphelper.version); // latest version
console.debud(dphelper.isBrowser); // true
</script>
The new dphelper.ai module is designed for the modern AI stack (LLMs, RAG, Vector Search).
// ⚡ TOON: The ultimate JSON alternative for prompts
const toonData = dphelper.ai.toon(myJsonObject);
// Efficient, compact, and deterministic.
// 📏 Context-Aware Token Counting
const tokens = dphelper.ai.tokenCount(myJsonObject);
// Automatically calculates tokens based on the optimal TOON representation.
// 🧩 Smart Chunker (RAG Ready)
const chunks = dphelper.ai.chunker(longText, { size: 1000, overlap: 200 });
// 🔍 Semantic Similarity
const score = dphelper.ai.similarity(embeddingA, embeddingB);
// 🧠 Reasoning Extractor (DeepSeek/O1 support)
const { reasoning, content } = dphelper.ai.extractReasoning(rawAiReply);
// 📸 The AI Black Box (Snapshot)
const appStateToon = dphelper.ai.snapshot();
// Generates a complete app "mental dump" (URL, gState, Logs) optimized for LLMs.
Every tool in dphelper is now a self-contained module. Our new build system automatically:
tools/ directory.dphelper.d.ts.This ensures that adding new tools is instantaneous and always documented with full Intellisense support.
dphelper makes your web app feel like a native desktop application with cross-tab intelligence.
// ⚓ Auto-Recovery: Save scroll and input values across reloads/crashes
dphelper.UI.anchorContext();
// 💓 Pulse: Real-time event bus between all open tabs (No Backend needed!)
const bus = dphelper.sync.pulse('my-app', (msg) => {
console.debug('Received from another tab:', msg);
});
bus.emit({ action: 'theme-change', value: 'dark' });
// 🔒 Interlock: Monitor how many tabs of your app are active
dphelper.browser.interlock((count) => {
console.debug(`Active tabs: ${count}`);
});
// 🌊 SSE: Modern streaming (Support for POST & Headers)
const stream = dphelper.sse.open('/api/ai', {
method: 'POST',
headers: { 'Authorization': 'Bearer ...' },
body: JSON.stringify({ prompt: 'Hello AI' })
});
stream.on('message', (data) => console.debug('Chunk:', data));
stream.on('error', (err) => console.error('Stream failure:', err));
Manage your dphelper environment, monitor memory usage, and access documentation directly from your browser.
dphelper tools are classified by their execution target to ensure stability across the stack.
| Icon | Type | Description |
|---|---|---|
| 🌐 | Client | Browser only (requires DOM, window, or navigator). |
| 🖥️ | Server | Node.js / Bun / Deno only (access to process, fs, etc). |
| 🧬 | Isomorphic | Universal. Works in both Browser and Server (AI, Logic, Math). |
dphelper.ai: 🧬 Isomorphicdphelper.fetch: 🧬 Isomorphic (Supports Node 18+)dphelper.sse: 🌐 Client (Streaming fetch)dphelper.socket: 🌐 Client (WebSocket)dphelper.sync: 🌐 Client (BroadcastChannel)dphelper.UI: 🌐 Client (DOM based)MIT License
Copyrigth (c) Dario Passariello
FAQs
dphelper devtools for developers
The npm package dphelper receives a total of 554 weekly downloads. As such, dphelper popularity was classified as not popular.
We found that dphelper demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Since January 31, 2026, we identified at least 72 additional malicious Open VSX extensions, including transitive GlassWorm loader extensions targeting developers.
Research
Six malicious Packagist packages posing as OphimCMS themes contain trojanized jQuery that exfiltrates URLs, injects ads, and loads FUNNULL-linked redirects.
Security News
The GCVE initiative operated by CIRCL has officially opened its publishing ecosystem, letting organizations issue and share vulnerability identifiers without routing through a central authority.