leovoel / embed-visualizer

discord embed visualization tool

Embed Visualizer

Code snippet generators

The general structure for them looks like this:

export default {
  // for displaying on the <select> dropdown
  name: 'Cool Discord Lib (Cool Programming Language)',

  // for highlight.js
  // see https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases
  language: 'coolprogramminglanguage',

  // actual generator
  // data is just a javascript object that looks like this:
  // { "content": "message content...", "embed": { ... } }
  generateFrom(data) {
    ...
  },
};

Currently, we don't really take in account "webhook mode" since most libraries don't really support that directly. If in the future most of them end up supporting it, we can start passing that down to the generateFrom function, so that it can emit something else.

embed-visualizer's Issues

discord.js RichEmbed

Currently it has it the old way - an object.
The better way is to use a RichEmbed, and also makes cleaner code.

custom emoji in webhooks

Discord doesn't actually render any custom emoji inside webhook embeds, but the website does render them.

How to deploy your own version?

No idea if you bother checking this repository out at all, but I'll still try my luck here...

Could you leovoel - or anyone else with experience in this - tell me how I could build my own version to host on GitHub pages?

I've forked and customized this version here for some special needs, but now I would need to know how I can properly build it and push to my fork's gh-pages branch...

Thanks in advance to whoever may give some help here.

If I find any answer myself to this will I update this issue and close it.

Webhook mode does not support 'tts' or 'file' parameters

The API docs for webhooks mention 'file' and 'tts' parameters, that this tool will show as "Unrecognized property".

Updated footer UI

Discord's footer UI has been updated, the icon is now circular, and the | between the text and timestamp is now a gray •.
Also, the display of the timestamp has been updated and now seems to be the same as the message time format.

The visualizer should be updated to show this.

Old:

New:

Semicolons

Similar to the last issue I created, allowing users to select not to have semicolons on code generation (for languages that support it) (Javascript mainly)

Single quotes

I like the website, but look into allowing users to select single or double quotes on code generation

For C# Found some typos.

var builder = new EmbedBuilder()
    .WithTitle("title ~~(did you know you can have markdown here too?)~~")
    .WithDescription("this supports [named links](https://discordapp.com) on top of the previously shown subset of markdown. ```\nyes, even code blocks```")
    .WithUrl("https://discordapp.com")
    .WithColor(new Color(0x547F96))
    .WithTimestamp(DateTimeOffset.FromUnixTimeSeconds(253402300799))
    .WithFooter(footer => {
        footer
            .WithText("footer text")
            .WithIconUrl("https://cdn.discordapp.com/embed/avatars/0.png");
    })
	.WithThumbnailUrl("https://cdn.discordapp.com/embed/avatars/0.png")
    .WithImageUrl("https://cdn.discordapp.com/embed/avatars/0.png")
    .WithAuthor(author => {
        author
            .WithName("author name")
            .WithUrl("https://discordapp.com")
            .WithIconUrl("https://cdn.discordapp.com/embed/avatars/0.png");
    })
    .AddField("🤔", "some of these properties have certain limits...")
    .AddField("😱", "try exceeding some of them!")
    .AddField("🙄", "an informative error should show up, and this view will remain as-is until all issues are fixed")
    .AddInlineField("<:thonkang:219069250692841473>", "these last two")
    .AddInlineField("<:thonkang:219069250692841473>", "are inline fields");
                var embed = builder.Build();
                await Context.Channel.SendMessageAsync("this `supports` __a__ **subset** *of* ~~markdown~~ 😃 ```js\nfunction foo(bar) {\n  console.log(bar);\n}\n\nfoo(1);```", false, embed)
                    .ConfigureAwait(false);

Correct one ^

What was wrong with the previous one was:

• An ;, ending the EmbedBuilder.
• And there is a missing parameter, false or true should be placed behind the , embed
• And an error Gyldige verdier er mellom -62135596800 og 253402300799. Parameternavn: seconds which means: Valid values are between -62135596800 and 253402300799. Parameter Name: seconds
  

Reactions

Please add reactions!

Is there a non-React version?

Hey, is there a way to run this without React? Thanks.

provider, video?

Seems like discord support provider and video objects. Can it be added to Embed-Visualizer?

https://discordapp.com/developers/docs/resources/channel#embed-object

Add the ability for Post or Get requests with a json code to display

I made the site https://discord.club/tools/embed-generator and I already provide a json code output, but it would be awesome if users could just click a button and view the embed on your site.

I think that would be possible with either a post or a get request.

embed{} is now embeds[]

embed{} no longer works.

Please update to embeds[]

Change for Discord.js v13

Discord.js has released v13 which has stopped the method on the current website to not work. Embeds work in the similar way to how webhooks do, as per you can send multiple embeds and it must be specified as that in the sent message.

See https://discordjs.guide/additional-info/changes-in-v13.html#sending-messages-embeds-files-etc

Color Codes - What kind?

I'm trying to set custom colors for the embed, however I have no clue what kind of color code that is. Could you please provide the name of the type of color code that should be used.

Needs Example when switching to "Webhook Mode"

When we enable Webhook Mode can you update the example embed to a valid form please so we can see what it's supposed to look like, Thanks.

Spaces in the title gets collapsed in the visualiser, but not in Discord

If the title contains multiple spaces in a row (and not at the start or end), then Discord displays all those spaces (even in the web app). However, the visualiser collapses them all into one. This is because Discord uses the white-space: break-spaces; CSS property.

Discord API changes

For changing embed to embeds (an array). Discord updated the API so bots have to send an array of embed or embeds.

Compact mode has "Bot" tag in the wrong spot

Screenshot from your typical everyday discord

On the embed visualizer:

no idea why this bothers me so much

Size of the larger image is wrong

I've done some testing and Discord limits the size of the image by 400px in width and 300px in height. However, when we select the image in the demo, we see in the CSS max-width: 520px;. It should be max-width: 400px; and max-height: 300px;.

Exhibit 1 :

Original image is 420 × 600 pixels.

Exhibit 2 :

Original image is 437 × 290 pixels.

inline = true

In nextcord for exmaple inline is set to true by default,I would set it to false in the python code if nothing is set if you like I could do an pr

Discord buttons support

In the latest updates discord had added buttons which are available in the components section.

{
    "content": "This is a message with components",
    "components": [
        {
            "type": 1,
            "components": [
                {
                    "type": 2,
                    "label": "Click me!",
                    "style": 1,
                    "custom_id": "click_one"
                }
            ]

        }
    ]
}

Title supports bold, but isn't rendered

Embeds support bold markdown in the title, like so (from Discord client):

however the same code in the visualizer does not render bold:

Possible VS Code extension..?

Hi! Just wondering if you've considered adapting this into a VS Code extension? Would definitely be useful for seeing what your output will look like w/o needing to switch to discord, restart bot/reload module, and use a command.

Related note: is this even being actively maintained?

discord.py rewrite support?

discord.py rewrite is being done, so we should add gen for this. might PR it soon

Do not render named link if protocol missing

Having a link like [test](example.com) will display wrongly in the visualizer, and discord will simply drop the destination and only display test unless the protocol is specified, like: [test](http://example.com)