whatisgithub

What is framecn?

shadcn-labs/framecn — explained in plain English

Analysis updated 2026-05-18

25TypeScriptAudience · vibe coderComplexity · 2/5LicenseSetup · easy

In one sentence

A free React component library for building and exporting videos in code, rendered in the cloud through Editframe.

Mindmap

mindmap
  root((framecn))
    What it does
      Programmatic video
      Cloud rendering
      Layered compositions
    Tech stack
      TypeScript
      React
      Editframe
    Use cases
      Marketing videos
      Product previews
      AI generated video
    Audience
      React developers
      shadcn ui users
    Setup
      Zero config
      One command setup

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Programmatically generate personalized marketing videos at scale

USE CASE 2

Build product preview videos from reusable React components

USE CASE 3

Create AI generated video output without setting up video rendering infrastructure

What is it built with?

TypeScriptReactEditframe

How does it compare?

shadcn-labs/framecncuzteam/cpaprogamekohl/frame-ui
Stars252525
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencevibe coderops devopsdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires an Editframe account since rendering happens in Editframe's cloud, not locally.

MIT license: free to use, modify, and distribute, including commercially, as long as you keep the copyright notice.

So what is it?

framecn is a free, open-source library of video components for React (a popular JavaScript tool for building web interfaces). It lets developers build and export video content programmatically, meaning you write code to describe what the video should look like, rather than editing it manually in a video editor. The library integrates with Editframe, a cloud-based service that handles the actual rendering (converting your code into a finished MP4 video file). This means you don't need to set up any video processing software yourself, Editframe's infrastructure does the heavy lifting in the cloud. The setup is designed to be fast: the README describes it as "zero config, one command setup." framecn follows the same style and format as shadcn/ui, a popular component library for React, so if you're already familiar with that ecosystem, the components should feel consistent and familiar. You can layer videos, images, text, and effects on top of each other, control precise timing and sequencing, and build complex video compositions from simple, reusable pieces of code. A practical use case would be generating videos automatically, for example, creating personalized video content at scale, building video previews for a product, or producing AI-generated video output. The project is written in TypeScript and is available under the MIT license.

Copy-paste prompts

Prompt 1
Set up framecn in my React project with zero config, one command setup.
Prompt 2
Show me how to layer video, images, and text using framecn components.
Prompt 3
Help me connect framecn to Editframe to render an MP4 from my video composition code.

Frequently asked questions

What is framecn?

A free React component library for building and exporting videos in code, rendered in the cloud through Editframe.

What language is framecn written in?

Mainly TypeScript. The stack also includes TypeScript, React, Editframe.

What license does framecn use?

MIT license: free to use, modify, and distribute, including commercially, as long as you keep the copyright notice.

How hard is framecn to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is framecn for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.