placeholders icon indicating copy to clipboard operation
placeholders copied to clipboard

SVG-based placeholders in web components

Placeholder

Custom placeholders in web components. Can be used with popular JavaScript frameworks or HTML tags.

Usage

Insert the following script tag to your page:

<script type="module" src="https://unpkg.com/@placeholders/[email protected]/dist/esm/placeholders.js"></script>

Then you can use <placeholder-xxx> tags. For example:

Tag Output
<placeholder-image width="400" height="200"> Image placeholder
<placeholder-lines size="10"> Lines placeholder
<placeholder-text>Lorem ipsum dolor sit amet ...</placeholder-text> Text placeholder

Local development

  • Install the dependencies
$ npm install
  • Build for production
$ npm run build
  • Run locally
$ npm run dev

Open http://localhost:3333 in your browser to see it in action.

Contributing

PRs, suggestions are welcome!

About

This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.

Be my friend on