Embedding a Feed

To embed a video feed, create a ShortKit instance and hand it to one of two feed components depending on your UI framework. The feed supports several item types: video, live stream, image carousel, video carousel, survey, and ad slot. For full model definitions, field descriptions, and usage examples across all platforms, see the Content Types guide. Live streams render as videos with an isLive flag set on the content item — see the Live Streams guide for details on creating, broadcasting, and clipping streams. Protected content plays in the feed automatically — the SDK issues and refreshes the signed streaming URL for you, with no extra integration.

Filtered feeds

When FeedConfig.filter is set, the feed only shows content matching the filter criteria. Filtering is handled server-side — the SDK applies the filter automatically on every request (initial load, pagination, pull-to-refresh).

ShortKitFeedViewController (UIKit)

public class ShortKitFeedViewController: UIViewController {
    public init(shortKit: ShortKit)
}

ShortKitFeedViewController renders the feed as a page-snapping UICollectionView. By default the feed scrolls vertically (swipe up/down); set FeedConfig.scrollAxis to .horizontal for left/right swiping. It manages the entire lifecycle internally: pagination, player rotation, ad loading, overlay rendering, captions, and memory cleanup. All state is driven by the ShortKit instance you pass at init.

iOS (UIKit)
Android
Flutter
React Native
Web

Push onto a UINavigationController:

ViewController.swift

import ShortKitSDK

class ViewController: UIViewController {
    private var shortKit: ShortKit!

    override func viewDidLoad() {
        super.viewDidLoad()

        shortKit = ShortKit(
            apiKey: "pk_live_your_publishable_key",
            config: FeedConfig()
        )

        let feedVC = ShortKitFeedViewController(shortKit: shortKit)
        navigationController?.pushViewController(feedVC, animated: true)
    }
}

MainActivity.kt

import dev.shortkit.ShortKit
import dev.shortkit.FeedConfig
import dev.shortkit.ShortKitFeedFragment

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val shortKit = ShortKit(
            apiKey = "pk_live_your_publishable_key",
            config = FeedConfig()
        )

        val feedFragment = ShortKitFeedFragment(shortKit)
        supportFragmentManager.beginTransaction()
            .replace(R.id.container, feedFragment)
            .commit()
    }
}

FeedScreen.dart

import 'package:flutter/material.dart';
import 'package:shortkit_flutter/shortkit_flutter.dart';

class FeedScreen extends StatelessWidget {
  const FeedScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return ShortKitProvider.apiKey(
      apiKey: 'pk_live_your_publishable_key',
      child: const Scaffold(
        body: ShortKitFeed(),
      ),
    );
  }
}

FeedScreen.tsx

import React from 'react';
import { ShortKitProvider, ShortKitFeed } from '@shortkitsdk/react-native';

export default function FeedScreen() {
  return (
    <ShortKitProvider
      apiKey="pk_live_your_publishable_key"
      config={{}}
    >
      <ShortKitFeed style={{ flex: 1 }} />
    </ShortKitProvider>
  );
}

app.js

const sk = new ShortKit({
  apiKey: 'pk_live_your_publishable_key',
});

const feed = sk.createFeed(document.getElementById('feed'), {
  config: {},
  onFeedReady: () => console.log('Feed loaded'),
});

Embedding as a child view controller

Use standard UIKit container view controller APIs when you need the feed to occupy part of the screen:

let feedVC = ShortKitFeedViewController(shortKit: shortKit)
addChild(feedVC)
feedVC.view.frame = view.bounds
feedVC.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(feedVC.view)
feedVC.didMove(toParent: self)

Lifecycle

iOS
Android
Flutter
React Native
Web

ShortKitFeedViewController responds to standard UIKit lifecycle events. Playback pauses automatically when the view controller disappears and resumes when it reappears. You do not need to call play() or pause() manually during navigation transitions.

ShortKitFeedFragment manages playback lifecycle automatically — no manual calls needed. Resources are released when the Activity is destroyed.If you embed the fragment inside a Compose AndroidView with tab-based visibility (where the fragment stays mounted but hidden), call shortKit.pause() and shortKit.resume() to stop playback on the hidden tab:

LaunchedEffect(isVisible) {
    if (isVisible) shortKit.resume() else shortKit.pause()
}

The Flutter SDK automatically pauses and resumes playback when the app moves to and from the background using WidgetsBindingObserver. No manual lifecycle management is needed.

The React Native SDK automatically pauses and resumes playback when the app moves to and from the background using AppState listeners. No manual lifecycle management is needed.

Call feed.destroy() to tear down the feed and release all resources. Call sk.destroy() to clean up the entire SDK instance. The Web SDK automatically pauses playback when the browser tab is hidden via the Page Visibility API.

// Tear down the feed
feed.destroy();

// Tear down the entire SDK instance
sk.destroy();

ShortKitFeedView (SwiftUI)

public struct ShortKitFeedView: UIViewControllerRepresentable {
    public init(shortKit: ShortKit)
}

ShortKitFeedView is a UIViewControllerRepresentable wrapper around ShortKitFeedViewController. It works anywhere a SwiftUI View is accepted.

iOS (SwiftUI)
Android
Flutter
React Native
Web

ContentView.swift

import SwiftUI
import ShortKitSDK

struct ContentView: View {
    let shortKit = ShortKit(
        apiKey: "pk_live_your_publishable_key",
        config: FeedConfig()
    )

    var body: some View {
        ShortKitFeedView(shortKit: shortKit)
            .ignoresSafeArea()
    }
}

import dev.shortkit.ShortKit
import dev.shortkit.FeedConfig
import dev.shortkit.ShortKitFeedView

@Composable
fun FeedScreen() {
    val shortKit = remember {
        ShortKit(
            apiKey = "pk_live_your_publishable_key",
            config = FeedConfig()
        )
    }

    ShortKitFeedView(shortKit)
}

import 'package:flutter/material.dart';
import 'package:shortkit_flutter/shortkit_flutter.dart';

class FeedScreen extends StatelessWidget {
  const FeedScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return ShortKitProvider.apiKey(
      apiKey: 'pk_live_your_publishable_key',
      child: const Scaffold(
        body: ShortKitFeed(),
      ),
    );
  }
}

import React from 'react';
import { ShortKitProvider, ShortKitFeed } from '@shortkitsdk/react-native';

export default function App() {
  return (
    <ShortKitProvider
      apiKey="pk_live_your_publishable_key"
      config={{}}
    >
      <ShortKitFeed style={{ flex: 1 }} />
    </ShortKitProvider>
  );
}

app.js

const sk = new ShortKit({
  apiKey: 'pk_live_your_publishable_key',
});

const feed = sk.createFeed(document.getElementById('feed'), {
  config: {},
});

Store the ShortKit instance outside the view body. Creating it inside the body property causes re-initialization on every SwiftUI render pass.

Partial-height feed in SwiftUI

Use FeedConfig.feedHeight to make the feed occupy a portion of the screen:

let shortKit = ShortKit(
    apiKey: "pk_live_your_publishable_key",
    config: FeedConfig(feedHeight: .percentage(0.75))
)

var body: some View {
    VStack {
        ShortKitFeedView(shortKit: shortKit)
        CustomBottomBar()
    }
}

Get Started

Content

Display

Build Your Experience

Users & Data

Filtered feeds

ShortKitFeedViewController (UIKit)

Embedding in a navigation stack

Embedding as a child view controller

Lifecycle

ShortKitFeedView (SwiftUI)

Partial-height feed in SwiftUI

​Filtered feeds

​ShortKitFeedViewController (UIKit)

​Embedding in a navigation stack

​Embedding as a child view controller

​Lifecycle

​ShortKitFeedView (SwiftUI)

​Partial-height feed in SwiftUI

Filtered feeds

ShortKitFeedViewController (UIKit)

Embedding in a navigation stack

Embedding as a child view controller

Lifecycle

ShortKitFeedView (SwiftUI)

Partial-height feed in SwiftUI