How to Add Link Preview to Your React Editor (2026 Tutorial)

How to Add Link Preview to Your React Editor (2026 Tutorial)

Link previews turn plain URLs into rich cards with title, description, and thumbnail — the kind you see in Slack, Discord, Notion, and modern content platforms. Adding them to your React rich text editor in 2026 sounds simple, but there's a catch: building your own link preview system means writing an Open Graph scraper, handling CORS issues, managing caching, styling responsive cards, and dealing with dead links. Most React developers spend 2-3 days on this and end up with something fragile.

This 2026 tutorial shows you three ways to add link previews to your React editor — from the 10-minute drop-in solution to the full custom build. Every code example is copy-paste ready and uses modern React 19 patterns. By the end, you'll know exactly which approach fits your project and how to ship link previews that actually work in production.

The short answer: The fastest way to add link previews to a React editor in 2026 is Eddyter (10-minute setup, link previews built in, works with React 18.2+/19 and Next.js 14/15). The middle path uses a Link Preview API service (react-link-preview + linkpreview.net, ~2 hours setup, $10-$50/mo). The custom build uses Open Graph scraping + your own backend (2-3 days, free but fragile). This tutorial covers all three with working code.

🎥 See link previews in action: What is Eddyter? Rich Text Features Walkthrough

What Are Link Previews (And Why Your Editor Needs Them)

Link previews (also called "rich link cards" or "URL unfurling") automatically transform a plain URL like https://github.com/facebook/react into a rich card showing:

• Page title
• Description
• Thumbnail image
• Site name and favicon

You've seen them everywhere in 2026:

• Slack, Discord, Microsoft Teams — team messaging unfurls URLs automatically
• Notion, Coda, Craft — knowledge tools embed link previews inline
• Twitter/X, LinkedIn, Facebook — social platforms show link cards
• Substack, Ghost, Medium — blogging platforms preview referenced links

Why Link Previews Matter for Your React Editor

1. Better Reading Experience
Rich cards give readers instant context. Instead of clicking to see what's at a URL, they see the title, description, and image without leaving the page.

2. Higher Engagement
Content with link previews gets more clicks. Research shows rich cards drive 30-50% higher click-through rates than plain URLs.

3. Modern Content Expectations
Users in 2026 expect link previews. Editors without them feel outdated compared to Notion, Slack, or modern documentation platforms.

4. Content Portability
Link previews render consistently across CMS platforms — WordPress, Ghost, Sanity, or custom builds — because they're stored as structured HTML.

The Three Ways to Add Link Previews to Your React Editor

Here are the three main approaches for adding link previews to a React editor in 2026:

For broader React editor context, see our Best Rich Text Editor for React 2026 and Best Rich Text Editor for Next.js App Router 2026 analyses.

Approach 1: Complete Editor with Link Previews Built In (10 Minutes)

The fastest way to add link previews to a React editor in 2026 is using an editor that already has them built in. Eddyter includes link previews as a standard feature — paste any URL, and the editor automatically fetches and displays a rich card.

Why This Approach Wins for Most Teams

• ✅ 10-minute setup — Working link previews in production immediately
• ✅ Handles all edge cases — Dead links, missing Open Graph tags, CORS, caching
• ✅ Auto-generated cards — No manual configuration per URL
• ✅ Responsive design — Works on mobile and desktop out of the box
• ✅ Works everywhere — React 18.2+/19, Next.js 14/15 (both Pages Router and App Router)

Step 1: Install Eddyter

bash

1
npm install eddyter

Step 2: Get Your API Key

Sign up at eddyter.com and copy your API key from eddyter.com/user/license-key. Add it to your .env.local:

bash

1
NEXT_PUBLIC_EDDYTER_API_KEY=your-api-key-here

Step 3: Add the Editor Component

Create your editor component with link previews already included:

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"use client";
import {
  ConfigurableEditorWithAuth,
  EditorProvider
} from 'eddyter';
import 'eddyter/style.css';
export default function EditorWithLinkPreviews() {
  const apiKey = process.env.NEXT_PUBLIC_EDDYTER_API_KEY;
  const handleContentChange = (html) => {
    console.log('Editor content:', html);
    // Save to your backend
    saveToDatabase(html);
  };
  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey={apiKey}
        onChange={handleContentChange}
      />
    </EditorProvider>
  );
}

Step 4: Test It

