### Instantiate and Configure MusicCard in CommonJS

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/music-card.mdx

This example demonstrates how to use the MusicCard class with the CommonJS module system. It shows the required import syntax and the chaining of configuration methods similar to the other examples, concluding with building the image.

```JavaScript
const { MusicCard } = require("./MusicCard.js");

const card = new MusicCard()
  .setAuthor("JVKE")
  .setTitle("Golden Hour")
  .setImage(
    "https://lh3.googleusercontent.com/i1qCCS4BbP6z11E08FkQg6fN-83Uj4fQg4bmBsD2E6SvGQ3RW7nXxpQ3hmcSlI5Ipek10H7R4BjV5mAY=w544-h544-l90-rj"
  )
  .setProgress(39)
  .setCurrentTime("01:58")
  .setTotalTime("02:59");

async function main() {
  const image = await card.build();
  // now do something with the image buffer
}
```

--------------------------------

### Generate and Save Image with Canvacord (JavaScript)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/quickstart.mdx

This snippet shows how to create an instance of the Generator, build an image with 'Hello, World!' text, and save it as a PNG file. It utilizes asynchronous operations for image generation and file writing.

```javascript
import { Generator } from "canvacord";
import { writeFile } from "fs/promises";

class MyCanva {
  render(JSX) {
    return JSX.createElement(
      "div",
      {
        style: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
        },
      },
      JSX.createElement("h1", null, "Hello, World!")
    );
  }
}

async function main() {
  // create an instance of the builder
  const generator = new Generator();
  // build the image and save it to a file
  const image = await generator.build({ format: "png" });

  await writeFile("image.png", image);
}

main();
```

--------------------------------

### Create Greetings Card (ES Modules)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/greetings-card.mdx

Example of creating a welcome card using the GreetingsCard class with ES Modules syntax. It mirrors the TypeScript example by loading fonts, creating a card instance, configuring its details, and building the image. Assumes the GreetingsCard class is imported from a local file.

```JavaScript
import { Font } from "canvacord";
import { GreetingsCard } from "./GreetingsCard.js";

// load font, in this case we are loading the bundled font from canvacord
Font.loadDefault();

// create card
const card = new GreetingsCard()
  .setAvatar("https://cdn.discordapp.com/embed/avatars/0.png")
  .setDisplayName("Wumpus")
  .setType("welcome")
  .setMessage("Welcome to the server!");

const image = await card.build({ format: "png" });

// now do something with the image buffer

```

--------------------------------

### JSX Syntax Example

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/builders/jsx-syntax.mdx

Demonstrates the basic usage of JSX syntax, which resembles HTML, for creating elements in JavaScript. JSX requires a transpiler to convert it into valid JavaScript.

```jsx
const message = <h1>Hello, world!</h1>;
```

--------------------------------

### Instantiate and Configure MusicCard in ES Modules

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/music-card.mdx

This snippet illustrates using the MusicCard class within an ES Modules environment. It mirrors the TypeScript example by importing the class and chaining methods to configure the card's properties before generating the image.

```JavaScript
import { MusicCard } from "./MusicCard.js";

const card = new MusicCard()
  .setAuthor("JVKE")
  .setTitle("Golden Hour")
  .setImage(
    "https://lh3.googleusercontent.com/i1qCCS4BbP6z11E08FkQg6fN-83Uj4fQg4bmBsD2E6SvGQ3RW7nXxpQ3hmcSlI5Ipek10H7R4BjV5mAY=w544-h544-l90-rj"
  )
  .setProgress(39)
  .setCurrentTime("01:58")
  .setTotalTime("02:59");

const image = await card.build();
// now do something with the image buffer
```

--------------------------------

### Apply image filters with Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Applies various image filters, such as hue rotation, to an image using Canvacord. This example demonstrates creating a canvas, drawing an image, applying a hueRotate filter, and encoding the result. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";

// filters
const filtered = await canvacord
  .filters(500, 500)
  .drawImage(img)
  .hueRotate(70)
  .encode();

fs.writeFile("./filtered.png", filtered);
```

--------------------------------

### Usage Example for Canvacord Builder

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/builders/introduction-to-builders.mdx

Demonstrates the practical usage of a custom Canvacord builder. It shows how to instantiate the builder, set its properties using chained methods, and then render the final image buffer. The result is typically a PNG buffer unless otherwise specified.

```TypeScript
// Create an instance of the builder
const builder = new MyBuilder()
  // Set the message property
  .setMessage("Hello, World!");

