DEV Community

Cover image for 15 Useful Placeholder Tools for Designers and Developers πŸ€©πŸš€
Madza
Madza

Posted on • Originally published at madza.hashnode.dev

15 Useful Placeholder Tools for Designers and Developers πŸ€©πŸš€

Have you ever worked on a layout design and came across thinking if only I knew some generator to create some temporary samples for me? This can be attributed to anything - sample text, images, brand logo, profile pictures, JSON data, and more.

In this article, I compiled a list of useful placeholder generators, so that you can speed up your development workflow. All you have to do is copy the sample data generated and paste it into your project where you want to use it.

To make it easier for you, I sorted them across categories, provided a direct link, a concise description, and a preview image for each, so you can get an initial impression on the fly.

Text

1. Lorem Ipsum

Industry's standard dummy text generator.

1645534874_1893x931.png

2. Loripsum.net

An improved version of Lorem Ipsum with options to include links, lists, code blocks, headings, add text styling, and other customization options.

1645534890_1899x921.png

Images

3. Picsum Photos

Provides random or specific images. Specify the desired image size at the end of the request URL. Grayscale and blur effects can also be applied to any image.

1645534287_1895x930.png

4. Placeholder.com

Generates placeholder boxes for layouts. Set background colors, the text used, and other parameters by directly including them in the URL.

1645534335_1747x866.png

Logos

5. Logo Ipsum

Ready to use replacement logos in various styles & compositions for your design. Automatically generates the SVG code for each with just a click on them.

1645534362_1884x927.png

Avatars

6. DiceBear

Avatar library for designers and developers. You can choose between lovely designed characters. Provides API that you can use right away.

1645534387_1893x871.png

7. Personas

A playful avatar generator for the modern age.

1645534406_1898x930.png

8. Avataaars

Allows creating custom avatars by providing specific parameters or using random options till you come up with something you like.

1645534422_1897x931.png

JSON data

9. Random User

An open-source API for generating random user data.

1645534443_1892x933.png

10. JSON Placeholder

REST API that you can use whenever you need some fake data.

1645534464_1900x930.png

11. Fake JSON

Create JSON responses you need with an advanced JSON Editor built-in.

1645534528_1892x914.png

Code blocks

12. Faux Code

Turn real code (Github Gist) into faux code (SVG image).

1645534545_1890x896.png

Entertaining

13. Place Kitten

A service for getting pictures of kittens for use as placeholders in your designs.

1645534572_1340x689.png

14. CupCake Ipsum

Sugar-coated Lorem Ipsum generator.

1645534594_1911x887.png

15. RoboHash

Provides unique, robot/alien/monster/whatever images for any text.

1645534615_1890x913.png


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

If these resources helped, connect me on Twitter, LinkedIn and GitHub!

Visit my Blog for more articles like this.

Discussion (33)

Collapse
liftoffstudios profile image
Liftoff Studios

You forgot fakerjs
Great article though !!

Collapse
madza profile image
Madza Author

Great addition, thanks πŸ’―βœ¨

Collapse
polerinashooter profile image
🩰 The Flying Shooter ❀️‍πŸ”₯

Is it still usable after Endgame?

Collapse
liftoffstudios profile image
Liftoff Studios

Yes, another community took over it
github.com/faker-js/faker

Thread Thread
polerinashooter profile image
🩰 The Flying Shooter ❀️‍πŸ”₯

Wow thanks! I didn't knew about it!

Thread Thread
madza profile image
Madza Author

Yes, I just noticed that as well πŸ˜‰

Collapse
polerinashooter profile image
🩰 The Flying Shooter ❀️‍πŸ”₯

I personally use placekeanu.com/ for image placeholder. I also use the kittens one but.. Keanu is always keanu <3

Collapse
madza profile image
Madza Author

Didn't know about that one πŸ˜€πŸ˜€
There are tons of entertaining ones for images as well as Lorem Ipsum πŸ˜‰

Collapse
polerinashooter profile image
🩰 The Flying Shooter ❀️‍πŸ”₯

Yeah that's true! I love the cupcakes one for Lorem Ipsums πŸ˜€
Btw the avatar ones were completely new to me and very useful! thanks a lot <3

Thread Thread
madza profile image
Madza Author

My pleasure and you are welcome! πŸ™β€

Collapse
ivana_vnucec profile image
Ivana Vnucec

Very interesting article!

Collapse
madza profile image
Madza Author

Thanks a lot, hope you found them useful πŸ™β€

Collapse
madza profile image
Madza Author

Also if you are interested, here are some more tools for productivity πŸ˜‰βœ¨

Collapse
wavist profile image
Somtochukwu Okafor

This is a nice article

Collapse
madza profile image
Madza Author

Thank you so much, means a lot! πŸ™β€

Collapse
bobbyiliev profile image
Bobby Iliev

This is super cool!

Collapse
madza profile image
Madza Author

Thanks a lot! πŸ™β€
Very helpful for quick placeholders or sample data πŸ‘

Collapse
devkiran profile image
Kiran

Great list. Thanks for sharing.

Collapse
madza profile image
Madza Author

Thank you for checking it out! πŸ™β€

Collapse
spandyboss profile image
SpandyBoss

Amazing post.
Keep it up

Collapse
madza profile image
Madza Author

Thanks a lot! πŸ™β€

Collapse
paugramming profile image
Pau

Great article!

Collapse
madza profile image
Madza Author

Thanks for the support! πŸ™β€

Collapse
jwenjian profile image
Jiang Wenjian

robo hash is awesome!

Collapse
madza profile image
Madza Author

Yeah, I love it too πŸ’―πŸ˜‰

Collapse
jacksonkasi profile image
Jackson Kasi

wow, it's really useful

Collapse
madza profile image
Madza Author

Thanks a lot, great to hear you found them useful πŸ™β€

Collapse
mthompsoncode profile image
Mark Thompson

Nice list, gonna bookmark for upcoming personal projects

Collapse
madza profile image
Madza Author

Awesome to hear! Happy to help! πŸ™β€

Collapse
leratomakhasane profile image
leratomakhasane

This is incredible, I appreciate it. Thank you it will assist me a lot

Collapse
madza profile image
Madza Author

My pleasure to help! πŸ™β€

Collapse
pereiradiasgonc profile image
Gonçalo Dias

Thanks for the list. Quite helpful

Collapse
madza profile image
Madza Author

Always happy to help, thanks! πŸ™β€