SDKs & Libraries

Tuzzle provides a REST API that can be used from any language or framework. SDKs simplify integration by providing typed methods and handling authentication.

REST API

The Tuzzle API is a standard REST API that accepts JSON and multipart form data. You can use it from any HTTP client:

// JavaScript / Node.js
const response = await fetch('https://api.tzzl.io/api/v1/upload', {
  method: 'POST',
  headers: { 'Authorization': `Bearer ${apiKey}` },
  body: formData,
});

# Python
import requests

response = requests.post(
    'https://api.tzzl.io/api/v1/upload',
    headers={'Authorization': f'Bearer {api_key}'},
    files={'file': open('photo.jpg', 'rb')},
    data={'space': 'a1b2c3'},
)

// PHP
$response = Http::withToken($apiKey)
    ->attach('file', file_get_contents('photo.jpg'), 'photo.jpg')
    ->post('https://api.tzzl.io/api/v1/upload', [
        'space' => 'a1b2c3',
    ]);

// Go
req, _ := http.NewRequest("POST", "https://api.tzzl.io/api/v1/upload", body)
req.Header.Set("Authorization", "Bearer "+apiKey)
req.Header.Set("Content-Type", writer.FormDataContentType())
resp, _ := http.DefaultClient.Do(req)

CDN URL Builder

Building CDN URLs is straightforward string concatenation:

function tuzzleUrl(spacePath, options = {}) {
  const base = `https://cdn.tzzl.io/${spacePath}`;
  const params = new URLSearchParams();

  if (options.width) params.set('w', options.width);
  if (options.height) params.set('h', options.height);
  if (options.format) params.set('f', options.format);
  if (options.quality) params.set('q', options.quality);
  if (options.resize) params.set('r', options.resize);
  if (options.gravity) params.set('g', options.gravity);

  const query = params.toString();
  return query ? `${base}?${query}` : base;
}

// Usage
tuzzleUrl('a1b2c3/image-01HQ...', {
  width: 400,
  height: 300,
  format: 'webp',
  quality: 80,
});
// https://cdn.tzzl.io/a1b2c3/image-01HQ...?w=400&h=300&f=webp&q=80

Framework Integration

HTML

<img
  src="https://cdn.tzzl.io/a1b2c3/image-01HQ...?w=800&f=webp&q=80"
  alt="My image"
  loading="lazy"
/>

React

function TuzzleImage({ path, width, height, format = 'webp', quality = 80 }) {
  const params = new URLSearchParams({ w: width, h: height, f: format, q: quality });
  return (
    <img
      src={`https://cdn.tzzl.io/${path}?${params}`}
      width={width}
      height={height}
      loading="lazy"
    />
  );
}

Vue / Nuxt

<template>
  <img :src="imageUrl" :width="width" :height="height" loading="lazy" />
</template>

<script setup>
const props = defineProps({ path: String, width: Number, height: Number });
const imageUrl = computed(() =>
  `https://cdn.tzzl.io/${props.path}?w=${props.width}&h=${props.height}&f=webp&q=80`
);
</script>

API Reference

For the complete API specification, see the API Reference.