# Getting Started

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

> For the complete documentation index, see [llms.txt](/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](/.well-known/agent-skills/site-skill.md).

## Installation

Install the `@editframe/elements` package:

```bash
npm install @editframe/elements
```

## Quick Start

Import video components and create compositions:

```tsx
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:

```tsx
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

- Browse the [Components](https://www.framecn.dev/docs/components.md) gallery
- Explore [Typography](https://www.framecn.dev/docs/typography.md) effects
- Learn about [Transitions](https://www.framecn.dev/docs/transitions.md) and scene changes
- Check out full [Compositions](https://www.framecn.dev/docs/compositions.md) templates