@sapphire/embed-jsx

An easy way to use JSX to create discord embeds with discord.js

Usage no npm install needed!

<script type="module">
  import sapphireEmbedJsx from 'https://cdn.skypack.dev/@sapphire/embed-jsx';
</script>

README

Sapphire Logo

@sapphire/embed-jsx

GitHub codecov npm bundle size npm

Description

Discord embeds have a structure that translates very nicely to JSX syntax, making it a very interesting way to define embed structures in this variant of regular JavaScript. To translate the JSX code to DiscordJS compatible MessageEmbed data there is this library.

Features

  • Written in TypeScript
  • Offers CommonJS and ESM variants
  • Fully tested

Installation

@sapphire/embed-jsx depends on the following packages. Be sure to install these along with this package!

You can use the following command to install this package, or replace npm install with your package manager of choice.

npm install @sapphire/embed-jsx discord.js

Usage

In your tsconfig.json, add

{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "EmbedJsx.make"
    }
}

and in any tsx file, import the EmbedJsx namespace as you would if you were using React

import { EmbedJsx } from '@sapphire/embed-jsx';

Note: as of now the package is currently not fully typed, so to get around any compiler errors you may have to add

"noImplicitAny": false

to your tsconfig.json

Buy us some doughnuts

Sapphire Project is and always will be open source, even if we don't get donations. That being said, we know there are amazing people who may still want to donate just to show their appreciation. Thank you very much in advance!

We accept donations through Open Collective, Ko-fi, Paypal, Patreon and GitHub Sponsorships. You can use the buttons below to donate through your method of choice.

Donate With Address
Open Collective Click Here
Ko-fi Click Here
Patreon Click Here
PayPal Click Here

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Jeroen Claassens

πŸ’» πŸš‡ πŸ“† πŸ“– ⚠️

Antonio RomΓ‘n

πŸ’» πŸ“† πŸ‘€ ⚠️

Gryffon Bellish

πŸ’» πŸ‘€ ⚠️

Vlad Frangu

πŸ’» πŸ› πŸ‘€ πŸ““ ⚠️

Stitch07

πŸ’» πŸ“† ⚠️

depfu[bot]

🚧

allcontributors[bot]

πŸ“–

Tyler J Russell

πŸ“–

Ivan Lieder

πŸ’» πŸ›

Hezekiah Hendry

πŸ’»

Vetlix

πŸ’»

Ethan Mitchell

πŸ“–

Elliot

πŸ’»

Jurien Hamaker

πŸ’»

Charalampos Fanoulis

πŸ“–

dependabot[bot]

🚧

Kaname

πŸ’»

nandhagk

πŸ›

megatank58

πŸ’»

UndiedGamer

πŸ’»

Lioness100

πŸ“– πŸ’»

David

πŸ’»

renovate[bot]

🚧

WhiteSource Renovate

🚧

FC

πŸ’»

JΓ©rΓ©my de Saint Denis

πŸ’»

MrCube

πŸ’»

bitomic

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!