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

Avatar photoByAdil

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" />

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" />

🎯 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"
  />
);

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" />

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"
/>

🎯 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"
/>

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)

QR Code

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

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

Similar Posts