How to Automate YouTube Shorts and TikTok Videos With Remotion

There is a content category in the tech niche that almost nobody is building programmatically. Daily tips, code walkthroughs, terminal tricks, JavaScript snippets. The kind of short-form content that developers actually watch, short enough to consume in under a minute, specific enough to be useful.

The problem most creators have is volume. Posting once a day on YouTube Shorts and twice on TikTok sounds manageable until you realise you have to script, record, edit, caption, and upload every single one. That workflow does not scale.

Remotion solves this. It is an open-source framework that lets you build videos with React. Instead of rendering a webpage, it renders video frames and exports them to an MP4 file. If your content can be described with data, you can automate it entirely.

This article uses a single topic throughout: "Daily JavaScript Tips", a YouTube Shorts and TikTok channel that posts one to two videos per day, fully automated, with zero manual editing.

What Makes the Tech Niche Ideal for This

Tech content is already structured data. A JavaScript tip has a title, a code snippet, and a one-line explanation. That is a JSON object. A JSON object can drive a full sixty-second video. One Remotion template, unlimited videos.

You do not need a designer for this. Syntax-highlighted code blocks, terminal output, animated text, code comparisons, React can render all of it. The visual assets are the content itself.

Start With the Data Model

Every video starts as a JSON entry. Before you write a single line of Remotion, define what a tip looks like:

smalltalk{
  "id": "tip-001",

  "title": "Stop Using forEach for Transformations",

  "subtitle": "Use .map() instead — here's why",

  "bad": "const out = [];\nnums.forEach(n => out.push(n * 2));",

  "good": "const out = nums.map(n => n * 2);",

  "explanation": "map() returns a new array. forEach() doesn't. One line vs five.",

  "tags": ["arrays", "clean-code", "javascript"]

}

Build 365 of these manually, with an AI model pulling from GitHub Trending or Stack Overflow's hot questions feed, or a mix of both, and your content calendar is set for a year. You review them once in a batch. Then they render and post on their own.

Setting Up Remotion

coffeescriptnpm init video@latest

Choose the Blank template. Your project renders at 1080x1920 (9:16 vertical), 30fps, capped at 59 seconds. That is the format for Shorts and TikTok.

Install what you need:

coffeescriptnpm install remotion @remotion/cli @remotion/renderer
npm install react-syntax-highlighter @remotion/google-fonts

Building the Composition

A Remotion composition is just a React component. Each Sequence is a timed section of the video.

javascriptexport const JSTipVideo: React.FC<{ tip: Tip }> = ({ tip }) => {
const { fps } = useVideoConfig();

  return (

    <AbsoluteFill style={{ background: "#0d1117" }}>

      <Sequence from={0} durationInFrames={fps * 3}>

        <TitleCard title={tip.title} subtitle={tip.subtitle} />

      </Sequence>

      <Sequence from={fps  3} durationInFrames={fps  27}>

        <CodeBlock bad={tip.bad} good={tip.good} />

      </Sequence>

      <Sequence from={fps  30} durationInFrames={fps  20}>

        <ExplanationCard text={tip.explanation} />

      </Sequence>

      <Sequence from={fps  50} durationInFrames={fps  9}>

        <OutroCard handle="@dailyjstips" />

      </Sequence>

    </AbsoluteFill>

  );

};

The CodeBlock component is where the visual work happens. A bad code example fades out, the correct version fades in with a spring animation, and syntax highlighting does the rest. React renders it. Remotion frames it. You get a video.

Automating the Render

Once you have the template, you never open Remotion's preview again. Everything renders through @remotion/renderer in a Node.js script:

dtsawait renderMedia({
  composition,

  serveUrl: bundleLocation,

  codec: "h264",

  outputLocation: ./output/${tip.id}.mp4,

  concurrency: require("os").cpus().length - 1,

});

Trigger this with a GitHub Actions cron job at 6 AM UTC. It picks today's tip from your JSON file, renders the video, and pushes the output to S3 or Google Drive. You are not involved.

nixon:
  schedule:
    - cron: "0 6 * * *"

From there, the YouTube Data API v3 and TikTok's Content Posting API handle the upload and scheduling. You set the video to private with a publishAt timestamp, and it goes public automatically at the time you specify.

Adding Graphics Over Face-Cam Footage

If you record yourself talking through a concept, you still do not need to edit. Remotion's <Video> component lets you layer React-rendered graphics directly on your footage.

handlebars<AbsoluteFill>
<Video src={faceCamPath} style={{ width: "100%", height: "100%", objectFit: "cover" }} />

  <AbsoluteFill style={{ background: "linear-gradient(to top, rgba(0,0,0,0.85), transparent 50%)" }} />

  <Sequence from={fps * 0.5}>

    <AnimatedTitle title={tip.title} />

  </Sequence>

  <Sequence from={fps  10} durationInFrames={fps  15}>

    <CodeCallout code={tip.good} />

  </Sequence>

  <LowerThird handle="@dailyjstips" />

</AbsoluteFill>

The CodeCallout is a floating code block that springs up over your face at the exact moment you are talking about it. You define the timing in the JSON. Record the video once, run the script, and what comes back is a fully produced short with a title, code overlay, name badge, and a subscribe prompt. No editor opened.

Posting Frequency and Timing

Both YouTube Shorts and TikTok reward consistency over volume, but the tech niche handles high frequency better than most. Each video teaches something distinct, so your audience does not feel overloaded.

Post once per day on YouTube Shorts, and one to two times per day on TikTok. Cross-posting the same video to both platforms is fine. Stagger the uploads by about an hour, YouTube first, then TikTok.

Best times to post (EST): 7–9 AM, 12–1 PM, 8–10 PM.

For the first 30 days, do not look at analytics. Just post. The algorithm needs at least 30 videos to understand what your channel is about before it starts distributing. After day 60, pull your top five performing video types and weight your content generation toward those patterns.

Where Your Actual Limitation Is

Remotion is not your bottleneck. When you use AI to help build your Remotion components, and you will, because that is the fastest way to get this done, the quality of what the AI produces depends entirely on how precisely you describe what you want.

The gap between a generic automated video and one that actually stops someone from scrolling lives entirely in that description. If your AI-generated components look bad, the problem is almost never the AI. It is that you described the timing vaguely, did not specify exact colors, forgot to account for mobile font sizes, or did not tell it what happens when the code snippet is twelve lines instead of three.

Get in the habit of prompting like you are writing a design spec. Color values, not color names. Frame numbers, not words like "early" or "later". Spring configs, not "make it bouncy". The more specific you are, the better the output.

If you are building something like this or stuck somewhere in the process, reach out. This is more approachable than it looks once the pipeline is running.