// Render the builder into image
const result = await builder.build();
// ^ result is by default a png buffer
```

--------------------------------

### Initialize and Build Greetings Card with Canvacord (TypeScript)

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/greetings-card.md

Demonstrates how to instantiate the GreetingsCard builder, set its properties using chained methods, and then build the final image buffer. It includes loading default fonts and handling the output image buffer.

```ts
import { Font } from "canvacord";
import { GreetingsCard } from "./GreetingsCard";

// load font, in this case we are loading the bundled font from canvacord
Font.loadDefault();

// loading font from file would be like this
await Font.fromFile("path/to/font.ttf");
// or synchronously
Font.fromFileSync("path/to/font.ttf");

// create card
const card = new GreetingsCard()
  .setAvatar("https://cdn.discordapp.com/embed/avatars/0.png")
  .setDisplayName("Wumpus")
  .setType("welcome")
  .setMessage("Welcome to the server!");

const image = await card.build({ format: "png" });

// now do something with the image buffer

```

--------------------------------

### Create Stewie Griffin Image with Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/image-manipulation/stewie-griffin.mdx

This code generates an image applying the Stewie Griffin template. It uses Canvacord's createTemplate and createImageGenerator functions. The input is an image source, and the output is a PNG buffer. Requires 'path' and 'canvacord' packages.

```TypeScript
import { join } from "path";
import {
  createTemplate,
  createImageGenerator,
  TemplateImage,
  type ImageSource,
} from "canvacord";

const StewieGriffin = createTemplate((image: ImageSource) => {
  return {
    width: 1024,
    height: 1024,
    steps: [
      {
        image: [
          {
            source: new TemplateImage(image),
            x: 180,
            y: 0,
            width: 680,
            height: 680,
          },
        ],
      },
      {
        image: [
          {
            source: new TemplateImage(
              join(import.meta.dirname, "stewie-griffin-source.png")
            ),
            x: 0,
            y: 0,
          },
        ],
      },
    ],
  };
});

export async function stewieGriffin(image: ImageSource) {
  const output = await createImageGenerator(StewieGriffin(image)).render();
  const result = await output.encode("png");

  return result;
}
```

```ES Modules
import { join } from "path";
import { createTemplate, createImageGenerator, TemplateImage } from "canvacord";

const StewieGriffin = createTemplate((image) => {
  return {
    width: 1024,
    height: 1024,
    steps: [
      {
        image: [
          {
            source: new TemplateImage(image),
            x: 180,
            y: 0,
            width: 680,
            height: 680,
          },
        ],
      },
      {
        image: [
          {
            source: new TemplateImage(
              join(import.meta.dirname, "stewie-griffin-source.png")
            ),
            x: 0,
            y: 0,
          },
        ],
      },
    ],
  };
});

export async function stewieGriffin(image) {
  const output = await createImageGenerator(StewieGriffin(image)).render();
  const result = await output.encode("png");

  return result;
}
```

```CommonJS
const { join } = require("path");
const {
  createTemplate,
  createImageGenerator,
  TemplateImage,
} = require("canvacord");

const StewieGriffin = createTemplate((image) => {
  return {
    width: 1024,
    height: 1024,
    steps: [
      {
        image: [
          {
            source: new TemplateImage(image),
            x: 180,
            y: 0,
            width: 680,
            height: 680,
          },
        ],
      },
      {
        image: [
          {
            source: new TemplateImage(
              join(__dirname, "stewie-griffin-source.png")
            ),
            x: 0,
            y: 0,
          },
        ],
      },
    ],
  };
});

module.exports.stewieGriffin = async function (image) {
  const output = await createImageGenerator(StewieGriffin(image)).render();
  const result = await output.encode("png");

  return result;
};
```

--------------------------------

### Manipulate image with pixelation using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Performs image manipulation, specifically pixelation, on an image using Canvacord. This example initializes Canvacord with an image, applies a pixelate filter, and encodes the result. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";

// image
const manipulated = await canvacord(img).pixelate(5).encode();
fs.writeFile("./manipulated.png", manipulated);
```

--------------------------------

### Apply 'facepalm' template using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Generates an image with the 'facepalm' meme template applied to a given image using Canvacord. The function takes an image file path and returns the modified image. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";