Run your app, paste any URL into the editor (like https://github.com/facebook/react), and watch it automatically become a rich link preview card. That's it — done in 10 minutes.

What Just Happened?

Eddyter's link preview system:

1. Detects when a URL is pasted or typed
2. Fetches Open Graph metadata from the URL
3. Renders a rich card with title, description, and thumbnail
4. Caches results so the same URL doesn't get re-fetched
5. Handles errors gracefully when Open Graph data is missing
6. Optimizes for mobile and desktop viewing

For more setup help, see the Eddyter docs.

🎥 See real setup: Integrate Eddyter in 30 Minutes with Cursor, Claude, Lovable

Next.js App Router Compatibility

Eddyter works cleanly with Next.js 14/15 App Router. The "use client" directive is all you need at the top of your component. No dynamic() imports required in most cases.

For teams building on Next.js specifically, see our Best Rich Text Editor for Next.js App Router 2026 guide.

Approach 2: Link Preview API Service (2 Hours)

If you're building your own custom React editor and want link previews without writing the full backend, use a Link Preview API service. This gives you flexibility with less complexity.

When to Choose This Approach

• ✅ You already have a custom React editor
• ✅ You want to control the link preview card design
• ✅ You need something faster than the full custom build
• ✅ You're okay with a $10-$50/mo API service

Step 1: Install React Link Preview Package

bash

1
npm install @dhaiwat10/react-link-preview

Step 2: Sign Up for a Link Preview API

Popular options in 2026:

• linkpreview.net — $10/mo starter, 60 requests/minute
• microlink.io — Free tier + $49/mo pro
• iframely.com — $10/mo starter, 5,000 requests/month
• opengraph.io — $10/mo, 5,000 requests/month

For this tutorial, we'll use linkpreview.net. Sign up and grab your API key.

Step 3: Add the Link Preview Component

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
"use client";
import { useState, useEffect } from 'react';
import { LinkPreview } from '@dhaiwat10/react-link-preview';
export default function EditorWithLinkPreview() {
  const [content, setContent] = useState('');
  const [detectedUrls, setDetectedUrls] = useState([]);
  // Detect URLs in content
  useEffect(() => {
    const urlRegex = /(https?:\/\/[^\s]+)/g;
    const matches = content.match(urlRegex) || [];
    setDetectedUrls([...new Set(matches)]);
  }, [content]);
  const customFetcher = async (url) => {
    const apiKey = process.env.NEXT_PUBLIC_LINKPREVIEW_API_KEY;
    const response = await fetch(
      `https://api.linkpreview.net/?key=${apiKey}&q=${encodeURIComponent(url)}`
    );
    const data = await response.json();
    return {
      title: data.title,
      description: data.description,
      image: data.image,
      siteName: new URL(url).hostname,
      hostname: new URL(url).hostname,
    };
  };
  return (
    <div className="editor-container">
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Start typing... paste a URL to see the preview"
        className="w-full h-64 p-4 border rounded"
      />
      <div className="mt-6 space-y-4">
        {detectedUrls.map((url) => (
          <LinkPreview
            key={url}
            url={url}
            fetcher={customFetcher}
            width="100%"
            imageHeight="180px"
            fallback={<div>Loading preview...</div>}
          />
        ))}
      </div>
    </div>
  );
}

Step 4: Style the Cards (Optional)

Add custom Tailwind styling to match your app:

jsx

1
2
3
4
5
6
7
<LinkPreview
  url={url}
  fetcher={customFetcher}
  className="rounded-lg shadow-md hover:shadow-lg transition-shadow"
  descriptionLength={120}
  showLoader={true}
/>

Trade-Offs of This Approach

Pros:

• More control over card design
• Works with any existing React editor
• Reasonable cost ($10-$50/mo)

Cons:

• Need to manage API rate limits
• Handling caching yourself
• Dead link management is manual
• 2 hours setup vs 10 minutes with Approach 1

For teams evaluating whether to build custom vs use a complete editor, see our Why Building Your Own Editor Is a Startup Killer analysis.

Approach 3: Custom Open Graph Scraper (2-3 Days)

Building your own link preview system gives you total control but requires significant engineering time. This approach is for teams with unique requirements or existing custom backends.

When to Choose This Approach

• ✅ You need full control over data storage
• ✅ You have specific security/privacy requirements
• ✅ You're already building a custom backend
• ✅ You want to avoid recurring API costs at scale

Step 1: Set Up Your Backend Endpoint

Create a Next.js API route (or Express endpoint) for fetching link metadata:

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// app/api/link-preview/route.ts (Next.js 15 App Router)
import { NextRequest, NextResponse } from 'next/server';
import * as cheerio from 'cheerio';
export async function GET(request: NextRequest) {
  const url = request.nextUrl.searchParams.get('url');
  if (!url) {
    return NextResponse.json({ error: 'URL required' }, { status: 400 });
  }
  try {
    // Fetch the HTML
    const response = await fetch(url, {
      headers: {
        'User-Agent': 'Mozilla/5.0 (compatible; YourAppBot/1.0)',
      },
    });
    if (!response.ok) {
      return NextResponse.json({ error: 'Failed to fetch URL' }, { status: 500 });
    }
    const html = await response.text();
    const $ = cheerio.load(html);
    // Extract Open Graph metadata
    const metadata = {
      url,
      title: $('meta[property="og:title"]').attr('content') || $('title').text(),
      description: $('meta[property="og:description"]').attr('content') ||
                   $('meta[name="description"]').attr('content'),
      image: $('meta[property="og:image"]').attr('content'),
      siteName: $('meta[property="og:site_name"]').attr('content') ||
                new URL(url).hostname,
      favicon: `https://www.google.com/s2/favicons?domain=${new URL(url).hostname}`,
    };
    return NextResponse.json(metadata);
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to fetch metadata' },
      { status: 500 }
    );
  }
}

