Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/KevxxAlva/tiktok-bot-downloader/llms.txt

Use this file to discover all available pages before exploring further.

TikTokSaver is organized as a two-package monorepo: a React single-page application in client/ and an Express serverless API in api/. Both packages share the same repository root and are deployed together on Vercel, where the built client assets are served as static files and the Express app is executed as a serverless function. Understanding how these two halves interact — and how they each depend on the third-party TikWM public API — is the foundation for navigating the rest of this documentation.

Monorepo structure

tiktok-bot-downloader/
├── api/
│   ├── index.js          # Express app — three routes, exported for Vercel
│   └── package.json      # CommonJS, express / cors / dotenv / @tobyg74/tiktok-api-dl
├── client/
│   ├── src/
│   │   ├── App.tsx        # Router — /, /privacy, /terms
│   │   ├── pages/
│   │   │   ├── Home.tsx
│   │   │   ├── PrivacyPolicy.tsx
│   │   │   └── TermsOfService.tsx
│   │   ├── components/
│   │   │   ├── Header.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── VideoResult.tsx
│   │   │   ├── SeoHead.tsx
│   │   │   └── GoogleAnalytics.tsx
│   │   ├── types.ts       # DownloadOption / DownloadResult interfaces
│   │   └── index.css      # Tailwind v4 + CSS custom properties
│   ├── vite.config.ts     # @tailwindcss/vite plugin, /api proxy
│   └── package.json       # ESM, React 19 / Framer Motion / React Router v7
├── package.json           # Root scripts — dev, build, install helpers
└── vercel.json            # Rewrite rules, outputDirectory, framework

Request flow

The entire user journey passes through five distinct steps, each handled by a dedicated layer of the stack.
1

Browser → GET /api/download

The user pastes a TikTok URL into the input field on the Home page and clicks Revelar Contenido. The React frontend issues axios.get('/api/download?url=<encoded-url>'). During local development, Vite’s dev server proxy forwards this to http://localhost:3000; in production on Vercel the rewrite rule in vercel.json directs it to api/index.js.
2

Express → TikWM API

The GET /api/download handler sends a POST request to https://www.tikwm.com/api/ with a FormData body containing the original TikTok URL and hd=1. TikWM returns a JSON object whose data field contains CDN URLs for the clean video (play), HD video (hdplay), watermarked video (wmplay), audio (music), cover image (cover), and an optional images array for slideshow posts.
3

Express normalizes → DownloadResult

The handler maps the raw TikWM fields into the DownloadResult shape expected by the frontend. It constructs a downloads array of DownloadOption objects, omits video entries when data.images is present (TikWM returns a broken video render for slideshows), and returns the unified JSON response.
4

Browser → GET /api/proxy-download

When the user clicks a download button, the frontend sets window.location.href to /api/proxy-download?url=<cdn-url>&filename=<safe-name>. The proxy handler fetches the media, buffers it, corrects the file extension based on the Content-Type header, and streams the complete response back to the browser with a Content-Disposition: attachment header so the browser triggers a native file save.
5

Thumbnails → GET /api/proxy-image

The VideoResult component renders cover images and slideshow thumbnails through /api/proxy-image?url=<cdn-url> rather than hitting TikTok CDN directly. The proxy fetches the image, sets a one-year Cache-Control header, and returns the buffered image — bypassing cross-origin restrictions and providing long-lived browser caching.

TikWM dependency

All media metadata and CDN URLs originate from TikWM (https://www.tikwm.com/api/), a public third-party service. TikTokSaver does not maintain its own scraper or authenticate with TikTok directly; it is entirely dependent on TikWM’s availability and rate limits.
TikWM is an external public API not operated by TikTokSaver. Heavy usage or bursts of requests may result in throttling or temporary blocks at the TikWM layer. If you are running TikTokSaver in a high-traffic environment, implement request queuing or caching of TikWM responses on your end.

Root scripts

The root package.json provides convenience scripts for working across both packages without cd-ing into each one manually.
ScriptCommandPurpose
dev:servercd api && bun index.jsStart the Express API on port 3000
dev:clientcd client && bun run devStart the Vite dev server with HMR
build-clientcd client && bun run buildType-check and bundle the React SPA
buildcd client && bun install && bun run buildFull client install + build (used by Vercel)
install-clientcd client && bun installInstall client dependencies only
install-servercd api && bun installInstall API dependencies only

Vercel deployment

The vercel.json at the repository root configures two rewrite rules. Any request matching /api/* is forwarded to api/index.js (the Express serverless function). Every other path falls through to /index.html, enabling React Router’s client-side navigation to handle deep links.
{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/index.js" },
    { "source": "/(.*)",     "destination": "/index.html"   }
  ],
  "outputDirectory": "client/dist",
  "framework": "vite"
}

Explore further

Frontend

React 19, Vite 7, Tailwind CSS v4, Framer Motion, and the component tree.

Backend

Express routes, TikWM integration, proxy logic, and Vercel serverless setup.

API Reference

Full parameter and response schemas for all three endpoints.

Build docs developers (and LLMs) love