discord.js-html-transcript

Generate pixel-perfect, native-looking Discord HTML transcripts.

📖 Official Documentation • 🖥️ Live Demo

Installation • Quick Start • Configuration • API Reference

---

✨ What's New in v4

This package is a completely modernized fork of discord-html-transcripts by ItzDerock, rebuilt from the ground up with a native Discord UI that is indistinguishable from the real thing.

🆕 New Features

Feature	Description
🔀 Forwarded Messages	Full support for Discord's forwarded message format with origin info
🎙️ Voice Messages	Waveform visualization with play button, duration, and speed controls
📊 Polls / Voting	Native poll rendering with answer options, vote counts, and progress bars
🏷️ Server Tags	APP badges, role icons, and server tag badges on user profiles
🔘 Buttons & Select Menus	Primary, secondary, success, danger, and link button styles + dropdown menus
🔗 Invite Link Previews	Rich invite cards with server icon, member counts, and join button
🖼️ Image Preview Lightbox	Click any image to open a full-screen lightbox overlay
🔍 Message Search	Built-in search bar to find messages within transcripts
🧵 Thread Previews	Thread starter messages with preview boxes and participant info
📎 File Attachments	Native-styled file attachment cards with download buttons
🎨 ANSI Code Blocks	Full ANSI escape sequence rendering with colors and formatting
📱 Fully Responsive	Mobile-first responsive design that works perfectly on all screen sizes
📌 Sticky Header	Channel header stays visible while scrolling, just like Discord
⚙️ Configurable Features	Toggle search, image preview, spoiler reveal, and more on/off
💾 Granular Asset Saving	Fine-grained control over which remote assets (images, avatars, emojis, etc.) are preserved

🎨 UI Improvements

