DEV Community

Bigyan Karki
Bigyan Karki

Posted on

How to Add Link Previews to Any App in One Line of Code

#webdev #javascript #api #tutorial

Ever needed to show a preview of a PDF, document, or website in your app? Setting up Puppeteer, LibreOffice, and ffmpeg is painful. Here's a simpler way.

The problem

You have a list of file URLs — PDFs, DOCX, PPTX, videos, websites — and you want to show thumbnails. The usual approach:

  • Spin up a headless browser for website screenshots
  • Install LibreOffice for document rendering
  • Use ffmpeg for video thumbnails
  • Handle caching, rate limiting, error handling...

That's a lot of infrastructure for thumbnails.

The solution

Prepend preview.thedrive.ai/ to any URL. That's it.

<img src="https://preview.thedrive.ai/arxiv.org/pdf/1706.03762" />
Enter fullscreen mode Exit fullscreen mode

This returns a JPEG thumbnail of the first page of that PDF. Works with 67+ file formats.

Examples

PDF preview:

PDF preview

<img src="https://preview.thedrive.ai/arxiv.org/pdf/1706.03762" />
Enter fullscreen mode Exit fullscreen mode

Website screenshot:

Website preview

<img src="https://preview.thedrive.ai/https://dev.to/" />
Enter fullscreen mode Exit fullscreen mode

PowerPoint thumbnail:

PPTX preview

<img src="https://preview.thedrive.ai/example.com/slides.pptx" />
Enter fullscreen mode Exit fullscreen mode

Using with Next.js 

import Image from 'next/image'
import Link from 'next/link'

<Link href="https://example.com/report.pdf">
  <Image
    src="https://preview.thedrive.ai/example.com/report.pdf"
    alt="preview"
    width={600}
    height={400}
  />
</Link>
Enter fullscreen mode Exit fullscreen mode

Custom dimensions and quality 

// 800x600 at 90% quality
preview.thedrive.ai/example.com/doc.pdf?w=800&h=600&q=90

// Skip cache for fresh render
preview.thedrive.ai/example.com/doc.pdf?nocache=true
Enter fullscreen mode Exit fullscreen mode

What it supports

  • Documents: PDF, DOCX, PPTX, XLSX, ODT, RTF
  • Images: JPG, PNG, GIF, WebP, SVG, AVIF, HEIC
  • Video: MP4, MOV, WebM, AVI, MKV
  • Code: 30+ languages with syntax highlighting
  • Markdown with formatted rendering
  • Any website via headless browser screenshot

67+ formats total. Returns a JPEG thumbnail every time.

Social media previews for free

When you share a preview.thedrive.ai link on Discord, Slack, or Twitter, it automatically generates rich preview cards with OG tags. No extra configuration needed.

API details

  • Free tier: 30 requests/min, no API key, no signup
  • Pro tier: 120 requests/min with SLA ($19/mo)
  • Default output: 600x400 JPEG, quality 95
  • Caching: 24-hour server cache + 7-day browser cache

Use cases

  • File managers showing document thumbnails
  • CMS/blog editors with link preview cards
  • Search results with visual thumbnails
  • Chat apps embedding file previews
  • Emails with inline document previews (<img> tags work in email)

Try it out: preview.thedrive.ai

Top comments (0)