Guides & Examples
Step-by-step tutorials, real-world examples, and practical implementation guides for building amazing media experiences with RIXL.
Step-by-step tutorials, real-world examples, and practical implementation guides for building amazing media experiences with RIXL.
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.
Drop-in components for video players, delivered images, and content feeds.
Build custom workflows with our comprehensive REST API.
Upload, manage, and deliver media through our web interface.
Video, Image, and Feed components with automatic preparation and global delivery.
Vanilla JavaScript integration for any web application or framework.
Responsive components that work seamlessly across all devices and screen sizes.
Programmatic media uploads with progress tracking and status monitoring.
Automated media processing pipelines with quality tier selection.
Organize and manage media libraries through API endpoints.
Build Netflix-style streaming with adaptive quality, HLS & DASH delivery, and global CDN.
User-generated content with automatic preparation and mobile-first delivery.
Educational content with progress tracking, quality controls, and accessibility features.
Product galleries with AVIF transformation, lazy loading, and responsive images.
High-quality image galleries with smart placeholders and instant loading.
Editorial workflows with automatic preparation and multi-format delivery.
Instagram-style feeds with automatic updates and infinite scroll.
Dynamic content feeds with real-time updates and personalization.
Multi-creator content feeds with subscription and monetization features.
import {Video} from '@rixl/media-react';
function VideoWithProgress({videoId}) {
return (
<Video
id={videoId}
className="w-full h-auto rounded-lg"
controls
analytics
analyticsPage="feed"
onRixlAnalytics={(e) => console.log(e.detail.event)}
/>
);
}The React SDK wraps the Lit web components (<rixl-video>, <rixl-image>, <rixl-feed>) with @lit/react. Use onRixlAnalytics to receive analytics events. Video forwards standard media attributes (autoPlay, muted, loop, playsInline, poster, volume) and player UI props (controls, theme, progressBar, showChapters, chapters, heatmap, hotSegments, allowFullscreen, allowPictureInPicture, autoHideMs, resumeProgress, soundDisabled).
// 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;
};
Begin with basic Video and Image components, then add advanced features as needed.
Implement progress tracking, quality controls, and user preferences.
Leverage CDN delivery and adaptive streaming for worldwide performance.
Load media only when needed to improve initial page performance.
Utilize browser caching and CDN edge locations for instant delivery.
Automatically adjust quality based on user connection and device capabilities.
Ready to start building? Choose your path:
Install and configure RIXL components in your React application.
Build custom workflows with our comprehensive REST API.
Start uploading and delivering media through our web interface.
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.