• Redesigned button and select menu components matching Discord's current design
• Modern dark theme background (#070709) matching native Discord
• Improved embed border styling with subtle transparency
• Enhanced markdown rendering (headings, lists, block quotes, code blocks)
• Responsive image galleries with multi-image grid layouts
• Native vote/poll UI with interactive styling
• Voice message capsule with amplitude-proportional waveform bars
• Custom file attachment cards with file type icons

---

📦 Installation

# npm
npm install discord.js-html-transcript

# pnpm
pnpm add discord.js-html-transcript

# yarn
yarn add discord.js-html-transcript

Requirements: Node.js 16+ and discord.js v14 or v15

---

🛠️ Get Started

Using the built-in message fetcher

const discordTranscripts = require('discord.js-html-transcript');

const channel = message.channel;

const attachment = await discordTranscripts.createTranscript(channel);

channel.send({
  files: [attachment],
});

Using your own messages

const discordTranscripts = require('discord.js-html-transcript');

const messages = await channel.messages.fetch({ limit: 100 });

const attachment = await discordTranscripts.generateFromMessages(messages, channel);

channel.send({
  files: [attachment],
});

TypeScript

import * as discordTranscripts from 'discord.js-html-transcript';

const attachment = await discordTranscripts.createTranscript(channel, {
  returnType: discordTranscripts.ExportReturnType.Attachment,
  filename: `transcript-${channel.id}.html`,
});

---

⚙️ Configuration

Both createTranscript and generateFromMessages accept an options object. All options are optional - sensible defaults are used when omitted.

const attachment = await discordTranscripts.createTranscript(channel, {
  // ── Output ────────────────────────────────────────────────
  returnType: 'attachment',       // 'buffer' | 'string' | 'attachment'
  filename: 'transcript.html',   // output filename (when returnType is 'attachment')

  // ── Message Fetching (createTranscript only) ──────────────
  limit: -1,                     // max messages to fetch (-1 = all)
  filter: (message) => true,     // filter which messages to include

  // ── Asset Preservation ────────────────────────────────────
  saveImages: false,             // legacy: save image attachments as data URIs
  saveAssets: false,             // save ALL remote assets as data URIs
  assets: {
    attachments: false,          // images, videos, audio, and files
    embeds: false,               // embed media + author/footer icons
    components: false,           // media gallery items, thumbnails, component files
    avatars: false,              // user avatars
    emojis: false,               // custom emoji + twemoji assets
    guildIcons: false,           // header + favicon guild icon
    inviteIcons: false,          // invite preview server icons
    roleIcons: false,            // highest-role icon images
    serverTagBadges: false,      // server tag badge images
  },

  // ── Feature Toggles ───────────────────────────────────────
  features: {
    search: true,                // built-in message search UI
    imagePreview: true,          // click-to-open image lightbox
    spoilerReveal: true,         // click spoilers to reveal
    messageLinks: true,          // reply click-to-scroll behavior
    profileBadges: true,         // APP badges, server tags, role icons
    embedTweaks: true,           // client-side embed border/style fixes
  },

  // ── Appearance ────────────────────────────────────────────
  footerText: 'Exported {number} message{s}.',
  poweredBy: true,               // show "Powered by" footer credit
  favicon: 'guild',             // 'guild' or a custom URL string
  hydrate: false,                // server-side hydrate the HTML

  // ── Callbacks ─────────────────────────────────────────────
  callbacks: {
    resolveChannel: (channelId) => channel.client.channels.fetch(channelId),
    resolveUser:    (userId)    => channel.client.users.fetch(userId),
    resolveRole:    (roleId)    => channel.guild?.roles.fetch(roleId),
    resolveInvite:  (code)      => /* return { name, icon, online, members, url } */,
    resolveImageSrc: (attachment, message) => /* return data URI or URL */,
    resolveAssetSrc: (asset)    => /* return data URI or URL */,
  },
});

Image Compression

Install sharp as a dev dependency to enable image compression:

npm install sharp --save-dev

const { TranscriptImageDownloader } = require('discord.js-html-transcript');

const attachment = await discordTranscripts.createTranscript(channel, {
  callbacks: {
    resolveImageSrc: new TranscriptImageDownloader()
      .withMaxSize(5120) // 5MB max per image (in KB)
      .withCompression(40, true) // 40% quality, convert to webp
      .build(),
  },
});

Saving All Assets (Offline Transcripts)

For transcripts that survive Discord CDN expiration:

const { TranscriptAssetDownloader } = require('discord.js-html-transcript');

const attachment = await discordTranscripts.createTranscript(channel, {
  saveAssets: true,
  // Or for fine-grained control:
  assets: {
    attachments: true,
    embeds: true,
    avatars: true,
    emojis: true,
    guildIcons: true,
  },
  callbacks: {
    resolveAssetSrc: new TranscriptAssetDownloader()
      .withMaxSize(10240) // 10MB per asset
      .build(),
  },
});

---

🖼️ Preview

Messages & Attachments

Normal Image	Multi Images	File Attachment

Forwarded Messages & Reactions

Forwarded Image	Forwarded + Reactions

Polls, Threads & Mentions

Poll	Thread	Mentions

Buttons, Select Menus & Slash Commands

Buttons & Select Menu	Slash Command & Voice

Embeds

Embed 1	Embed 2	Embed 3

Links & Invites

Links	Invite Preview

Markdown Formatting

Basic Formatting	Code Blocks	Headings

Block Quotes	Lists	ANSI Styling

---

📚 API Reference

createTranscript(channel, options?)

Fetches messages from a channel and generates an HTML transcript.

Parameter	Type	Description
channel	TextBasedChannel	The channel to export
options	CreateTranscriptOptions	Configuration options (see above)

Returns: Promise<AttachmentBuilder | Buffer | string>

const transcript = await discordTranscripts.createTranscript(channel, {
  limit: 500,
  filter: (msg) => !msg.author.bot,
  returnType: 'attachment',
});

---

generateFromMessages(messages, channel, options?)

Generates a transcript from a pre-fetched array of messages.

Parameter	Type	Description
messages	Message[] | Collection<string, Message>	Messages to include
channel	Channel	Channel for header/guild info
options	GenerateFromMessagesOptions	Configuration options (see above)

Returns: Promise<AttachmentBuilder | Buffer | string>

const messages = await channel.messages.fetch({ limit: 100 });
const transcript = await discordTranscripts.generateFromMessages(messages, channel);

---

Return Types

Use the ExportReturnType enum for type-safe return values:

import { ExportReturnType } from 'discord.js-html-transcript';

// Returns a Buffer
const buffer = await discordTranscripts.createTranscript(channel, {
  returnType: ExportReturnType.Buffer,
});

// Returns a string
const html = await discordTranscripts.createTranscript(channel, {
  returnType: ExportReturnType.String,
});

// Returns an AttachmentBuilder (default)
const attachment = await discordTranscripts.createTranscript(channel, {
  returnType: ExportReturnType.Attachment,
});

---

Asset Classes

TranscriptImageDownloader

const downloader = new TranscriptImageDownloader()
  .withMaxSize(5120) // max file size in KB
  .withCompression(40, true) // quality %, convert to webp
  .build(); // returns a resolveImageSrc callback

TranscriptAssetDownloader

const downloader = new TranscriptAssetDownloader()
  .withMaxSize(10240) // max file size in KB
  .build(); // returns a resolveAssetSrc callback

---

📖 Full Example

const discordTranscripts = require('discord.js-html-transcript');
const { TranscriptAssetDownloader } = require('discord.js-html-transcript');

client.on('messageCreate', async (message) => {
  if (message.content === '!transcript') {
    const transcript = await discordTranscripts.createTranscript(message.channel, {
      returnType: 'attachment',
      filename: `transcript-${message.channel.id}.html`,
      limit: -1,
      assets: {
        attachments: true,
        embeds: true,
        avatars: true,
        emojis: true,
        guildIcons: true,
        inviteIcons: true,
        roleIcons: true,
        serverTagBadges: true,
      },
      features: {
        search: true,
        imagePreview: true,
        spoilerReveal: true,
        messageLinks: true,
        profileBadges: true,
        embedTweaks: true,
      },
      callbacks: {
        resolveAssetSrc: new TranscriptAssetDownloader().withMaxSize(10240).build(),
      },
      footerText: 'Exported {number} message{s}.',
      poweredBy: true,
    });

    await message.reply({
      content: '📄 Here is your transcript!',
      files: [transcript],
    });
  }
});

---

🆚 Comparison with Original

Feature	discord-html-transcripts	discord.js-html-transcript
Basic Messages & Embeds	✅	✅
Forwarded Messages	❌	✅
Voice Messages	❌	✅
Polls / Voting	❌	✅
Server Tags & Role Icons	❌	✅
Buttons & Select Menus (Modern)	❌	✅
Discord Invite Previews	❌	✅
Image Preview Lightbox	❌	✅
Message Search	❌	✅
ANSI Code Block Styling	❌	✅
Thread Preview Cards	❌	✅
Fully Responsive Mobile UI	❌	✅
Sticky Channel Header	❌	✅
Feature Toggle System	❌	✅
Granular Asset Saving	❌	✅
Native File Attachment Cards	❌	✅
Image Compression (sharp)	❌	✅
Multi-Image Gallery Grid	❌	✅

---

🤝 Credits

This package is built upon the excellent foundation of discord-html-transcripts by ItzDerock. Original styles powered by @derockdev/discord-components.

All new features, UI modernization, mobile responsiveness, and component redesigns by Wick Studio.

---

💬 Support

• 🌐 Discord Server: discord.gg/wicks
• 🐛 Bug Reports: GitHub Issues
• 📦 NPM: discord.js-html-transcript

---

📜 License

This project is licensed under the Apache License 2.0.

---

Made with ❤️ by Wick Studio