Framer Server API

https://www.framer.com/developers/server-api-quick-start
Admin
Framer Server API is a Node.js package that enables developers to programmatically interact with...
Tokens:585
Snippets:8
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Framer API package

Source: https://www.framer.com/developers/server-api-quick-start

Install the required Node.js package using npm.

```bash
npm i framer-api
```

--------------------------------

### Publish and deploy project changes

Source: https://www.framer.com/developers/server-api-quick-start

Connect to a project, check for changes, publish a preview, and deploy to production.

```javascript
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)
```

--------------------------------

### Run a script with environment variables

Source: https://www.framer.com/developers/server-api-quick-start

Execute the script while providing the API key via environment variables.

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

--------------------------------

### Connect to a Framer project

Source: https://www.framer.com/developers/server-api-quick-start

Establish a connection to a project using an API key and project URL. Ensure you disconnect after execution to allow the script to finish.

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

--------------------------------

### Connect using the using syntax

Source: https://www.framer.com/developers/server-api-quick-start

Use the TypeScript 'using' syntax to automatically handle disconnection when the variable goes out of scope.

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

// No need to call framer.disconnect()
```
Tokens:
Raw