// facepalm
const facepalm = await canvacord.facepalm(img);
fs.writeFile("./facepalm.png", facepalm);
```

--------------------------------

### Apply 'rainbow' effect using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Adds a 'rainbow' overlay effect to an image using Canvacord. The function takes an image file path and returns the resulting image data with the effect applied. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";

// rainbow
const rainbow = await canvacord.rainbow(img);
fs.writeFile("./rainbow.png", rainbow);
```

--------------------------------

### Create Greetings Card (TypeScript)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/greetings-card.mdx

Example of creating a welcome card using the GreetingsCard class in TypeScript. It demonstrates loading default fonts, instantiating the card, setting its properties, and building the image buffer in PNG format. Assumes the GreetingsCard class is imported from a local file.

```TypeScript
import { Font } from "canvacord";
import { GreetingsCard } from "./GreetingsCard";

// load font, in this case we are loading the bundled font from canvacord
Font.loadDefault();

// create card
const card = new GreetingsCard()
  .setAvatar("https://cdn.discordapp.com/embed/avatars/0.png")
  .setDisplayName("Wumpus")
  .setType("welcome")
  .setMessage("Welcome to the server!");

const image = await card.build({ format: "png" });

// now do something with the image buffer

```

--------------------------------

### Apply 'beautiful' filter using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Applies a 'beautiful' visual filter to an image using Canvacord. The function takes an image file path and returns the filtered image data. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";

// beautiful
const beautiful = await canvacord.beautiful(img);
fs.writeFile("./beautiful.png", beautiful);
```

--------------------------------

### Create 'spank' image using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Generates an image simulating a 'spank' action between two images using Canvacord. The function takes two image file paths and returns the processed image data. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";
const img2 = "image-2.png";

// spank
const spanked = await canvacord.spank(img, img2);
fs.writeFile("./spanked.png", spanked);
```

--------------------------------

### Generate Image with Canvacord without JSX (ES Modules)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/quickstart.mdx

This example demonstrates using Canvacord without JSX syntax in an ES Modules environment. It utilizes the JSX.createElement function for defining image elements programmatically. The code imports necessary modules and saves the generated image to a file.

```javascript
// import Canvacord
// Builder = The base class for creating custom builders
// JSX = The JSX pragma for creating elements
// Font = The Font class for loading custom fonts
// FontFactory = The FontFactory for managing fonts
import { Builder, JSX, Font, FontFactory } from "canvacord";
import { writeFile } from "node:fs/promises";

// define a builder
class Generator extends Builder {
  constructor() {
    // set the size of the image
    super(300, 300);

    // if no fonts are loaded, load the default font
    if (!FontFactory.size) Font.loadDefault();
  }

  async render() {
    // declare the shape of the image
    return JSX.createElement(
      "div",
      {
        style: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
        },
      },
      JSX.createElement("h1", null, "Hello, World!")
    );
  }
}

// create an instance of the builder
const generator = new Generator();
// build the image and save it to a file
const image = await generator.build({ format: "png" });

await writeFile("image.png", image);
```

--------------------------------

### Create Greetings Card (CommonJS)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/greetings-card.mdx

Example of creating a welcome card using the GreetingsCard class with CommonJS module syntax. This version includes an async function 'main' to handle the asynchronous 'build' method and demonstrates loading fonts, setting card properties, and building the image. Assumes the GreetingsCard class is imported from a local file.

```JavaScript
const { Font } = require("canvacord");
const { GreetingsCard } = require("./GreetingsCard.js");

// load font, in this case we are loading the bundled font from canvacord
Font.loadDefault();

// create card
const card = new GreetingsCard()
  .setAvatar("https://cdn.discordapp.com/embed/avatars/0.png")
  .setDisplayName("Wumpus")
  .setType("welcome")
  .setMessage("Welcome to the server!");

async function main() {
  const image = await card.build({ format: "png" });

  // now do something with the image buffer
}

main();

```

--------------------------------

### Canvacord Tweet Card Setup (TypeScript, ES Modules, CommonJS)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/tweet-card.mdx

This snippet demonstrates the basic import statements required to use Canvacord for building a Tweet Card. It covers TypeScript, ES Modules, and CommonJS module systems. No specific dependencies beyond 'canvacord' are mentioned.

```TypeScript
import {} from "canvacord";
```

```ES Modules
import {} from "canvacord";
```

```CommonJS
const {} = require("canvacord");
```

--------------------------------

