Documentation

Getting Started

Generate a placeholder image by constructing a URL with your desired dimensions:

https://chittra.bishestamedia.com.np/600x400

This returns an SVG image with dimensions 600x400 pixels.

URL Structure

https://chittra.bishestamedia.com.np/{size}/{background}/{textColor}/{format}?text=...&font=...

All parameters except size are optional.

Part	Required	Description
`size`	Yes	Image dimensions
`background`	No	Background color (default: #eeeeee)
`textColor`	No	Text color (default: #555555)
`format`	No	Output format (default: svg)
`?text`	No	Custom display text
`?font`	No	Font family (default: lato)

Parameters

Size

Specify dimensions in pixels. Supports multiple formats:

Format	Example	Result
Width x Height	`600x400`	600px wide, 400px tall
Square	`400`	400px x 400px
Retina (@2x)	`600x400@2x`	1200px x 800px
Retina (@3x)	`400@3x`	1200px x 1200px

Min: 10px | Max: 4000px | Max scale: @4x

Text

Custom text displayed on the image. Use query parameter:

https://chittra.bishestamedia.com.np/600x400?text=Hello+World

Use + or %20 for spaces
Use \n for line breaks
Default text shows dimensions (e.g., "600 x 400")

Output Formats

Format	Usage	Transparency	Best For
SVG	`/600x400` (default)	Yes	Scalable, smallest size
PNG	`/600x400/png`	Yes	Lossless, wide support
WebP	`/600x400/webp`	Yes	Modern browsers, good compression
JPEG	`/600x400/jpeg`	No	Photos, legacy support
AVIF	`/600x400/avif`	Yes	Best compression, newer browsers

Colors

Colors can be specified in multiple formats:

Type	Example	URL
Hex (6 digits)	`3b82f6`	`/600x400/3b82f6/ffffff`
Hex (3 digits)	`f00`	`/600x400/f00/fff`
Named colors	`blue`	`/600x400/blue/white`
Transparent	`transparent`	`/600x400/transparent/333/png`

Supported named colors: black, white, red, green, blue, yellow, orange, purple, pink, cyan, gray, and more.

Fonts

Use the font query parameter to change the font:

https://chittra.bishestamedia.com.np/600x400?font=roboto

Available Fonts

lato

roboto

opensans

montserrat

poppins

raleway

oswald

noto

ptsans

sourcesans

inter

lora

playfair

merriweather

mono

fira

Examples

Basic placeholder

https://chittra.bishestamedia.com.np/600x400

Square image

https://chittra.bishestamedia.com.np/400

Custom colors

https://chittra.bishestamedia.com.np/600x400/3b82f6/ffffff

Custom text

https://chittra.bishestamedia.com.np/600x400?text=Hello+World

Custom font

https://chittra.bishestamedia.com.np/600x400?font=poppins

PNG format

https://chittra.bishestamedia.com.np/600x400/png

Transparent background

https://chittra.bishestamedia.com.np/600x400/transparent/333/png

Retina (2x scale)

https://chittra.bishestamedia.com.np/600x400@2x

HTML Usage

Basic Image

<img src="https://chittra.bishestamedia.com.np/600x400" alt="Placeholder">

Responsive with Retina

<img 
  src="https://chittra.bishestamedia.com.np/600x400" 
  srcset="https://chittra.bishestamedia.com.np/600x400@2x 2x"
  alt="Placeholder">

CSS Background

.hero {
  background-image: url('https://chittra.bishestamedia.com.np/1920x1080');
  background-size: cover;
}

Markdown

![Placeholder](https://chittra.bishestamedia.com.np/600x400)

API Reference

Endpoint	Description
`GET /`	Homepage
`GET /docs`	Documentation (this page)
`GET /health`	Health check with cache stats
`GET /:size`	Generate image with size only
`GET /:size/:format`	Generate image with format
`GET /:size/:bg/:color`	Generate image with colors
`GET /:size/:bg/:color/:format`	Generate image with colors and format

Response Headers

Cache-Control: public, max-age=31536000, immutable
X-Cache: HIT or MISS

Self-Hosting

Installation

git clone https://github.com/birajrai/chittra.git
cd chittra
npm install
npm start

Using Bun

bun install
bun start

Environment Variables

Variable	Default	Description
`PORT`	3000	Server port
`HOST`	0.0.0.0	Server host
`CHITTRA_CACHE_TTL`	3600000	Cache TTL (ms)
`CHITTRA_CACHE_MAX_ITEMS`	1000	Max cached items
`CHITTRA_CONCURRENCY`	4	Max concurrent renders

Contents