html-dev-label

An HTML element rendered on page which indicates your project is compiled with process.env.NODE_ENV set to development.

Installation and usage

Compatible with Node.js projects that support ECMAScript 2018 (ES9) or later.

To use, install the package with npm...

npm install @codebundlesbyvik/html-dev-label

...and import and initialize htmlDevLabel.

import htmlDevLabel from "@codebundlesbyvik/html-dev-label";

htmlDevLabel(["top", "left"]);

Options

htmlDevLabel accepts a single, optional parameter which is either a position array or an object with options.

| Property | Type | Default | Description | | :---------------- | :----------------------------------------------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------| | parentEl | HTMLElement | document.body | Element of which the label will become the first child. | | position | ["top" \| "bottom", "left" \| "right"] | ["bottom", "right"] | Position of the label. | | size | "sm" | "md" | "lg" | "md" | Size of the label. | | text | string | "DEV BUILD" | Text shown inside the label. | | fontFamily | "monospace" | "sans-serif" | "inherit" | "monospace" | Style of font family used for the label text. Will use the computed value of the parent element when set to "inherit". | | backgroundColor | string | "#FFF" (white) | Background color of the label. | | borderColor | string | "#F00" (red) | Border color of the label. | | hideOnHover | boolean | false | Make the label transparent when hovering over it with a pointing device. |

Migrating

From version 2

• Breaking change: Support for position as string has been removed. Convert the value to an array.
• The default font-family used for the label text has changed.
  • If you prefer the old look, use value "sans-serif" for the fontFamily option.

License

MIT © 2025 Viktor Chin-Kon-Sung