Guides & Examples
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.
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} 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).
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;
};
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.