✨ Features

| Feature | Description | |---|---| | 🧩 Components V2 | Container · TextDisplay · Separator · MediaGallery · Section · Thumbnail · File · Buttons · All 5 Select types | | 📋 Classic Messages | Plain text, rich embeds (all fields), attachments, reactions, threads, slash commands, replies | | 🎨 Modern Design | Pixel-perfect Discord UI with Inter font, CSS variables, smooth animations, and deep dark theme | | 🖼️ Image Saving | Optionally download and embed all images directly into the HTML (no CDN links) | | 🗂️ Self-contained | Single .html file — no external runtime dependencies after generation | | ⚡ React 19 SSR | Powered by prerenderToNodeStream for fast, memory-efficient rendering | | 📝 Markdown | Headings · Lists · Bold/Italic · Code blocks · Blockquotes · Spoilers · Timestamps | | � User Mentions | Mentions resolve to real display names; click any mention for a Discord-style profile popup | | �🔧 TypeScript | Fully typed public API |

📦 Installation

npm install discord-transcript-v2

Peer dependency: discord.js ^14.0.0 || ^15.0.0

🚀 Quick Start

createTranscript — from a live channel

import { createTranscript, ExportReturnType } from 'discord-transcript-v2';

// Export as a Discord attachment (default)
const attachment = await createTranscript(channel);
await logChannel.send({ files: [attachment] });

// Export as a string and save to disk
const html = await createTranscript(channel, {
  returnType: ExportReturnType.String,
  filename: 'transcript.html',
  saveImages: true,
  poweredBy: true,
});

generateFromMessages — from an array of messages

import { generateFromMessages, ExportReturnType } from 'discord-transcript-v2';

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

const buffer = await generateFromMessages(messages, channel, {
  returnType: ExportReturnType.Buffer,
  saveImages: false,
});

📚 API Reference

Options

| Option | Type | Default | Description | |---|---|---|---| | returnType | ExportReturnType | Attachment | Attachment, Buffer, or String | | filename | string | transcript.html | Output file name | | limit | number | -1 (all) | Max messages to fetch | | saveImages | boolean | false | Download & embed images into the file | | poweredBy | boolean | true | Show footer credit | | footerText | string | — | Custom footer ({number} = count, {s} = plural) | | favicon | 'guild' \| string | 'guild' | Page favicon URL | | hydrate | boolean | false | Server-side hydrate web components |

ExportReturnType

enum ExportReturnType {
  Attachment = 'attachment', // discord.js AttachmentBuilder
  Buffer     = 'buffer',
  String     = 'string',
}

🧩 Components V2 Coverage

| Component | Status | Notes | |---|---|---| | Container | ✅ | Accent colour bar, spoiler blur | | TextDisplay | ✅ | Full Discord markdown | | Separator | ✅ | Divider line or spacing block (sm / lg) | | MediaGallery | ✅ | 1–10 items, auto-grid layout | | Section | ✅ | Thumbnail or Button accessory | | Thumbnail | ✅ | Alt text, hover animation | | File | ✅ | Spoiler support, attachment:// protocol | | Button | ✅ | All 6 styles + disabled + emoji | | StringSelect | ✅ | Options with emoji & description | | UserSelect | ✅ | | | RoleSelect | ✅ | | | MentionableSelect | ✅ | | | ChannelSelect | ✅ | |

💬 Support & Community

Join Code Nexus for help, updates, and feature requests:

☕ Support Development

🛠️ Development

git clone https://github.com/aymenelouadi/discord-html-transcripts-components-v2.git
cd discord-html-transcripts-components-v2
npm install
npm run build

# Run live CV2 coverage test (needs .env with DISCORD_TOKEN + GUILD_ID)
cp .env.example .env
npm run test:cv2

📄 Changelog

See CHANGELOG.md for the full release history.

📜 License

MIT © 2026 aymenelouadi · Supported by Code Nexus