### Create 'slap' image using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Generates an image depicting a 'slap' action between two images using Canvacord. The function accepts two image file paths and returns the resulting image data. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";
const img2 = "image-2.png";

// slap
const slapped = await canvacord.slap(img, img2);
fs.writeFile("./slapped.png", slapped);
```

--------------------------------

### Apply 'trash' filter using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Applies a 'trash' visual filter to an image using Canvacord. The function takes an image file path and returns the processed image data. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";

// trash
const trash = await canvacord.trash(img);
fs.writeFile("./trash.png", trash);
```

--------------------------------

### Apply 'hitler' template using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Applies a 'hitler' meme template to an image using Canvacord. The function takes an image file path and returns the modified image data. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";

// hitler
const hitler = await canvacord.hitler(img);
fs.writeFile("./hitler.png", hitler);
```

--------------------------------

### Create 'triggered' GIF using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Generates a 'triggered' GIF animation from an input image using Canvacord. The function returns a stream that can be piped to a write stream to save the GIF. Requires the 'canvacord' and 'fs' modules.

```typescript
import { canvacord } from "canvacord";
import { createWriteStream } from "fs";

const img = "image-1.png";

// gif
const triggered = await canvacord.triggered(img);
triggered.pipe(createWriteStream("./triggered.gif"));
```

--------------------------------

### Create 'kiss' image using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Generates an image depicting a 'kiss' action between two specified images using Canvacord. The function takes two image file paths and returns the resulting image data. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";
const img2 = "image-2.png";

// kiss
const kissed = await canvacord.kiss(img, img2);
fs.writeFile("./kissed.png", kissed);
```

--------------------------------

### Generate Image with Canvacord using JSX (ES Modules)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/quickstart.mdx

This snippet shows how to use Canvacord with JSX syntax to define and render an image. It imports necessary components from 'canvacord' and uses Node.js file system promises to save the output. The Generator class extends Builder to create a custom image layout.

```jsx
/** @jsx JSX.createElement */
/** @jsxFrag JSX.Fragment */

// The JSX pragma tells transpiler how to transform JSX into the equivalent JavaScript code

// import Canvacord
// Builder = The base class for creating custom builders
// JSX = The JSX pragma for creating elements
// Font = The Font class for loading custom fonts
// FontFactory = The FontFactory for managing fonts
import { Builder, JSX, Font, FontFactory } from "canvacord";
import { writeFile } from "node:fs/promises";

// define a builder
class Generator extends Builder {
  constructor() {
    // set the size of the image
    super(300, 300);

    // if no fonts are loaded, load the default font
    if (!FontFactory.size) Font.loadDefault();
  }

  async render() {
    // declare the shape of the image
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
        }}
      >
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

// create an instance of the builder
const generator = new Generator();
// build the image and save it to a file
const image = await generator.build({ format: "png" });

await writeFile("image.png", image);
```

--------------------------------

### Apply 'rip' template using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Applies the 'rip' (rest in peace) meme template to an image using Canvacord. The function takes an image file path and returns the modified image data. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";

// rip
const rip = await canvacord.rip(img);
fs.writeFile("./rip.png", rip);
```

--------------------------------

### Define Custom Builder Class in JavaScript (ES Modules)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/builders/introduction-to-builders.mdx

Illustrates the creation of a custom image builder using JavaScript with ES Modules syntax. It mirrors the TypeScript example by extending the Canvacord Builder class, setting dimensions, and using a render method with JSX for image composition. Font registration is necessary for text rendering.

```JavaScript
import { JSX, Builder } from "canvacord";

class MyBuilder extends Builder {
  constructor() {
    // The super constructor takes the width and height of the output image
    super(500, 500);
  }

  setMessage(value) {
    // The set method is used to set the value of a property
    this.options.set("message", value);
    return this;
  }

  // The render method is where the JSX is rendered
  async render() {
    const message = this.options.get("message");
    // You can render any component you want
    // this markup describes the shape/content of output image
    return <h1>{message}</h1>;
  }
}
```

--------------------------------

### Generate Image with Canvacord using JSX (CommonJS)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/quickstart.mdx

This snippet demonstrates Canvacord usage with JSX syntax for CommonJS environments. It uses 'require' for imports and defines a custom image generator class that extends the base Builder. The generated image is saved to a file.

```jsx
/** @jsx JSX.createElement */
/** @jsxFrag JSX.Fragment */

