Do I need a server for this?

For a Basic version, no! We can simulate the results. For a real production tool that scrapes Instagram, you would need a backend server to handle the API requests securely.

Can I customize the colors?

Absolutely. In Step 9, we provide the CSS styles. You can change the hex codes to match your own brand or website theme.

Why doesn't it show the real private picture?

Instagram blocks direct browser access to their images for security (CORS). This guide builds the **interface** and **logic**. To get real images, you'd connect 'Step 7' to a proxy service.

Back to Guides

BeginnerSocial Media Tools

Build Your Own Instagram DP Viewer (10 Easy Steps)

Learn to build a custom Instagram DP downloader and viewer. We break it down into 10 detailed steps with copy-paste code and clear explanations.

26-12-20259 min readFastTools Team

Hi there! 👋

Have you ever wanted to build a tool that feels like magic? An Instagram DP Viewer is one of those cool little utilities that everyone searches for. It takes a username and—bam—shows you the profile picture in full size.

Today, we’re going to build one from scratch. We won't just give you the code; we'll explain how it works so you can learn while you build. By the end, you'll have a professional-looking tool component you can drop into any website.

🎯What You Will Learn

✓Structure a professional tool card
✓Handle user input with JavaScript
✓Validate usernames (remove spaces & @)
✓Dynamically swap images using code
✓Create a downloadable link for the image

Step 1: The Card Container 📦

Every good tool needs a home. We start by creating a container div that will look like a neat card. This keeps our title, inputs, and results grouped together visually.

We give it an ID of ig-viewer-card. This is important because we will use this ID later in CSS to center it and give it a drop shadow.

html

<div id="ig-viewer-card">
  <h2>📸 Instagram Profile Viewer</h2>
  <!-- We will add the rest of our elements inside here -->
</div>

Step 2: The Input Field ⌨️

We need a place for the user to type. We'll use a standard HTML <input> tag.

We add placeholder text to give the user a hint of what to type. We also give it an ID username-input so our JavaScript code can easily find it and read what the user typed later.

html

<p class="instruction-text">Enter the username to view full size:</p>
<input type="text" id="username-input" placeholder="e.g. @therock">

Step 3: The "View" Button 🔘

Now we need a trigger. When the user clicks this button, our code should spring into action.

We add onclick="viewProfile()" to the button. This tells the browser: "When someone clicks me, run the JavaScript function named viewProfile." We haven't written that function yet, but we will in Step 5!

html

<button onclick="viewProfile()">View Profile Picture</button>

Step 4: The Result Area (Hidden) 🙈

Where does the image go? We don't want a blank broken image icon sitting there before the user searches. So, we create a container div called result-area and set its style to display: none;.

This means it will be invisible when the page loads. Our JavaScript will reveal it (turn it into display: block) only after we have successfully found an image.

html

<div id="result-area" style="display:none;">
    <img id="profile-display" src="" alt="Profile Picture">
    <a id="download-btn" href="#" target="_blank" download>Download Image</a>
</div>

Step 5: Start the "Brain" (JavaScript) 🧠

Now we switch to JavaScript. We need to define that viewProfile function we promised in Step 3.

This script tag goes at the bottom of your HTML (or in a shared footer). Everything inside the { curly braces } is the recipe our browser will follow.

html

<script>
function viewProfile() {
    // Our logic will go here
    console.log("Button was clicked!"); 
}
</script>

Step 6: Get and Clean the Input 🧹

Users are unpredictable. Some might type " @kimkardashian ", others might type "kimkardashian" with no spaces. We need to handle both.

document.getElementById('username-input').value grabs the raw text.
.trim() removes accidental spaces at the start or end.
.replace('@', '') removes the "@" symbol if they included it, leaving just the pure username.

html

var rawInput = document.getElementById('username-input').value;
var username = rawInput.trim().replace('@', '');

if (username === "") {
    alert("Please enter a username first!");
    return; // Stop the function here
}

Step 7: The "Fetch" Logic 📡

Here is the critical part. In a production app, you would call a backend API here to ask Instagram for the real image URL.

