> ## Documentation Index
> Fetch the complete documentation index at: https://canvacord.neplex.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Welcome to the canvacord documentation!

***

## What is canvacord?

Canvacord is a powerful utility to generate beautiful images in JavaScript or TypeScript. You use React-like components to declare how you want your image to look, without ever having to calculate the position of elements or worry about the size of the canvas. Canvacord does all the heavy lifting for you, such as image rendering, formats conversion, and more.

Canvacord abstracts the complexity of image generation and provides a simple and intuitive API to create images. This allows you to focus on the design and content of your images, rather than the technical details that goes into rendering them as needed.

Whether you're a beginner or an expert, Canvacord is the perfect tool to create stunning images for your projects with little to no effort.

***

## Pre-requisites

We try our best to make Canvacord as easy to use as possible. However, there are a few things you need to know before you start using Canvacord. To get the most out of Canvacord, you should have a basic understanding of the following:

<CardGroup cols={2}>
  <Card title="Knowledge of JavaScript" icon="js" href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">
    Since Canvacord is a JavaScript library, you should have a basic
    understanding of JavaScript to use it effectively.
  </Card>

  <Card title="Basic knowledge of HTML" icon="html5" href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">
    Since Canvacord relies heavily on HTML tags, you should have a basic
    understanding of it.
  </Card>

  <Card title="Basic knowledge of CSS" icon="css3" href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">
    Canvacord uses CSS to style the images, such as setting the font size,
    color, width, etc. Therefore, having a basic understanding of CSS will help
    you style your images effectively.
  </Card>

  <Card title="Knowledge of React" icon="react" href="https://react.dev">
    Canvacord uses React-like components to generate images. Therefore, having a
    basic understanding of React and its terms will help you get started with
    Canvacord.
  </Card>
</CardGroup>

## Make it yours

If you have the understanding of the above concepts, you're ready to start using Canvacord. You can start by installing Canvacord and creating your first image. If you're new to Canvacord, we recommend you start with the [Quick Start](/quickstart) guide to get a better understanding of how Canvacord works.

<CardGroup cols={2}>
  <Card title="Quick Start" icon="code" href="/quickstart">
    Get started with Canvacord by creating your first image using built-in
    builders.
  </Card>

  <Card title="Custom Builders" icon="screwdriver-wrench" href="/builders/introduction">
    Build your own image components using Canvacord's custom builders.
  </Card>

  <Card title="Image Manipulation" icon="palette" href="/image-manipulation/introduction">
    Learn how to manipulate images using Canvacord's built-in image manipulation
    tools.
  </Card>

  <Card title="API Reference" icon="code" href="https://canvacord.js.org/docs">
    Learn about Canvacord's API and how to use it effectively.
  </Card>

  <Card title="Discord Server" icon="discord" href="https://neplextech.com/discord">
    Join our Discord server to get help, share your projects, and more.
  </Card>

  <Card title="Source Code" icon="github" href="https://github.com/neplextech/canvacord">
    Contribute to Canvacord by submitting bug reports, feature requests, and
    more.
  </Card>
</CardGroup>