// The JSX pragma tells transpiler how to transform JSX into the equivalent JavaScript code

// import Canvacord
// Builder = The base class for creating custom builders
// JSX = The JSX pragma for creating elements
// Font = The Font class for loading custom fonts
// FontFactory = The FontFactory for managing fonts
const { Builder, JSX, Font, FontFactory } = require("canvacord");
const { writeFile } = require("node:fs/promises");

// define a builder
class Generator extends Builder {
  constructor() {
    // set the size of the image
    super(300, 300);

    // if no fonts are loaded, load the default font
    if (!FontFactory.size) Font.loadDefault();
  }

  async render() {
    // declare the shape of the image
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
        }}
      >
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

async function main() {
  // create an instance of the builder
  const generator = new Generator();
  // build the image and save it to a file
  const image = await generator.build({ format: "png" });

  await writeFile("image.png", image);
}

main();
```

--------------------------------

### Usage: Save Generated Stewie Griffin Image

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/image-manipulation/stewie-griffin.mdx

This code snippet shows how to use the `stewieGriffin` function to generate an image and save it to a file. It takes a URL as input and writes the resulting PNG buffer to a local file. Requires 'node:fs/promises' and the generated 'stewie-griffin' module.

```TypeScript
import { writeFile } from "node:fs/promises";
import { stewieGriffin } from "./stewie-griffin";

const targetImage = "https://cdn.discordapp.com/embed/avatars/0.png";

const result = await stewieGriffin(targetImage);

await writeFile("./stewie-griffin-result.png", result);
```

```ES Modules
import { writeFile } from "node:fs/promises";
import { stewieGriffin } from "./stewie-griffin.js";

const targetImage = "https://cdn.discordapp.com/embed/avatars/0.png";

const result = await stewieGriffin(targetImage);

await writeFile("./stewie-griffin-result.png", result);
```

```CommonJS
const { writeFile } = require("node:fs/promises");
const { stewieGriffin } = require("./stewie-griffin.js");

async function main() {
  const targetImage = "https://cdn.discordapp.com/embed/avatars/0.png";
  const result = await stewieGriffin(targetImage);

  await writeFile("./stewie-griffin-result.png", result);
}

main();
```

--------------------------------

### Create Greetings Card Builder with Canvacord and JSX (TypeScript)

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/greetings-card.md

Defines a reusable GreetingsCard builder class using Canvacord's Builder and JSX syntax. It allows setting display name, type, avatar, and message to generate custom greeting images. Requires JSX transpilation with 'react' and 'typescript' presets.

```tsx
/** @jsx JSX.createElement */
/** @jsxFrag JSX.Fragment */

// JSX import is required if you want to use JSX syntax
// Builder is a base class to create your own builders
// loadImage is a helper function to load images from url or path
import { JSX, Builder, loadImage } from "canvacord";

interface Props {
  displayName: string;
  type: "welcome" | "goodbye";
  avatar: string;
  message: string;
}

class GreetingsCard extends Builder<Props> {
  constructor() {
    // set width and height
    super(930, 280);
    // initialize props
    this.bootstrap({
      displayName: "",
      type: "welcome",
      avatar: "",
      message: "",
    });
  }

  setDisplayName(value: string) {
    this.options.set("displayName", value);
    return this;
  }

  setType(value: Props["type"]) {
    this.options.set("type", value);
    return this;
  }

  setAvatar(value: string) {
    this.options.set("avatar", value);
    return this;
  }

  setMessage(value: string) {
    this.options.set("message", value);
    return this;
  }

  // this is where you have to define output ui
  async render() {
    const { type, displayName, avatar, message } = this.options.getOptions();

    // make sure to use the loadImage helper function to load images, otherwise you may get errors
    const image = await loadImage(avatar);

    return (
      <div className="h-full w-full flex flex-col items-center justify-center bg-[#23272A] rounded-xl">
        <div className="px-6 bg-[#2B2F35AA] w-[96%] h-[84%] rounded-lg flex items-center">
          <img
            src={image.toDataURL()}
            className="flex h-[40] w-[40] rounded-full"
          />
          <div className="flex flex-col ml-6">
            <h1 className="text-5xl text-white font-bold m-0">
              {type === "welcome" ? "Welcome" : "Goodbye"},{" "]}
              <span className="text-blue-500">{displayName}!</span>
            </h1>
            <p className="text-gray-300 text-3xl m-0">{message}</p>
          </div>
        </div>
      </div>
    );
  }
}