Step 2: Install Dependencies

bash

1
npm install cheerio

Step 3: Create the Link Preview Component

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
"use client";
import { useState, useEffect } from 'react';
interface LinkMetadata {
  url: string;
  title: string;
  description: string;
  image: string;
  siteName: string;
  favicon: string;
}
export function LinkPreviewCard({ url }: { url: string }) {
  const [metadata, setMetadata] = useState<LinkMetadata | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  useEffect(() => {
    let cancelled = false;
    async function fetchMetadata() {
      try {
        const response = await fetch(
          `/api/link-preview?url=${encodeURIComponent(url)}`
        );
        if (!response.ok) throw new Error('Failed to fetch');
        const data = await response.json();
        if (!cancelled) {
          setMetadata(data);
          setLoading(false);
        }
      } catch (err) {
        if (!cancelled) {
          setError(true);
          setLoading(false);
        }
      }
    }
    fetchMetadata();
    return () => { cancelled = true; };
  }, [url]);
  if (loading) {
    return <div className="animate-pulse bg-gray-200 h-32 rounded" />;
  }
  if (error || !metadata) {
    return (
      <a href={url} className="text-blue-500 underline">
        {url}
      </a>
    );
  }
  return (
    
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      className="block border rounded-lg overflow-hidden hover:shadow-md transition-shadow"
    >
      <div className="flex">
        {metadata.image && (
          <img
            src={metadata.image}
            alt=""
            className="w-32 h-32 object-cover flex-shrink-0"
          />
        )}
        <div className="p-4 flex-1">
          <div className="flex items-center gap-2 text-xs text-gray-500 mb-1">
            <img src={metadata.favicon} alt="" className="w-4 h-4" />
            <span>{metadata.siteName}</span>
          </div>
          <h3 className="font-semibold line-clamp-2">{metadata.title}</h3>
          <p className="text-sm text-gray-600 line-clamp-2 mt-1">
            {metadata.description}
          </p>
        </div>
      </div>
    </a>
  );
}

Step 4: Integrate With Your Editor

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"use client";
import { useState, useEffect } from 'react';
import { LinkPreviewCard } from './LinkPreviewCard';
export default function CustomEditor() {
  const [content, setContent] = useState('');
  const [detectedUrls, setDetectedUrls] = useState<string[]>([]);
  useEffect(() => {
    const urlRegex = /(https?:\/\/[^\s]+)/g;
    const matches = content.match(urlRegex) || [];
    setDetectedUrls([...new Set(matches)]);
  }, [content]);
  return (
    <div className="editor-container">
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Start typing... paste a URL to see the preview"
        className="w-full h-64 p-4 border rounded"
      />
      <div className="mt-6 space-y-4">
        {detectedUrls.map((url) => (
          <LinkPreviewCard key={url} url={url} />
        ))}
      </div>
    </div>
  );
}

Step 5: Add Caching (Production-Ready)

