For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
71
Sponsor

Getting Started

PreviousNext

Learn how to set up and use Framecn in your Next.js project.

Installation

Install the @editframe/elements package:

$ pnpm add @editframe/elements

Quick Start

Import video components and create compositions:

import { Typewriter } from "@editframe/elements";
import { Composition } from "@editframe/elements/server";
 
export default function VideoPage() {
  return (
    <Composition
      id="MyVideo"
      durationInFrames={120}
      fps={30}
      width={1920}
      height={1080}
    >
      <Typewriter text="Hello, World!" />
    </Composition>
  );
}

Rendering Videos

Use the Editframe SDK to render your compositions to MP4:

import { Editframe } from "@editframe/sdk";
 
const editframe = new Editframe({ apiKey: "your-api-key" });
 
const render = await editframe.renders.create({
  compositionId: "MyVideo",
  outputFormat: "mp4",
});

Next Steps