```

--------------------------------

### Fuse two images using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Combines two images into a single image using the 'fuse' function from Canvacord. This function takes two image file paths and returns the combined image data. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";
const img2 = "image-2.png";

// fuse
const fused = await canvacord.fuse(img, img2);
fs.writeFile("./fused.png", fused);
```

--------------------------------

### Create 'distracted boyfriend' meme using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Generates the 'distracted boyfriend' meme using three input images with Canvacord. The function takes three image file paths and returns the composed meme image. Requires 'canvacord' and 'fs'.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";
const img2 = "image-2.png";
const img3 = "image-3.png";

// distracted
const distracted = await canvacord.distracted(img, img2, img3);
fs.writeFile("./distracted.png", distracted);
```

--------------------------------

### Apply 'affect' template using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/guides/Examples/image-generation.md

Applies the 'affect' template to a given image using the Canvacord library. This function takes an image file path as input and returns the modified image data, which is then saved to a file. Requires the 'canvacord' and 'fs' modules.

```typescript
import { canvacord } from "canvacord";
import { promises as fs } from "fs";

const img = "image-1.png";

// template
const affected = await canvacord.affect(img);
fs.writeFile("./affected.png", affected);
```

--------------------------------

### Generate Image with Canvacord without JSX (CommonJS)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/quickstart.mdx

This snippet illustrates how to use Canvacord without JSX in a CommonJS module system. It employs JSX.createElement for defining image structures programmatically. The code imports required modules and saves the generated image to a file.

```javascript
// import Canvacord
// Builder = The base class for creating custom builders
// JSX = The JSX pragma for creating elements
// Font = The Font class for loading custom fonts
// FontFactory = The FontFactory for managing fonts
const { Builder, JSX, Font, FontFactory } = require("canvacord");
const { writeFile } = require("node:fs/promises");

// define a builder
class Generator extends Builder {
  constructor() {
    // set the size of the image
    super(300, 300);

    // if no fonts are loaded, load the default font
    if (!FontFactory.size) Font.loadDefault();
  }

  async render() {
    // declare the shape of the image
    return JSX.createElement(
      "div",
      {
        style: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
        },
      },
      JSX.createElement("h1", null, "Hello, World!")
    );
  }
}

async function main() {
  // create an instance of the builder
  const generator = new Generator();
  // build the image and save it to a file
  const image = await generator.build({ format: "png" });

  await writeFile("image.png", image);
}

main();
```

--------------------------------

### Instantiate and Configure MusicCard in TypeScript

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/music-card.mdx

This snippet shows how to import and use the MusicCard class in TypeScript. It demonstrates chaining methods to set the author, title, image URL, playback progress, current time, and total duration before building the final image.

```TypeScript
import { MusicCard } from "./MusicCard";

const card = new MusicCard()
  .setAuthor("JVKE")
  .setTitle("Golden Hour")
  .setImage(
    "https://lh3.googleusercontent.com/i1qCCS4BbP6z11E08FkQg6fN-83Uj4fQg4bmBsD2E6SvGQ3RW7nXxpQ3hmcSlI5Ipek10H7R4BjV5mAY=w544-h544-l90-rj"
  )
  .setProgress(39)
  .setCurrentTime("01:58")
  .setTotalTime("02:59");

const image = await card.build();
// now do something with the image buffer
```

--------------------------------

### Canvacord MusicCard Class Implementation (JavaScript)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/music-card.mdx

This snippet demonstrates the implementation of the MusicCard class using Canvacord's Builder and JSX. It includes methods to set the image, title, author, current time, total time, and progress, along with a render method to generate the card. It requires the 'canvacord' library.

```javascript
const { JSX, Builder, loadImage } = require("canvacord");

class MusicCard extends Builder {
  constructor() {
    super(930, 280);
    this.bootstrap({
      author: "",
      currentTime: "00:00",
      totalTime: "00:00",
      progress: 0,
      image: "",
      title: "",
    });
  }

  setImage(image) {
    this.options.set("image", image);
    return this;
  }

  setTitle(title) {
    this.options.set("title", title);
    return this;
  }

  setAuthor(author) {
    this.options.set("author", author);
    return this;
  }

  setCurrentTime(time) {
    this.options.set("currentTime", time);
    return this;
  }

  setTotalTime(time) {
    this.options.set("totalTime", time);
    return this;
  }

