- 💮 What is Dev Stamp?
- 🎯 Use Cases
- 🔥 Why You'll Love It
- 🚀 Quick Examples
- 📦 Installation
- 🔧 Advanced Usage
- 🧪 Robustness
- 📃 License
- 👩💻 Contributing
Dev Stamp is a tiny ⚡️ zero-config tool that lets you inject custom content (like build time, version, commit hash, or even a fun signature) right into the HTML of your project, anywhere.
👉 Choose your injection mode: a comment in the body tag or a meta tag in the head section.
Whether you're building apps, sites, or web widgets – Dev Stamp leaves your dev mark with style 💮.
- ✍️ Add your personal touch to your projects
- 🧪 Debug production issues faster with visible build info
- 🪪 Watermark internal tools or preprod environments
- 🛠️ Keep track of your builds in a fun way
- 🪶 Ultra-lightweight – less than 5KB, no dependencies
- ⚙️ Zero-config – works out of the box, but easily customizable
- 💬 Inject anything, anywhere – version, build date, Git SHA, or your custom message anywhere in the HTML
- 🛠️ Tool-agnostic – fits into any build process, no matter the stack
- 🧙♂️ Magical simplicity – one function, one job, done right
import { stampInHtml } from 'dev-stamp';
stampInHtml("💮 Made with love by [Your Name]");⬇️ This adds a comment at the end of the body tag in your HTML.
<html lang="en">
<head>
<title>My Project</title>
</head>
<body>
<h1>Hello, World!</h1>
<!--💮 Made with love by [Your Name]-->
</body>
</html>For more options, please refer to the Advanced Usage section.
import { stampInHtml } from 'dev-stamp';
stampInHtml("🚀 Project version 1.0.0", {
mode: "meta-tag",
});⬇️ This adds a meta-tag at the end of the head tag in your HTML.
<html lang="en">
<head>
<title>My Project</title>
<meta name="dev-stamp" content="🚀 Project version 1.0.0">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>For more options, please refer to the Advanced Usage section.
If you're using npm, yarn, or pnpm, you can install Dev Stamp with the following command:
npm i dev-stamp --save-dev
# or
yarn add -D dev-stamp
# or
pnpm add -D dev-stampIf you want to use Dev Stamp in a browser environment, you can include it via a <script type="module"> tag, which is supported by all modern browsers:
<script type="module">
import { stampInHtml } from "https://cdn.jsdelivr.net/npm/dev-stamp/dist/index.js";
stampInHtml("Hello from CDN 🪴");
</script>You can customize the stamp with various options, which can be passed as a second argument to the stampInHtml function.
import { stampInHtml, StampOptions } from 'dev-stamp';
const options: StampOptions = {
targetSelector: '.my-custom-selector', // CSS selector to find the target element, comment will be injected at the end of this element
};
stampInHtml("💮 Made with love by [Your Name]", options);Dev Stamp supports two modes of injection:
-
Comment: Injects a comment at the end of the
bodytag (by default). -
Meta Tag: Injects a meta tag in the
headsection of the HTML.
You can choose the mode by setting the mode option in the StampOptions described below.
| Field | Type | Description | Default |
|---|---|---|---|
targetSelector |
string |
CSS selector to find the target element to inject the stamp. Only used if mode is set to comment
|
"body" |
mode |
"comment""meta-tag"
|
Mode of HTML injection | "comment" |
comment |
StampCommentOptions | Options related to the comment injection. Only used if mode is set to comment
|
Refer to Comment Options for details |
metaTag |
StampMetaTagOptions | Options related to the meta-tag injection. Only used if mode is set to meta-tag
|
Refer to Meta Tag Options for details |
| Field | Type | Description | Default |
|---|---|---|---|
innerDisplay |
"inline""spaced-inline""block"
|
How the comment should be displayed in the HTML. "inline" is the default, "spaced-inline" adds spaces around the comment, and "block" displays it as a block comment (with newlines before and after). |
"inline" |
| Field | Type | Description | Default |
|---|---|---|---|
name |
string |
Name of the meta tag to be injected | "dev-stamp" |
strictValidation |
boolean |
Whether to validate the meta tag name against HTML standards | true |
overwrite |
boolean |
Whether to overwrite an existing meta tag with the same name | true |
Dev Stamp is designed to be robust and handle various scenarios.
To achieve this, it is 100% unit tested with Vitest and has 100% code coverage.
The code quality is continuously monitored using SonarCloud.
You can check the code quality by clicking on the badge below:
StrykerJS is used to ensure the code is resilient to mutations.
You can check the mutation testing results by clicking on the badges below:
Licensed under the MIT License 📄 – free as in freedom.
We welcome contributions! If you have ideas, suggestions, or issues, please open an issue or a pull request.
Thanks to Jessica Garrido for the fantastic idea ❤️