Framer Developers: Quick Start

This guide will help you get up and running with the Framer Server API.

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

You can install the Server API node package with npm:

npm i framer-api

npm i framer-api

npm i framer-api

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()

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()

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()

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

// No need to call framer.disconnect()

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

// No need to call framer.disconnect()

Running your script

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

FRAMER_API_KEY="..." node script.js

FRAMER_API_KEY="..." node script.js

FRAMER_API_KEY="..." node script.js

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)

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)

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.

Introduction

Reference