  setProgress(progress) {
    this.options.set("progress", progress);
    return this;
  }

  async render() {
    const { author, currentTime, image, progress, title, totalTime } =
      this.options.getOptions();
    const art = await loadImage(image);
    return JSX.createElement(
      "div",
      {
        style: {
          background: "linear-gradient(to top, #120C17, #010424, #201C5B)",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 8,
          borderRadius: "0.5rem",
          height: "100%",
          width: "100%",
        },
      },
      JSX.createElement("img", {
        src: art.toDataURL(),
        alt: "img",
        style: {
          borderRadius: "50%",
          height: "12rem",
          width: "12rem",
        },
      }),
      JSX.createElement(
        "div",
        {
          style: {
            color: "white",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          },
        },
        JSX.createElement(
          "h1",
          {
            style: {
              fontSize: "1.5rem",
              lineHeight: 2,
              marginBottom: 0,
              marginTop: "0.75rem",
            },
          },
          title
        ),
        JSX.createElement(
          "h4",
          {
            style: {
              fontSize: "1.125rem",
              lineHeight: 1,
              marginTop: 0,
              color: "#FFFFFFAA",
              fontWeight: 500,
            },
          },
          author
        )
      ),
      JSX.createElement(
        "div",
        {
          style: {
            display: "flex",
            flexDirection: "column",
          },
        },
        JSX.createElement(
          "div",
          {
            style: {
              position: "relative",
              height: "0.5rem",
              width: "20rem",
              backgroundColor: "white",
            },
          },
          JSX.createElement("div", {
            style: {
              position: "absolute",
              height: "0.5rem",
              width: `${progress}%`,
              maxWidth: "20rem",
              backgroundColor: "#9333EA",
            },
          })
        ),
        JSX.createElement(
          "div",
          {
            style: {
              marginTop: "3px",
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              fontSize: "14",
              fontWeight: "500",
              color: "#FFFFFFAA",
            },
          },
          JSX.createElement("span", null, currentTime),
          JSX.createElement("span", null, totalTime)
        )
      )
    );
  }
}
```
    }
  ]
}
```
```

--------------------------------

### Create Music Card Component with Canvacord (TypeScript)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/music-card.mdx

This snippet demonstrates how to create a reusable 'MusicCard' component using Canvacord and TypeScript. It allows setting album art, title, author, and playback progress. The component utilizes JSX for rendering and requires the 'canvacord' library.

```typescript
/** @jsx JSX.createElement */
/** @jsxFrag JSX.Fragment */

import { JSX, Builder, loadImage } from "canvacord";

interface Props {
  image: string;
  title: string;
  author: string;
  currentTime: string;
  totalTime: string;
  progress: number;
}

export class MusicCard extends Builder<Props> {
  constructor() {
    super(377, 523);
    this.bootstrap({
      author: "",
      currentTime: "00:00",
      totalTime: "00:00",
      progress: 0,
      image: "",
      title: "",
    });
  }

  setImage(image: string) {
    this.options.set("image", image);
    return this;
  }

  setTitle(title: string) {
    this.options.set("title", title);
    return this;
  }

  setAuthor(author: string) {
    this.options.set("author", author);
    return this;
  }

  setCurrentTime(time: string) {
    this.options.set("currentTime", time);
    return this;
  }

  setTotalTime(time: string) {
    this.options.set("totalTime", time);
    return this;
  }

  setProgress(progress: number) {
    this.options.set("progress", progress);
    return this;
  }

  async render() {
    const { author, currentTime, image, progress, title, totalTime } =
      this.options.getOptions();

    const art = await loadImage(image);

    return (
      <div
        style={{
          background: "linear-gradient(to top, #120C17, #010424, #201C5B)",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 8,
          borderRadius: "0.5rem",
          height: "100%",
          width: "100%",
        }}
      >
        <img
          src={art.toDataURL()}
          alt="img"
          style={{
            borderRadius: "50%",
            height: "12rem",
            width: "12rem",
          }}
        />
        <div
          style={{
            color: "white",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <h1
            style={{
              fontSize: "1.5rem",
              lineHeight: 2,
              marginBottom: 0,
              marginTop: "0.75rem",
            }}
          >
            {title}
          </h1>
          <h4
            style={{
              fontSize: "1.125rem",
              lineHeight: 1,
              marginTop: 0,
              color: "#FFFFFFAA",
              fontWeight: 500,
            }}
          >
            {author}
          </h4>
        </div>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
          }}
        >
          <div
            style={{
              position: "relative",
              height: "0.5rem",
              width: "20rem",
              backgroundColor: "white",
              display: "flex",
              flexDirection: "column",
            }}
          >
            <div
              style={{
                position: "absolute",
                height: "0.5rem",
                width: `${progress}%`,
                maxWidth: "20rem",
                backgroundColor: "#9333EA",
              }}
            />
          </div>
          <div
            style={{
              marginTop: "3px",
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              fontSize: "14",
              fontWeight: "500",
              color: "#FFFFFFAA",
            }}
          >
            <span>{currentTime}</span>
            <span>{totalTime}</span>
          </div>
        </div>
      </div>
    );
  }
}

