placeholders
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"> |
![]() |
<placeholder-lines size="10"> |
![]() |
<placeholder-text>Lorem ipsum dolor sit amet ...</placeholder-text> |
![]() |
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