dhvagna-dom: The Smallest TypeScript DOM-Ready Utility (0.7KB) for Modern Web Apps developed by Gnanesh Balusa

What makes dhvagna-dom stand out? Unlike other DOM-ready utilities, this package combines TypeScript support, minimal size (0.7KB), intelligent state detection, and cross-browser compatibility while offering features like optional timeouts and proper event cleanup. It's the smartest choice for modern web development when you need reliable DOM-ready detection without the bloat.

A lightweight utility (less than 1KB) to ensure your JavaScript code runs after the DOM is fully loaded, solving the common issue where developers face issues accessing DOM elements due to scripts running before the DOM is fully loaded.

Unlike bulky frameworks that include DOM-ready functionality as part of a larger package, dhvagna-dom does one thing exceptionally well. It provides the most efficient and reliable way to execute JavaScript code when the DOM is fully loaded and ready for manipulation.

How It Works Internally

dhvagna-dom uses a multi-layered approach to ensure maximum reliability:

1. State Detection: First checks if the DOM is already loaded by examining document.readyState

2. Event Subscription: If not already loaded, attaches listeners to both:

1. DOMContentLoaded (fires when HTML is fully parsed)

2. load (fallback that fires when all resources are loaded)

3. Cleanup: Properly removes event listeners once triggered

4. Safety Timeout: Optional timeout parameter as a fallback mechanism

This approach ensures your callback runs at the earliest possible moment when the DOM is ready, but never before.

## The Problem

Have you ever encountered errors like this?

// This fails because the element doesn't exist yet

const element = document.getElementById('my-element');

element.innerHTML = 'Hello World'; // TypeError: Cannot set property 'innerHTML' of null

Installation

You can install dhvagna-dom using npm, yarn, or pnpm:

# Using npm

npm install dhvagna-dom

# Using yarn

yarn add dhvagna-dom

# Using pnpm

pnpm add dhvagna-dom

You can also find the source code on GitHub:

[https://github.com/gnanesh-16/dhvagna-dom](https://github.com/gnanesh-16/dhvagna-dom)

Usage

Basic Usage

import dhvagnaDom from 'dhvagna-dom';

dhvagnaDom(() => {

  // Your code here will run when the DOM is fully loaded

  const element = document.getElementById('my-element');

  element.innerHTML = 'Hello World';

});

Key Features

• Tiny Footprint: Less than 1KB minified and gzipped (0.7KB to be exact)

• Zero Dependencies: No external libraries required

• TypeScript Support: Built with TypeScript for better developer experience

• Framework Agnostic: Works with any JavaScript framework or vanilla JS

• Smart Detection: Checks if DOM is already loaded before attaching listeners

• Multiple Listeners: Can be called multiple times without conflicts

• Universal Browser Support: Works in all modern browsers and IE11+

Performance Metrics

The main advantage of dhvagna-dom over these alternatives is its extremely small size, TypeScript support, and modern implementation.

Checkout npm package : https://www.npmjs.com/package/dhvagna-dom

Installation :  npm i dhvagna-dom