```

--------------------------------

### Create Music Card Component with Canvacord (ES Modules)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/music-card.mdx

This snippet shows the implementation of a 'MusicCard' component using Canvacord and ES Modules. It provides similar functionality to the TypeScript version, allowing customization of music playback details and visual elements. The component relies on the 'canvacord' library and JSX.

```javascript
import { JSX, Builder, loadImage } from "canvacord";

export class MusicCard extends Builder {
  constructor() {
    super(930, 280);
    this.bootstrap({
      author: "",
      currentTime: "00:00",
      totalTime: "00:00",
      progress: 0,
      image: "",
      title: "",
    });
  }

  setImage(image) {
    this.options.set("image", image);
    return this;
  }

  setTitle(title) {
    this.options.set("title", title);
    return this;
  }

  setAuthor(author) {
    this.options.set("author", author);
    return this;
  }

  setCurrentTime(time) {
    this.options.set("currentTime", time);
    return this;
  }

  setTotalTime(time) {
    this.options.set("totalTime", time);
    return this;
  }

  setProgress(progress) {
    this.options.set("progress", progress);
    return this;
  }

  async render() {
    const { author, currentTime, image, progress, title, totalTime } =
      this.options.getOptions();
    const art = await loadImage(image);
    return JSX.createElement(
      "div",
      {
        style: {
          background: "linear-gradient(to top, #120C17, #010424, #201C5B)",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 8,
          borderRadius: "0.5rem",
          height: "100%",
          width: "100%",

```

--------------------------------

### JSX Pragma Configuration

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/builders/jsx-syntax.mdx

Shows how to configure the JSX pragma as comments to instruct transpilers on how to convert JSX syntax into JavaScript. It specifies the functions for element creation and fragment handling.

```js
/** @jsx JSX.createElement */
/** @jsxFrag JSX.Fragment */
```

--------------------------------

### Create and Configure Quote Card (JavaScript)

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/quote.mdx

This snippet demonstrates the usage of the QuoteCard class to create a customized quote card. It shows how to set various properties like text, author, watermark, background image, and color. The `build` method is called to generate the image buffer.

```javascript
const { QuoteCard } = require("./QuoteCard");

const card = new QuoteCard()
  .setText("hello")
  .setAuthor("Ziji")
  .setTag("__ziji")
  .setWatermark("Ziji#7063")
  .setBackgroundImage(
    "https://lh3.googleusercontent.com/pw/AP1GczN0ncQYhFuV0qUcW68KX4a5DCwXw7MlobnY0aGOLnpUeareeV1pNxZoF4PayOrcqgBapur4iM0MlxdiW6T9uhwMqmlLP1A1TBKUIPOt7E0-eH0EV2FddVDvyyXHnx7tyGCLwheiZjiaVA9xSQ4a8xTnDw=w780-h712-s-no-gm"
  )
  .setColor(true);

const result = await card.build({ format: "png" });
// now do something with the image buffer
```

--------------------------------

### Create Quote Card with Node.js using Canvacord

Source: https://github.com/neplextech/canvacord/blob/main/apps/www/examples/builders/quote.mdx

This snippet demonstrates how to create a quote card using the Canvacord library in Node.js. It requires the 'canvacord' package and outputs an image buffer.

```javascript
const Canvacord = require("canvacord").Canvas; 

// ... somewhere in your code

const buffer = await Canvacord.quote({ 
    username: "Username", 
    avatar: "URL_TO_AVATAR", 
    content: "This is the quote content!", 
    color: "#ffffff" 
});

// The 'buffer' variable now holds the image buffer.
```