DEV Community

Cover image for Generate Dynamic Avatar & Styled QR Code Using Simple URL (No Libraries Needed)
Raka Widhi Antoro
Raka Widhi Antoro

Posted on

Generate Dynamic Avatar & Styled QR Code Using Simple URL (No Libraries Needed)

#productivity #programming #tutorial #webdev

If you want a simple, zero dependency way to generate avatars or QR codes inside your app, dashboard, or documentation, this guide is for you.

In this tutorial, we’ll use ImgPeek, a lightweight API that creates images dynamically just by calling a URL.

No SDK, no npm package, no backend required.

⭐ 1. Dynamic Avatar Generator

The Avatar API generates a unique avatar based on any username.
Colors + initials are generated automatically.

✅ Basic Usage 

<img src="https://api.imgpeek.com/v1/username/alice.png" />
Enter fullscreen mode Exit fullscreen mode

Result:

  • Unique gradient color (based on username hash)
  • Initials automatically extracted (“A”)

🎨 Add Styles

You can customize the avatar with ?style=.

Available styles: gradient, minimal, neon, glass, pixel

Example:

<img src="https://api.imgpeek.com/v1/username/alice.png?style=neon" />
Enter fullscreen mode Exit fullscreen mode

🎯 Use Case: User Profile Placeholder

If you're building a SaaS or dashboard:

// React example
const Avatar = ({ username }) => (
  <img
    src={`https://api.imgpeek.com/v1/username/${username}.png?style=minimal`}
    alt={username}
    width="64"
    height="64"
  />
);
Enter fullscreen mode Exit fullscreen mode

Works great with:
✔ React
✔ Vue
✔ Next.js
✔ Svelte
✔ Static HTML
✔ Markdown (GitHub README, docs)

🟦 2. Dynamic QR Code Generator

Generate QR codes for URLs, text, or contact info — instantly.

✅ Basic Usage 

<img src="https://api.imgpeek.com/v1/qr/https://example.com" />
Enter fullscreen mode Exit fullscreen mode

This creates a standard black QR code.

🎨 Add Style & Size

There are 21+ QR styles such as classic, rounded, dots, gradient-rounded, neon, fluid, bubble, etc.

Example:

<img 
  src="https://api.imgpeek.com/v1/qr/Hello%20DEV.to?style=rounded&size=500"
/>
Enter fullscreen mode Exit fullscreen mode

🎯 Use Case: Landing Page CTA

Example for an email subscription page:

<img
  src="https://api.imgpeek.com/v1/qr/https://mysaas.app/signup?style=gradient-dots&size=400"
  alt="Signup QR"
/>
Enter fullscreen mode Exit fullscreen mode

Great for:
✔ Landing pages
✔ Email signatures
✔ Event badges
✔ Product packaging
✔ Payment pages

🧪 Bonus: Generate On The Fly in Markdown

Yes, you can embed this inside your README.md, wiki, or documentation:

Avatar 

![Avatar](https://api.imgpeek.com/v1/username/james.png?style=pixel)
Enter fullscreen mode Exit fullscreen mode

QR Code 

![QR](https://api/imgpeek.com/v1/qr/https://yourapp.com?style=neon)
Enter fullscreen mode Exit fullscreen mode

No build tools needed.

💡 Why This Approach?

Because developers love simple things.

  • No backend required
  • No libraries to install
  • Works everywhere
  • Super fast CDN delivered images
  • Perfect for prototyping, internal tools, or production apps

🔧 Full Documentation

You can explore all styles, parameters, and examples here:

👉 https://www.imgpeek.com/docs

Top comments (0)