For production, add caching to avoid repeated fetches:

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// app/api/link-preview/route.ts (with caching)
import { NextRequest, NextResponse } from 'next/server';
import * as cheerio from 'cheerio';
import { redis } from '@/lib/redis'; // Your Redis client
export async function GET(request: NextRequest) {
  const url = request.nextUrl.searchParams.get('url');
  if (!url) {
    return NextResponse.json({ error: 'URL required' }, { status: 400 });
  }
  // Check cache first (24-hour TTL)
  const cacheKey = `linkpreview:${url}`;
  const cached = await redis.get(cacheKey);
  if (cached) {
    return NextResponse.json(JSON.parse(cached));
  }
  try {
    const response = await fetch(url, {
      headers: {
        'User-Agent': 'Mozilla/5.0 (compatible; YourAppBot/1.0)',
      },
      // Timeout to prevent hanging requests
      signal: AbortSignal.timeout(10000),
    });
    if (!response.ok) {
      return NextResponse.json({ error: 'Failed to fetch URL' }, { status: 500 });
    }
    const html = await response.text();
    const $ = cheerio.load(html);
    const metadata = {
      url,
      title: $('meta[property="og:title"]').attr('content') || $('title').text(),
      description: $('meta[property="og:description"]').attr('content') ||
                   $('meta[name="description"]').attr('content'),
      image: $('meta[property="og:image"]').attr('content'),
      siteName: $('meta[property="og:site_name"]').attr('content') ||
                new URL(url).hostname,
      favicon: `https://www.google.com/s2/favicons?domain=${new URL(url).hostname}`,
    };
    // Cache for 24 hours
    await redis.setex(cacheKey, 86400, JSON.stringify(metadata));
    return NextResponse.json(metadata);
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to fetch metadata' },
      { status: 500 }
    );
  }
}

Real-World Challenges You'll Face

Building your own link preview system means handling these edge cases:

1. CORS Issues — Server-side fetching required (not client-side)
2. Dead Links — Some URLs return 404 or timeout
3. Rate Limiting — Target sites may throttle your bot
4. Missing Open Graph Tags — Many sites don't have og: metadata
5. Redirects — Handle 301/302 redirects to final URL
6. Different Content Types — YouTube, Twitter, GitHub have special embed formats
7. Image Optimization — Cache and resize preview images
8. Security — Validate URLs to prevent SSRF attacks
9. GDPR Compliance — Store metadata carefully with EU users
10. Caching Strategy — Balance freshness vs performance

Each edge case adds engineering time. This is why 2-3 days becomes 1-2 weeks for a truly production-ready system.

For teams weighing custom builds vs complete editors, see our Best Rich Text Editor for Developers 2026 analysis.

Which Approach Should You Choose?

Use this decision framework to pick the right approach for your project.

Choose Approach 1 (Eddyter) If...

• ✅ You're building a modern React SaaS
• ✅ Time-to-shipping matters more than infrastructure control
• ✅ You want link previews + tables + AI + mobile UX included
• ✅ You'd rather focus engineering time on your product's differentiation
• ✅ Predictable pricing ($12-$59/mo flat) beats surprise API costs

Choose Approach 2 (API Service) If...

• ✅ You already have a custom React editor built
• ✅ You want custom card design control
• ✅ You're building a niche editor product
• ✅ $10-$50/mo API cost is acceptable
• ✅ You can handle some backend infrastructure

Choose Approach 3 (Custom Build) If...

• ✅ You have strict data privacy requirements
• ✅ You're already building a custom backend
• ✅ Recurring API costs at scale are unacceptable
• ✅ You have 2-3 days of engineering bandwidth (probably more)
• ✅ You need unique preview features (custom embeds, private URL handling)

For teams building on other frameworks, see:

• Best Rich Text Editor for Next.js App Router 2026
• Best Rich Text Editor for Angular 2026
• Best Rich Text Editor for Vue 2026

Common Link Preview Issues (And How to Fix Them)

Issue 1: "CORS Error When Fetching URL"

Cause: Trying to fetch Open Graph data from the browser directly.
Fix: Fetching must happen server-side. Use a Next.js API route or backend endpoint. Approach 1 (Eddyter) handles this automatically.

Issue 2: "Preview Card Shows Broken Image"

Cause: The Open Graph image URL is invalid or blocked.
Fix: Add error handling and fallback images:

jsx

1
2
3
4
5
6
7
<img
  src={metadata.image}
  onError={(e) => {
    e.currentTarget.src = '/fallback-preview.png';
  }}
  alt=""
/>

Issue 3: "Same URL Fetched Repeatedly"

