dummytextjs is a lightweight utility for generating realistic dummy text (words, sentences, or paragraphs) for development and testing. It also supports the automatic injection of dummy content into HTML elements via the data-dummy attribute.
- 🔤 Generate random words, sentences, and paragraphs.
- ⚡ Auto-inject dummy content into HTML elements using
data-dummy. - ✅ Framework-agnostic – works with Vue, React, Angular, and vanilla JS.
- 💡 TypeScript support out of the box.
- 📦 Lightweight and zero dependencies.
npm install dummytextjsimport {
generateWords,
generateSentences,
generateParagraphs,
autoInjectDummyContent
} from "dummytextjs";<template>
<div>{{ dummyText }}</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { generateWords } from "dummytextjs";
const dummyText = ref("");
onMounted(() => {
dummyText.value = generateWords(10);
});
</script><template>
<div data-dummy="3p"></div>
</template>
<script setup>
import { onMounted } from "vue";
import { autoInjectDummyContent } from "dummytextjs";
onMounted(() => {
autoInjectDummyContent();
});
</script>import React, { useEffect, useState } from "react";
import { generateSentences } from "dummytextjs";
function App() {
const [text, setText] = useState("");
useEffect(() => {
setText(generateSentences(5));
}, []);
return <div>{text}</div>;
}
export default App;import React, { useEffect } from "react";
import { autoInjectDummyContent } from "dummytextjs";
function App() {
useEffect(() => {
autoInjectDummyContent();
}, []);
return (
<div>
<h2 data-dummy="2s"></h2>
<p data-dummy="3p"></p>
</div>
);
}
export default App;import { Component, OnInit } from "@angular/core";
import { generateParagraphs } from "dummytextjs";
@Component({
selector: "app-dummy",
template: `<div [innerHTML]="dummyText"></div>`
})
export class DummyComponent implements OnInit {
dummyText = "";
ngOnInit(): void {
this.dummyText = generateParagraphs(2);
}
}import { Component, AfterViewInit } from "@angular/core";
import { autoInjectDummyContent } from "dummytextjs";
@Component({
selector: "app-auto-dummy",
template: `<div data-dummy="5p"></div>`
})
export class AutoDummyComponent implements AfterViewInit {
ngAfterViewInit(): void {
autoInjectDummyContent();
}
}The data-dummy attribute supports the following formats:
| Syntax | Meaning |
|---|---|
5w |
5 words |
3s |
3 sentences |
2p |
2 paragraphs |
These values can be used to instruct autoInjectDummyContent() to dynamically replace the elements' content.
Generates the specified number of random words.
Generates the specified number of random sentences.
Generates the specified number of random paragraphs.
Automatically finds elements with the data-dummy attribute and injects dummy text into them.
<body>
<h1 data-dummy="2s"></h1>
<p data-dummy="1p"></p>
<script type="module">
import { autoInjectDummyContent } from "dummytextjs";
autoInjectDummyContent();
</script>
</body>MIT
Created with 💻 by @spyshiv