Since we are building a frontend demo, we will use a placeholder service that generates an avatar based on the username. This verifies our logic works perfectly. Note: To make this work with real Instagram photos, you would simply replace the mockUrl variable with the URL returned from your backend proxy.

html

// This URL generates a unique avatar for the username
// In a real app, you'd use: var imageUrl = await fetchInstagramData(username);
var imageUrl = "https://ui-avatars.com/api/?name=" + username + "&background=random&size=300&bold=true";

console.log("Generated URL:", imageUrl);

Step 8: Update the Image 🖼️

Now we have our imageUrl. We need to put it into the <img> tag we created in Step 4.

We find the image element using document.getElementById('profile-display') and change its src attribute. This instantly loads the new image.

html

var imgElement = document.getElementById('profile-display');
imgElement.src = imageUrl;

Step 9: Reveal and Download 📥

We also want to update the "Download" button so it points to the correct image. Finally, we make the entire result area visible by changing display to block.

html

// Update download link
var dlLink = document.getElementById('download-btn');
dlLink.href = imageUrl;

// Show the box!
document.getElementById('result-area').style.display = 'block';

Step 10: Make it Beautiful (CSS) 🎨

A raw HTML page looks boring. Let's add some "Instagram-style" flair. We use a gradient for the button and rounded corners for the card to give it that premium mobile-app feel.

html

<style>
  #ig-viewer-card {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    max-width: 400px;
    margin: 40px auto;
    font-family: -apple-system, system-ui, sans-serif;
    text-align: center;
  }
  h2 { margin-top: 0; color: #333; }
  
  input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    box-sizing: border-box; /* Keeps padding inside width */
    font-size: 16px;
  }
  
  button {
    width: 100%;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s;
  }
  button:active { transform: scale(0.98); }
  
  #result-area {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    animation: fadeIn 0.5s;
  }
  
  #profile-display {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px #e1306c; /* The Instagram Story ring effect */
    object-fit: cover;
    margin-bottom: 15px;
  }
  
  #download-btn {
    display: inline-block;
    color: #0095f6;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

🚀 Complete Copy-Paste Code

Here is everything combined into one file. You can save this as instagram-viewer.html and it will work instantly in your browser.

html

<!DOCTYPE html>
<html>
<head>
<style>
  /* STYLES */
  body { background-color: #fafafa; padding: 20px; }
  
  .ig-card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Soft premium shadow */
    max-width: 380px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-align: center;
  }
  
  .ig-title {
    color: #262626;
    margin-bottom: 5px;
    font-size: 24px;
  }
  
  .ig-subtitle {
     color: #8e8e8e;
     font-size: 14px;
     margin-bottom: 25px;
  }
  
  .ig-input-group {
    margin-bottom: 15px;
    text-align: left;
  }
  
  .ig-label {
    font-size: 12px;
    font-weight: 600;
    color: #8e8e8e;
    margin-left: 5px;
    margin-bottom: 5px;
    display: block;
  }
  
  .ig-input {
    width: 100%;
    padding: 14px;
    border: 1px solid #dbdbdb;
    border-radius: 12px;
    background: #fafafa;
    font-size: 15px;
    box-sizing: border-box;
    transition: border 0.2s;
  }
  
  .ig-input:focus {
    border-color: #a8a8a8;
    outline: none;
  }
  
  .ig-btn {
    width: 100%;
    padding: 14px;
    /* Instagram Brand Gradient */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(220, 39, 67, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .ig-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(220, 39, 67, 0.4);
  }
  
  .ig-btn:active {
    transform: translateY(0);
  }
  
  .ig-result {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #efefef;
    display: none; /* Hidden by default */
    animation: slideUp 0.4s ease-out;
  }
  
  .ig-img-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 15px;
  }
  
  .ig-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    /* The famous Instagram ring gradient */
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); 
    padding: 4px; /* Space for the ring */
  }
  
  .ig-download-link {
    display: inline-block;
    background: #efefef;
    color: #262626;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
  }
  
  .ig-download-link:hover {
    background: #dbdbdb;
  }
  
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>
</head>
<body>