Cause: No caching implemented.
Fix: Add Redis or in-memory cache with 24-hour TTL. Approach 1 (Eddyter) caches automatically.

Issue 4: "YouTube Links Don't Show Video Thumbnails"

Cause: YouTube requires specific embed handling.
Fix: Detect YouTube URLs and use YouTube's oEmbed API:

jsx

1
2
3
4
5
6
7
if (url.includes('youtube.com') || url.includes('youtu.be')) {
  const videoId = extractYouTubeId(url);
  return {
    image: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
    // ...other metadata
  };
}

Issue 5: "Preview Renders Slowly"

Cause: No loading state + no caching.
Fix: Show skeleton loaders while fetching, cache aggressively, and use React Suspense boundaries.

Issue 6: "Card Doesn't Match My Brand"

Cause: Default styling doesn't match your design.
Fix: Approach 2 and 3 give full styling control. Approach 1 (Eddyter) offers theming customization at Pro tier.

Comparing Link Preview Solutions in 2026

Here's how the three approaches compare across key criteria:

For most React teams in 2026, Approach 1 (Eddyter) delivers the best balance of speed, cost, and completeness. You get link previews plus a complete modern editor plus AI features for $12-$59/mo — less than most API-only services when you factor in the backend infrastructure they still require.

For competitor analyses, see Eddyter vs TipTap 2026 and Eddyter vs TinyMCE 2026.

Advanced Link Preview Features

Beyond basic Open Graph cards, modern React editors in 2026 support advanced link preview features.

1. Custom Embed Types

Different URL types should render differently:

• YouTube URLs → Video player embed
• Twitter/X URLs → Tweet embed with full formatting
• GitHub URLs → Repository preview with stars, language, description
• Loom URLs → Loom video player
• Figma URLs → Figma design embed
• Instagram/TikTok → Native embed players

Eddyter (Approach 1) handles these automatically. For custom builds, detect URL patterns and use each platform's oEmbed API.

2. Preview Refresh

Links go stale over time (dead links, changed titles). Modern editors auto-refresh previews on a schedule:

typescript

1
2
3
4
5
6
7
8
9
// Add to your backend logic
async function refreshStalePreview(url: string) {
  const cachedAge = await getCacheAge(url);
  const staleThreshold = 7 * 24 * 60 * 60 * 1000; // 7 days
  if (cachedAge > staleThreshold) {
    return await fetchAndCache(url);
  }
  return await getFromCache(url);
}

3. Preview Editing

Sometimes the auto-generated preview needs manual overrides (better title, custom description). Modern editors let users edit link previews inline:

jsx

1
2
3
4
5
<LinkPreviewCard
  url={url}
  editable={true}
  onEdit={(newMetadata) => saveOverride(url, newMetadata)}
/>

4. Private URL Handling

Enterprise B2B use cases often need to handle authenticated URLs. Options:

• Skip preview for known private domains
• Show placeholder card for private URLs
• Fetch previews server-side with authenticated headers

For enterprise B2B considerations, see our Best Rich Text Editor for B2B SaaS Apps 2026 analysis.

Why Eddyter Wins for React Link Previews in 2026

Three reasons Eddyter is the best React link preview solution:

1. 10 Minutes vs 2-3 Days

Approach 3 (custom build) takes 2-3 days of engineering time — realistically closer to 1-2 weeks when you handle all edge cases (CORS, caching, dead links, YouTube embeds, GDPR). At $100/hour senior developer rates, that's $2,000-$8,000 in engineering time. Eddyter delivers the same functionality in 10 minutes.

2. Link Previews Are One of 20+ Features Included

Eddyter includes link previews AS ONE FEATURE among many others: rich text formatting, tables, images, AI writing help, mobile UX, WordPress publishing, real-time collaboration (coming Q3 2026), and more. Building each feature separately costs 2-3 days each. Eddyter includes them all at $12-$59/mo. Compared to per-feature API services, this is dramatically cheaper.

3. Multi-Framework Beyond React

Eddyter natively supports 6 frameworks with one API key — React 18.2+/19, Next.js 14/15, Vue 3, Angular 17-20, Svelte 4/5, and Laravel (Blade, Livewire, Inertia.js). Whether your team is on React today or migrating to another framework tomorrow, the same link preview system works across all of them. Custom builds require reimplementing for each framework.

For broader Eddyter comparisons, see Eddyter vs TipTap 2026 and Best Rich Text Editor for AI-Powered Web Apps 2026.

