🖼️ Lychee Embed Widget - Interactive Demo

Test the embed widget with your own Lychee instance

About Embed Modes

📁 Album Mode

What it does: Embeds photos from a specific album on your website.

When to use: When you want to showcase a particular album (vacation photos, portfolio, event coverage, etc.)

Requirements: Album must be public (no password, not link-only)

🌊 Stream Mode

What it does: Embeds all your public photos in chronological order (most recent first)

When to use: When you want a dynamic feed of all your public uploads (similar to an RSS feed)

Requirements: Photos must be in public albums

⚠️ Note: Only photos from public albums (no password protection, not link-required) will appear in both modes. NSFW filtering respects your RSS settings.

Configuration

Lychee API URL *

Embed Mode

Album ID *

Layout

Header Placement

Spacing (px)

Max Photos

Target Row Height (px)

Target Column Width (px)

Show Album Title

Show Album Description

Show Photo Captions

Show EXIF Data

Configure your Lychee instance above and click "Load Widget" to see the embed in action.

Code Examples

Copy these examples to embed the widget on your website:

Album Mode Example

Embed a specific album:

<!-- Include CSS -->
<link rel="stylesheet" href="https://your-lychee.com/embed/lychee-embed.css">

<!-- Widget container -->
<div id="lychee-embed"></div>

<!-- Include JS -->
<script src="https://your-lychee.com/embed/lychee-embed.js"></script>
<script>
  new LycheeEmbed.createLycheeEmbed(
    document.getElementById('lychee-embed'),
    {
      apiUrl: 'https://your-lychee.com',
      mode: 'album',
      albumId: 'YOUR_ALBUM_ID',
      layout: 'justified',
      maxPhotos: 18
    }
  );
</script>

Stream Mode Example

Embed all public photos as a stream:

<!-- Include CSS -->
<link rel="stylesheet" href="https://your-lychee.com/embed/lychee-embed.css">

<!-- Widget container -->
<div id="lychee-stream"></div>

<!-- Include JS -->
<script src="https://your-lychee.com/embed/lychee-embed.js"></script>
<script>
  new LycheeEmbed.createLycheeEmbed(
    document.getElementById('lychee-stream'),
    {
      apiUrl: 'https://your-lychee.com',
      mode: 'stream',
      layout: 'justified',
      maxPhotos: 50
    }
  );
</script>

Using Data Attributes

Alternatively, configure using HTML data attributes:

<!-- Album Mode -->
<div data-lychee-embed
     data-api-url="https://your-lychee.com"
     data-mode="album"
     data-album-id="YOUR_ALBUM_ID"
     data-layout="justified"
     data-max-photos="18">
</div>

<!-- Stream Mode -->
<div data-lychee-embed
     data-api-url="https://your-lychee.com"
     data-mode="stream"
     data-layout="masonry"
     data-max-photos="50">
</div>