git404hub

what is framecn fr?

shadcn-labs/framecn — explained in plain English

Analysis updated 2026-05-18

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

tl;dr

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

vibe map

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 make with this?

VIBE 1

Programmatically generate personalized marketing videos at scale

VIBE 2

Build product preview videos from reusable React components

VIBE 3

Create AI generated video output without setting up video rendering infrastructure

what's the stack?

TypeScriptReactEditframe

how it stacks up fr

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 i run it?

Difficulty · easy time til it works · 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.

in plain english

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.

prompts (copy fr)

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 fr?

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.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.