@skyra/discord-components-core
[Github]
Explanation
This website contains various samples for
@skyra/discord-components-core
which is a webcomponents library (powered by
Lit) to create
Discord-like messages with rich content. The always up-to-date version of this document can be found
here.
A normal conversation
Hey guys, I'm new here! Glad to be able to join you all!
Hi, I'm new here too!
Hey, Alyx Vargas and Dawn. Welcome to our server!
Be
sure to read through the rules. You can ping
Support
if you need help.
Hello everyone! How's it going?
Thank you
Maximillian Osborn!
I'm doing well, Willard Walton. What about yourself?
s!8ball How am I doing today?
Yes.
The different kind of mentions
users
roles with #ff0000
channels
voice channels
locked channels
thread channels
forum channels
server guide channels
channels-and-roles channel
customize-community channel
slash commands
Light mode
Look at me I'm a beautiful butterfly
Fluttering in the sunlight 🌞
Thank you
Maximillian Osborn!
Compact mode
Look at me I'm a beautiful butterfly
Fluttering in the moonlight 🌝
Waiting for the day when
Compact mode would be turned on
Oh here it is!
With subsequent messages
I can send multiple messages with my avatar showing only once
That's how Discord handles multiple messages from the same author as well
Just keep in mind that Discord does some funky stuff like with time between messages, this library doesn't automatically
change what is displayed!
With subsequent messages and compact mode
I can send multiple messages with my avatar showing only once
That's how Discord handles multiple messages from the same author as well
Just keep in mind that Discord does some funky stuff like with time between messages, this library doesn't automatically
change what is displayed!
Markdown Styling
I am bold text!
I am italic text!
I am bold italic text!
I am underlined text!
I have subscript:Only you can see this •
Dismiss message
I am inline-code text!
I am multi-
line code
I am spoiler text!
I am quoted text!
No Background mode
This message blends perfectly with your own background
No Background mode is turned on here
Mentions
Hey, Alyx Vargas and Dawn. Welcome to our server! Be
sure to read through the rules. You can ping
Support
if you need help. Feel free to join
General
and talk with us and post thoughts in feedback.
Hey there
Maximillian Osborn, thanks! I will!
Also, make sure to run
profile to create your server profile!
Custom Discord Emojis
Hey these are some custom emojis:
Custom emojis in the embed description:
Custom emojis in the field content
They can also be jumbo sized to represent if the message only has emojis:
Server Invites
discord.gg/djs
discord.gg/code
discord.gg/6gakFR2
Image Attachments with small images
That's a very small logo image!
Image Attachments with custom image components (you can see this in the code only)
This has a custom image component!
Image Attachments with large images
Hey guys, check out this awesome, cute, and totally amazing dragon!
File Attachments
This pk9 file is definitely not a virus! (It's a PKHeX export of a Dragonite)
Audio attachments
Listen to this amazing song from Baldur's Gate 3!
Video attachments
Look at this video!
System Messages
Welcome, Snazzah. We hope you brought pizza.
Snazzah has added Discord Developers #discord-api-announcements to this channel. Its most important updates will
show up here.
Favna just boosted the server!
Favna started a thread: Skyra Suggestion Thread. See all threads.
Snazzah added Favna to the group.
Favna started a call that lasted an hour.
Snazzah changed the channel icon.
Snazzah changed the channel name: A humble Group DM
You missed a call from Favna that lasted a minute.
Favna left the group.
Favna pinned a message to this channel. See all pinned messages.
Dominik upgraded Skyra to premium for this server! 🎉
Warning! Warning! This library is the coolest of them all!
Error! Cool overload!.
Official Discord Community Updates
Note: The URL to the official Discord avatar for Community Updates is
https://cdn.discordapp.com/avatars/669627189624307712/a0389d52d24fdef878aca87e8d52cc2a.webp, you can use this URL to set up a profile for these messages.
This channel has been set up to receive official Discord announcements for admins and moderators of Community servers. We'll
let you know about important updates, such as new moderation features or changes to your server's eligibility for Server
Discovery, here.
You can change which channel these messages are sent to at any time inside Server Settings. We recommend choosing your staff
channel, as some information may be sensitive to your server.
Thanks for choosing Discord as the place to build your community!
Threads
Favna started a thread: Skyra Suggestion Thread. See all threads.
Pong!
Let's make a thread!
There are no messages in this thread yet.
Reactions
React to this message!
Replies
What do you think about this image?
Looks nice!
Looks nice!
I agree!
Butterflies look beautiful!
They do!
This channel has been set up to receive official Discord announcements...
Hey that's a community update!
Replies in Compact Mode
What do you think about this image?
Looks nice!
Looks nice!
I agree!
Butterflies look beautiful!
They do!
This channel has been set up to receive official Discord announcements...
Hey that's a community update!
Commands
Pong!
Pong!
Took 100ms.
The user is Favna!
The content is "The user is Favna!"
The content is "This is nice message!"
This channel has been set up to receive official Discord announcements...
I'm the best server in discord
Commands with deleted message
Took 100ms.
The content is "The user is Favna!"
Commands in Compact Mode
Pong!
Pong!
Took 100ms.
The user is Favna!
The content is "The user is Favna!"
The content is "This is nice message!"
This channel has been set up to receive official Discord announcements...
I'm the best server in discord
Components
Here are some components!
Primary Button
Secondary Button
Green Button
Red Button
Link
Primary Button
Secondary Button
Green Button
Red Button
Link
Select Menu in Default theme!
Select Menu in light theme!
Modals Default Theme
You can spawn a modal by clicking a button!
Click me for a modal
Modals Light Theme
You can spawn a modal by clicking a button!
Click me for a modal
Discord Polls (all cases)
No choice selected by user - single choice
No choice selected by user - multiple choice
With a choice selected by the user - single choice
With a choice selected by the user - multiple choice
With a vote cast by the user - single choice
With a vote cast by the user - multiple choice
With a vote casted by the user and the poll has ended - single choice
With a vote casted by the user and the poll has ended - multiple choice
An ended poll without the user having cast a vote - single choice
An ended poll without the user having cast a vote - multiple choice
Showing results without having cast a vote - single choice
Showing results without having cast a vote - multiple choice
Results are a tie - single choice
Results are a tie - multiple choice
Results are a tie without the user having cast a vote - single choice
Results are a tie without the user having cast a vote - multiple choice
Results are a tie with user having selected a winning option - single choice
Results are a tie with user having selected a winning option - multiple choice
Results are a tie with user having selected a losing option - single choice
Results are a tie with user having selected a losing option - multiple choice
Verified Discord bots
Wow I just got verified!
Full embed example
Sapphire is a next-gen object-oriented
Discord.js
bot framework.
Sapphire is a community driven framework that aims to give you all the features you need to make your
Discord bot.
With a history of many other Discord bot frameworks (both for NodeJS and other languages) to
inspire Sapphire, it has become the ultimate modern experience of writing your code.
1 year ago
yarn add @sapphire/framework
-
Advanced plugin support
-
Supports both CommonJS and ESM
-
Completely modular and extendable
-
Designed with first class TypeScript support in mind
-
Includes optional utilities that you can use in any project
Open source libraries to aid in the creation of Discord bots
Server crosspost messages
Hey peeps!
We have a redesigned website over at
https://discord.js.org/
Check it out if you want or not
You're most likely using a cached version of the old website because of our service worker, so make sure to clear your cache
and any cookies/service workers you have. For some of you nothing needs to be done, for others a so called "hard-refresh" will
do the trick too.
Bugs and improvement requests go into our
site-discussion
channel (you have to be in the server for this)
Embedded video
Embed fields
Some value here. Some value here. Some value here.
Some value here. Some value here. Some value here.
Some value here. Some value here. Some value here.
A tenor-gif in video format
Inline fields
Some value here
Some value here
Some value here
Inline fields with a thumbnail
Some value here
Some value here
Some value here
With all slots of a message filled
This is the text of the message
Embed description
Field value
Pong!
Headers
This is a header 1
This is a header 2
This is a header 3
Ordered list items
This is an ordered list item
You can start your list item at a custom number
We will calculate the length internally
This whole level is considered to have a start number length of 3
Unordered list items
Discord
imposes
a
limit
of
eleven
levels
but
we
can
go (this is 11)
deeper
ain't that cool
we can also be bold
or italic
or both
