Guides & Examples

Welcome to the RIXL Guides — your comprehensive resource for building media-rich applications. Whether you're implementing video streaming, delivering images, or creating dynamic content feeds, these guides provide practical, step-by-step instructions to help you succeed.

Quick Actions

React Integration

Drop-in components for video players, delivered images, and content feeds.

API Implementation

Build custom workflows with our comprehensive REST API.

Dashboard Workflow

Upload, manage, and deliver media through our web interface.

Implementation Guides

Frontend Integration

React Components

Video, Image, and Feed components with automatic preparation and global delivery.

JavaScript SDK

Vanilla JavaScript integration for any web application or framework.

Mobile Integration

Responsive components that work seamlessly across all devices and screen sizes.

Backend Integration

Upload Workflows

Programmatic media uploads with progress tracking and status monitoring.

Processing Automation

Automated media processing pipelines with quality tier selection.

Content Management

Organize and manage media libraries through API endpoints.

Real-World Use Cases

Video Applications

Video Streaming Platform

Build Netflix-style streaming with adaptive quality, HLS & DASH delivery, and global CDN.

Social Media App

User-generated content with automatic preparation and mobile-first delivery.

E-learning Platform

Educational content with progress tracking, quality controls, and accessibility features.

Image Applications

E-commerce Store

Product galleries with AVIF transformation, lazy loading, and responsive images.

Portfolio Website

High-quality image galleries with smart placeholders and instant loading.

Content Management

Editorial workflows with automatic preparation and multi-format delivery.

Content Feed Applications

Social Feed

Instagram-style feeds with automatic updates and infinite scroll.

News Platform

Dynamic content feeds with real-time updates and personalization.

Creator Platform

Multi-creator content feeds with subscription and monetization features.

Code Examples

React Components

import {Video, useProgressBar} from '@rixl/videosdk-react';
import {useRef} from 'react';

function VideoPlayer({videoId}) {
const videoRef = useRef(null);
const {progress, duration} = useProgressBar({video: videoRef.current});

return (
<div className="video-container">
<Video
ref={videoRef}
   id={videoId}
   className="w-full h-auto rounded-lg"
   progressBar={true}
   allowFullscreen={true}
   autoplay={false}
   muted={false}
/>
<div className="video-info">
<p>Progress: {Math.round(progress * 100)}%</p>
<p>Duration: {duration}s</p>
</div>
</div>
);
}

import {Image} from '@rixl/videosdk-react';

function ImageGallery({images}) {
return (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{images.map((image) => (
<div key={image.id} className="aspect-square">
<Image
  id={image.id}
  alt={image.description}
  className="w-full h-full object-cover rounded-lg hover:scale-105 transition-transform"
  loading="lazy"
/>
</div>
))}
</div>
);
}

import {Feed} from '@rixl/videosdk-react';

function ContentFeed({feedId, creatorId}) {
return (
<div className="max-w-2xl mx-auto">
<Feed
feedId={feedId}
   creatorId={creatorId}
   className="w-full space-y-6"
   showHeader={true}
   enableInfiniteScroll={true}
   itemsPerPage={10}
/>
</div>
);
}

API Integration Examples

// Initialize video upload
const uploadVideo = async (file) => {
const initResponse = await fetch('https://api.rixl.com/videos/upload/init', {
method: 'POST',
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({
file_name: file.name,
video_quality: 'pro',
image_format: 'jpg'
})
});

const {video_id, video_presigned_url} = await initResponse.json();

// Upload file to presigned URL
await fetch(video_presigned_url, {
method: 'PUT',
body: file
});

return video_id;
};

// Upload and process image
const uploadImage = async (imageFile) => {
// Initialize upload
const initResponse = await fetch('https://api.rixl.com/images/upload/init', {
method: 'POST',
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: imageFile.name,
format: 'jpg'
})
});

const {image_id, presigned_url} = await initResponse.json();

// Upload file to presigned URL
await fetch(presigned_url, {
method: 'PUT',
body: imageFile
});

// Complete upload
const completeResponse = await fetch('https://api.rixl.com/images/upload/complete', {
method: 'POST',
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({
image_id: image_id
})
});

const result = await completeResponse.json();
return result.data;
};

// Get feed content
const getFeedContent = async (feedId, creatorId = null) => {
const params = new URLSearchParams();
if (creatorId) params.append('creator_id', creatorId);

const response = await fetch(`https://api.rixl.com/feeds/${feedId}?${params}`, {
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY'
}
});

const result = await response.json();
return result.data;
};

Implementation Patterns

Progressive Enhancement

Start Simple

Begin with basic Video and Image components, then add advanced features as needed.

Add Interactivity

Implement progress tracking, quality controls, and user preferences.

Scale Globally

Leverage CDN delivery and adaptive streaming for worldwide performance.

Performance Enhancement

Lazy Loading

Load media only when needed to improve initial page performance.

Smart Caching

Utilize browser caching and CDN edge locations for instant delivery.

Adaptive Quality

Automatically adjust quality based on user connection and device capabilities.

Next Steps

Ready to start building? Choose your path:

React SDK Setup

Install and configure RIXL components in your React application.

API Integration

Build custom workflows with our comprehensive REST API.

Dashboard Upload

Start uploading and delivering media through our web interface.

Need inspiration?

Explore our Best Practices for performance tips, check out the Platform Documentation for comprehensive features, or dive into the API Reference for detailed technical documentation.