​
Setup your development environment

To get started with Canvacord, you need to have a few things set up on your local machine.

  • Node.js: Canvacord is built on Node.js, so you need to have it installed on your machine.
  • NPM: NPM is the package manager for Node.js. You will need it to install Canvacord and its dependencies.
  • Optionally TypeScript: To get the best out of Canvacord, we recommend you use TypeScript, but it’s not required.

​
Installation

npm i canvacord

​
Use it in your project

You can use Canvacord with or without JSX. JSX is a syntax extension for JavaScript that looks similar to HTML. It allows you to write HTML-like code in your JavaScript files. If you’re familiar with React, you’ll feel right at home with JSX.

Using Canvacord with 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);

​
Result of the above code

canvacord-quickstart-output

​
Further reading

To learn more about Canvacord, check out the following resources:

Image Generation

Learn how to generate custom images using Canvacord’s builder api.

Image Manipulation

Learn how to manipulate images using Canvacord’s built-in image manipulation utilities.

Built-in image builders

Use Canvacord’s built-in builders to create commonly used images quickly, such as rank cards, leaderboard images, and more.

Built-in image manipulators

Use Canvacord’s built-in builders to generate commonly used memes, such as triggered gif, jail image, and more.

Looking for examples?

Find a list of builder examples that you can copy and paste into your project.

Have a suggestion?

Create an issue on GitHub if you have a suggestion or found a bug in Canvacord.

Was this page helpful?

IntroductionIntroduction to builders