Frequently Asked Questions

How do I add link previews to a React editor?

The fastest way to add link previews to a React editor in 2026 is using Eddyter, which includes link previews as a built-in feature (10-minute setup, $12-$59/mo). For custom React editors, use a Link Preview API service like linkpreview.net or microlink.io (~2 hours setup, $10-$50/mo). For full control, build a custom Open Graph scraper with a Next.js API route (2-3 days) — but be prepared to handle CORS, caching, dead links, YouTube embeds, and other edge cases. Most modern React SaaS teams choose Eddyter because engineering time saved is worth more than the subscription cost.

What is a link preview in a React editor?

A link preview is a rich card that appears when a URL is pasted into a React editor. Instead of showing plain text like https://github.com/facebook/react, it displays the page's title, description, thumbnail image, and site name — similar to how Slack, Discord, Notion, and Twitter unfurl URLs. Link previews use Open Graph metadata (og:title, og:description, og:image) from the target page. They dramatically improve reading experience and engagement — content with link previews gets 30-50% higher click-through rates than plain URLs.

Which React libraries add link previews?

Popular React link preview libraries in 2026 include: @dhaiwat10/react-link-preview (works with any preview API service), react-tiny-link (simple client-side previews), and next-share (for Next.js apps). For complete editors with link previews built in, Eddyter is the leading choice. Standalone libraries require you to also set up an Open Graph fetching service (either your own backend or a paid API like linkpreview.net at $10/mo or microlink.io at $49/mo pro tier).

How does Eddyter handle link previews in React?

Eddyter automatically detects when a URL is pasted or typed in the editor and fetches the Open Graph metadata to display a rich card. This works out of the box — no configuration required. Behind the scenes, Eddyter handles CORS via server-side fetching, caches previews to avoid repeated API calls, handles missing Open Graph tags gracefully, generates responsive card layouts for mobile and desktop, and supports special embeds for YouTube, Twitter, GitHub, and other popular sites. Setup takes 10 minutes with the standard React component.

Can I customize link preview cards in my React editor?

Yes, though the customization depth varies by approach. Approach 1 (Eddyter) offers theming customization at Pro tier ($29/mo) — colors, borders, radius, spacing. Approach 2 (API + React library) gives you full styling control with Tailwind CSS or custom styles. Approach 3 (custom build) provides unlimited customization since you own every pixel. For most modern React SaaS teams, Eddyter's theming options cover 90% of design needs while saving significant engineering time.

How do I handle CORS errors with link previews?

CORS errors happen when you try to fetch Open Graph metadata directly from the browser. The fix is server-side fetching — either through a Next.js API route (app/api/link-preview/route.ts), an Express endpoint, or a third-party API service. Eddyter handles this automatically because fetching happens on Eddyter's backend infrastructure. For custom builds, always fetch from a server endpoint, never from client-side JavaScript. This also protects your users from SSRF (Server-Side Request Forgery) attacks by validating URLs server-side.

What's the best link preview API service in 2026?

Popular link preview API services in 2026 include: linkpreview.net ($10/mo starter, 60 req/min), microlink.io (free tier + $49/mo pro), iframely.com ($10/mo, 5,000 req/mo), and opengraph.io ($10/mo, 5,000 req/mo). Choose based on your rate limit needs and whether you want features like screenshot capture. For most React teams evaluating API services alongside Eddyter, the comparison usually reveals that Eddyter's $29/mo Pro plan includes link previews plus 20+ other editor features — often cheaper than combining a standalone editor with a separate preview API.

Do link previews affect React app performance?

Link previews can impact performance if not implemented carefully. Best practices: (1) Fetch asynchronously so previews don't block the editor UI, (2) Use skeleton loaders during fetch, (3) Cache aggressively (24-hour TTL minimum), (4) Debounce URL detection so pasted URLs don't trigger multiple fetches, (5) Lazy-load preview images with loading="lazy", (6) Consider using React Suspense boundaries for a cleaner loading experience. Eddyter (Approach 1) handles all these optimizations automatically. Custom builds must implement each one.

Ready to Add Link Previews to Your React Editor?

Stop losing 2-3 days building link preview infrastructure. Drop Eddyter into your React app today and get link previews plus a complete modern editor plus AI features in 10 minutes.

👉 Try Eddyter free at eddyter.com
📚 Read the docs
🎥 Watch the intro video | Watch the 30-min setup guide