---
title: "Framer Developers: Quick Start"
description: Getting started with the Server API
published: "Sep 18, 2026, 4:28 PM UTC"
---

# [Quick Start](#quick-start)

This guide will help you get up and running with the [Framer Server API](https://www.npmjs.com/package/framer-api).

## [Authentication](#authentication)

In order to interact with the Server API, you will need an API key. These keys authenticate your script as the user who created them, and are bound to a specific project.

You can generate a new API key by going to the General section in Site Settings for a project.

Save the key for future use; keep it in a secure location, such as an `.env` file or your password manager.

## [Installation](#installation)

You can install the Server API node package with npm:

```
npm i framer-api
```

## [Create a script](#create-a-script)

Create a JavaScript or TypeScript file:

```
import { connect } from "framer-api"

const framer = await connect(
	"https://framer.com/projects/<id>", // Can be project id or url
	process.env.FRAMER_API_KEY // Your previously created API key
)

const projectInfo = await framer.getProjectInfo()

console.log(`Project: ${projectInfo.name}`)

// Closes down the server API.
// If you don't do this, your script won't finish executing.
await framer.disconnect()
```

Note that if your runtime supports it (e.g. TypeScript 5.2+), you can use the new `using` syntax to avoid needing to call `framer.disconnect`. In which case it would simply be:

```
using framer = await connect(
    "https://framer.com/projects/<id>",
	process.env.FRAMER_API_KEY
)

// No need to call framer.disconnect()
```

## [Running your script](#running-your-script)

With your credentials (you can also put them in a `.env` file):

```
FRAMER_API_KEY="..." node script.js
```

## [Examples](#examples)

Here is a quick example of how to connect, publish a new preview, and promote it to production.

```
import { connect } from "framer-api"

// Make a connection based on your credentials
const framer = await connect(projectUrl, process.env.FRAMER_API_KEY)

// Get a list of current changes compared to the last publish
const changes = await framer.getChangedPaths()
console.log(changes) // { added: ..., removed: ..., modified: ... }

// Publish a new preview link with all the changes
const result = await framer.publish()
console.log(result) // { deployment: ..., hostnames: ... }

// If everything looks good promote that version to production
await framer.deploy(result.deployment.id)
```

You can find a list of other real-world examples on the following GitHub repository: [https://github.com/framer/server-api-examples](https://github.com/framer/server-api-examples).

[Previous Introduction](./server-api-introduction)

[Next Reference](./server-api-reference)

---

## Navigation

- [Enterprise](../enterprise/)
- [Pricing](../pricing)
- [Log in](https://framer.com/r/login)
- [Sign up](https://www.framer.com/r/signup/)
- [Brand guidelines](../brand)
- [AI New](../ai/)
- [Agents New](../agents/)
- [External Agents New](../agents/external/)
- [Design](../design/)
- [Collaborate New](../collaborate/)
- [CMS](../cms/)
- [Hosting](../hosting/)
- [Performance](../performance/)
- [SEO](../seo/)
- [Convert](../convert/)
- [Publish](../publish/)
- [Updates New](../updates)
- [Academy](../academy/)
- [Guides](../guides)
- [Desktop app](../downloads/)
- [Blog](../blog/)
- [Newsletter](../newsletter)
- [Stories](../stories/)
- [Creators](../creators)
- [Experts](../expert/apply/)
- [Students](../education/students/)
- [Ambassadors](../education/ambassadors/)
- [State of Sites](https://www.framer.com/state-of-sites-2026/)
- [Stack Score New](../stack-score/)
- [Help Articles](../help/)
- [Contact](../contact/)
- [Startups](../startups/)
- [Agencies](../agencies/)
- [Switch](../switch/)
- [Careers](../careers/)
- [Brand](../brand)
- [Store](../store)
- [Security](../legal/security)
- [Abuse](mailto:abuse@framer.com)
- [Legal](../legal/community-terms)
- [Trust](https://app.eu.vanta.com/framer.com/trust/ow67ujg7iav0t6qtd1o6r2)
- [Designers](../solutions/designers/)
- [Agencies](../solutions/agencies/)
- [Marketers](../solutions/marketers/)
- [Growth](../solutions/growth/)
- [Builders](../solutions/builders/)
- [Engineers](../solutions/engineers/)
- [Site Teams](../solutions/site-teams/)
- [Founders](../solutions/founders/)
- [AI website builder](../solutions/ai-website-builder/)
- [AI design agent](../solutions/ai-designer/)
- [Website builder](../solutions/website-builder/)
- [Landing pages](../solutions/landing-pages/)
- [Portfolio maker](../solutions/portfolio-website/)
- [UI/UX design](../solutions/ui-ux-design/)
- [No-code](../solutions/no-code-website-builder/)
- [Overview](../compare)
- [Webflow](../compare/framer-vs-webflow)
- [Figma](../compare/framer-vs-figma)
- [Wix](../compare/framer-vs-wix)
- [Squarespace](../compare/framer-vs-squarespace)
- [WordPress](../compare/framer-vs-wordpress)
- [Readymag](../compare/framer-vs-readymag)
- [Ceros](../compare/framer-vs-ceros)
- [Unbounce](../compare/framer-vs-unbounce)
- [Lovable](../compare/framer-vs-lovable)
- [Claude Code](../compare/framer-vs-claude-code)
- [ChatGPT](../compare/framer-vs-chatgpt)
- [Codex](../compare/framer-vs-codex)
- [Contentful](../compare/framer-vs-contentful)
- [Sanity](../compare/framer-vs-sanity)
- [AEM](../compare/framer-vs-adobe-experience-manager)
- [Replit](../compare/framer-vs-replit)
- [v0](../compare/framer-vs-v0)
- [Marketplace](https://www.framer.com/community/marketplace/)
- [Templates](https://www.framer.com/community/marketplace/templates/)
- [Components](https://www.framer.com/community/marketplace/components/)
- [Plugins](https://www.framer.com/community/marketplace/plugins/)
- [Vectors](https://www.framer.com/community/marketplace/vectors/)
- [Feed](https://www.framer.com/community/feed/)
- [Hype](https://www.framer.com/community/hype/)
- [Gallery](https://www.framer.com/community/gallery/)
- [Contests](https://www.framer.com/community/contests/)
- [Members](https://www.framer.com/community/members/)
- [Meetups](../meetups/)
- [Updates](../updates/community/)
- [Figma to HTML](../solutions/figma-to-html/)
- [AEO scanner](../aeo)
- [Meta Tags](https://www.linkpreview.app/)
- [Free domains](../domains/)
- [CanvasBench](../canvasbench/)
- [Shortcuts](../shortcuts)
- [Checking status](https://www.framerstatus.com/)
- [504,616,418,546 tokens processed this week](https://openrouter.ai/apps/framer)