Quickstart

Get your API key, install the SDK, and display a feed. Your account comes with demo content so you can see results immediately.

Prerequisites

Requirement	Details
ShortKit account	Sign up at portal.shortkit.dev or contact us
Publishable key	`pk_live_...` from Settings > API Keys in the portal
SDK installed	Follow the Installation guide for your platform

1. Install the SDK

If you haven’t already, add ShortKit to your project. See Installation for full details and troubleshooting.

In Xcode, go to File > Add Package Dependencies and enter:

https://github.com/shortkit/shortkit-ios

Select the ShortKitSDK product and add it to your app target.

Add to your app-level build.gradle.kts:

build.gradle.kts

dependencies {
    implementation("dev.shortkit:shortkit:0.2.22")
}

Sync your project.

Add to your pubspec.yaml:

pubspec.yaml

dependencies:
  shortkit_flutter: ^0.2.22

flutter pub get

For iOS, ensure ios/Podfile has platform :ios, '16.0'.

npm install @shortkitsdk/react-native
cd ios && pod install

npx expo install @shortkitsdk/react-native

Add the config plugin to your app.json:

app.json

{
  "expo": {
    "plugins": [
      "@shortkitsdk/react-native"
    ]
  }
}

Then regenerate native projects:

npx expo prebuild --clean

Add the script tag to your HTML:

<script src="https://sdk.shortkit.dev/web/0.3.0/shortkit.min.js"></script>

2. Display the feed

Every new account is seeded with demo videos, so your feed has content right away. Create a new view (or add to an existing one) and pass your publishable key:

FeedScreen.swift

import SwiftUI
import ShortKitSDK

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

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

Add FeedScreen() to your app’s navigation or set it as your root view.

FeedViewController.swift

import UIKit
import ShortKitSDK

class FeedViewController: UIViewController {
    private let shortKit = ShortKit(
        apiKey: "pk_live_your_publishable_key",
        config: FeedConfig()
    )

    override func viewDidLoad() {
        super.viewDidLoad()

        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)
    }
}

Present or push FeedViewController from your navigation stack.

FeedActivity.kt

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.shortkit.sdk.ShortKit
import com.shortkit.sdk.config.FeedConfig
import com.shortkit.sdk.feed.ShortKitFeedFragment

class FeedActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_feed)

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

        if (savedInstanceState == null) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.feed_container, ShortKitFeedFragment.newInstance(shortKit))
                .commit()
        }
    }
}

Your layout needs a container for the fragment:

res/layout/activity_feed.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/feed_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

feed_screen.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(),
      ),
    );
  }
}

Add FeedScreen() to your app’s navigation or set it as your home route.

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>
  );
}

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>
  );
}

Run with npx expo run:ios or npx expo run:android.

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ShortKit Feed</title>
  <style>
    body { margin: 0; }
    #feed { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <div id="feed"></div>
  <script src="https://sdk.shortkit.dev/web/0.3.0/shortkit.min.js"></script>
  <script>
    const { ShortKit } = window.ShortKit;
    const sk = new ShortKit({ apiKey: 'pk_live_your_publishable_key' });
    sk.createFeed(document.getElementById('feed'));
  </script>
</body>
</html>

Run your app. You should see a full-screen, vertically-scrolling video feed with the demo content.

Adding your own content

The demo videos are there to get you started. When you’re ready to add your own content, you have three options:

Portal upload. Go to Content in the admin portal and upload video files directly.
Server-side import. Use the Import API to bulk import from URLs (S3, GCS, your CDN, or even TikTok).
Direct upload. Use the Upload API to get signed URLs for client-side or server-side file uploads.

See the Upload Pipeline guide for the full walkthrough.

Next steps

Now that you have a working feed with demo content, here’s the typical path forward:

Upload your own content. Replace the demo videos with your own. You can upload through the portal, import from URLs (including TikTok), or upload directly from your server or client app.
Build an overlay. Add your own UI on top of the video player: titles, like buttons, share sheets, author info. See Overlays.
Configure the feed. Adjust feed height, mute behavior, and feed source. See Configuration.
Identify users. Link feed activity to your logged-in users with setUserId so analytics and future recommendations are per-user. See Identity.
Track engagement. Query watch time, completion rates, and custom events. See Analytics.

Get Started

Content

Display

Build Your Experience

Users & Data

Prerequisites

1. Install the SDK

2. Display the feed

Adding your own content

Next steps

​Prerequisites

​1. Install the SDK

​2. Display the feed

​Adding your own content

​Next steps

Prerequisites

1. Install the SDK

2. Display the feed

Adding your own content

Next steps