<div class="ig-card">
  <h2 class="ig-title">Insta Viewer</h2>
  <p class="ig-subtitle">View profile pictures in full HD</p>
  
  <div class="ig-input-group">
    <label class="ig-label">USERNAME</label>
    <input type="text" class="ig-input" id="ig-username" placeholder="@username">
  </div>
  
  <button class="ig-btn" onclick="fetchDp()">Search User</button>
  
  <div class="ig-result" id="ig-result-box">
    <div class="ig-img-container">
      <img src="" alt="DP" class="ig-img" id="ig-display-img">
    </div>
    <div id="ig-username-display" style="font-weight:bold; margin-bottom:10px; color:#333;"></div>
    <a href="#" class="ig-download-link" id="ig-download-btn" target="_blank" download>
      Download HD Image
    </a>
  </div>
</div>

<script>
  function fetchDp() {
    // 1. Capture Input
    var inputField = document.getElementById('ig-username');
    var rawValue = inputField.value;
    
    // 2. Clean Input (remove @ and spaces)
    var cleanUser = rawValue.trim().replace('@', '');
    
    // 3. Simple Validation
    if(!cleanUser) {
        alert("Please enter a username!");
        inputField.focus(); // Put cursor back in box
        return;
    }
    
    // 4. Update the Button (User Feedback)
    var btn = document.querySelector('.ig-btn');
    var originalText = btn.innerText;
    btn.innerText = "Searching...";
    btn.style.opacity = "0.7";
    
    // 5. Simulate API Delay (makes it feel real)
    setTimeout(function() {
        
        // 6. Generate the Image URL
        // In a real app, this would be the URL from Instagram's API
        // We use UI-Avatars here to simulate a successful result
        var mockUrl = "https://ui-avatars.com/api/?name=" + cleanUser + "&background=random&size=400&bold=true&font-size=0.4";
        
        // 7. Update DOM Elements
        var img = document.getElementById('ig-display-img');
        img.src = mockUrl;
        
        document.getElementById('ig-username-display').innerText = "@" + cleanUser;
        
        var dlLink = document.getElementById('ig-download-btn');
        dlLink.href = mockUrl;
        
        // 8. Show Results
        document.getElementById('ig-result-box').style.display = 'block';
        
        // 9. Reset Button
        btn.innerText = originalText;
        btn.style.opacity = "1";
        
    }, 800); // 800ms simulated delay
  }
</script>

</body>
</html>

Conclusion

You've just built the front-end for a highly requested social media tool. You learned how to handle inputs, manipulate the DOM to show/hide results, and apply gradients in CSS to match a brand's identity.

Next Steps:

Try changing the mockUrl logic to connect to a real Instagram data provider.
Add an "Error" message if the user types a username that doesn't exist.
Experiment with the CSS to add a "Dark Mode" version.

Test Our Pro Version »

Share this guide

More Guides

FastTools Team

Developer Tools & Resource Experts

FastTools is dedicated to curating high-quality content and resources that empower developers. With nearly 5 years of hands-on development experience, our team rigorously evaluates every tool and API we recommend, ensuring you get only the most reliable and effective solutions for your projects.

5 Years ExperienceQuality FocusedDeveloper First

Loading your tools...

Tools

Finance

AI

Media

Marketing

More

Step 1: The Card Container 📦

Step 2: The Input Field ⌨️

Step 3: The "View" Button 🔘

Step 4: The Result Area (Hidden) 🙈

Step 5: Start the "Brain" (JavaScript) 🧠

Step 6: Get and Clean the Input 🧹

Step 7: The "Fetch" Logic 📡

Step 8: Update the Image 🖼️

Step 9: Reveal and Download 📥

Step 10: Make it Beautiful (CSS) 🎨

🚀 Complete Copy-Paste Code

Conclusion

FastTools Team

Step 1: The Card Container 📦

Step 2: The Input Field ⌨️

Step 3: The "View" Button 🔘

Step 4: The Result Area (Hidden) 🙈

Step 5: Start the "Brain" (JavaScript) 🧠

Step 6: Get and Clean the Input 🧹

Step 7: The "Fetch" Logic 📡

Step 8: Update the Image 🖼️

Step 9: Reveal and Download 📥

Step 10: Make it Beautiful (CSS) 🎨

🚀 Complete Copy-Paste Code

Conclusion

FastTools Team