Add option to export DevCard as downloadable image (PNG)

[AlRihabChandhiniMohammed]

Issue Description

Currently, users can create and customize their DevCard, but there is no option to export or download it as an image. This limits usability because users often want to share their DevCard on platforms like LinkedIn, GitHub, or include it in resumes and portfolios.

Proposed Solution

Add a feature that allows users to export the DevCard preview as a downloadable PNG image. The feature should capture only the DevCard section, convert it into an image format, and allow users to download it with a single click while preserving layout, styling, and resolution. This can be implemented using libraries like html2canvas or similar DOM-to-image tools, targeting the DevCard container and triggering a download action through a button such as “Export as Image”.

Expected Benefits
Enables users to download their DevCard as an image for sharing
Useful for LinkedIn, resumes, GitHub profiles, and portfolios
Improves overall usability of the application
Makes the project more professional and industry-relevant
Adds a highly requested feature seen in modern portfolio tools
Enhances user engagement and product value

[adityagautam6102]

Hi, I would like to work on this issue. Please assign it to me if available.

[Harxhit]

@adityagautam6102 Please share your approach.

[tarunchaudharydev]

I would like to work on this issue. please assign this to me

[adityagautam6102]

@adityagautam6102 Please share your approach.

My approach would be to add an “Export as PNG” button near the DevCard preview section. I’ll use html2canvas to capture only the DevCard part and convert it into an image that users can download directly.

I’ll make sure the downloaded image keeps the same design and quality as the preview and won’t change any other functionality of the project.

[tarunchaudharydev]

my approach is to add an “Export as PNG” button and use a library like html-to-image to capture the DevCard section and download it as an image. I will use a ref to target only the card area, keep the design and quality intact, and add basic loading/error handling for a smooth user experience. The feature will work completely on the frontend without any backend changes.

[Midoriya-w]

Hey @ShantKhatri / @Harxhit! I'd love to work on this under GSSoC 2026.
My approach goes beyond basic html2canvas:

Use html-to-image library targeting the DevCard container ref
Add "Export as PNG" and "Export as SVG" options for higher quality
Include loading state on the button while capture is processing
Handle CORS issues for external images (avatars/icons) using useCORS: true
Filename format: devcard--.png for easy organization
Works entirely client-side, no backend changes needed

Can I get assigne

[tech-dipesh]

/assign gssoc