Skip to main content

Twick Examples

Example implementations and demonstrations of the Twick SDK features.

Overview​

This package contains comprehensive examples showcasing the usage of Twick packages including @twick/live-player, @twick/canvas, @twick/timeline, and @twick/video-editor with React and React Router.

Getting Started​

These steps will help you run the example project locally using pnpm.

Installation​

pnpm install

Development Server​

pnpm dev

Build for Production​

pnpm build

Preview Production Build​

pnpm preview

Available Examples​

Basic Video Player​

Demonstrates basic video playback functionality using @twick/live-player.

Timeline Editor​

Shows timeline management and editing capabilities with @twick/timeline.

Canvas Manipulation​

Examples of canvas-based video and image editing using @twick/canvas.

Complete Video Editor​

Full-featured video editor implementation showcasing all Twick packages working together.

Custom Components​

Examples of custom component integration and extension patterns.

Project Structure​

src/
├── components/     # Reusable React components
├── helpers/        # Utility functions and helpers
├── pages/          # Example pages and demonstrations
├── samples/        # Sample data and configurations
└── shared/         # Shared types and constants

Key Features Demonstrated​

  • Video playback and control
  • Timeline-based editing
  • Canvas manipulation
  • Multi-track timeline management
  • Real-time project updates
  • Custom component integration
  • Performance optimization techniques

Browser Support​

This package requires a browser environment with support for:

  • HTML5 Video and Audio
  • Canvas API
  • Modern JavaScript features (ES2020+)
  • React 18+

Documentation​

For complete documentation, refer to the project documentation site.

Contributing​

When adding new examples:

  • Follow the established project structure
  • Include proper TypeScript types
  • Add comprehensive comments
  • Ensure examples are production-ready
  • Test across different browsers

License​

This package is licensed under the Sustainable Use License (SUL) Version 1.0.

  • Free for use in commercial and non-commercial apps
  • Can be modified and self-hosted
  • Cannot be sold, rebranded, or distributed as a standalone SDK

For commercial licensing inquiries, contact: contact@kifferai.com

For full license terms, see the main LICENSE.md file in the project root.