Framer for Developers

https://www.framer.com/developers/
Admin
Framer for Developers empowers users to extend Framer's capabilities with standard React and...
Tokens:161,778
Snippets:2,578
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Publish and deploy with framer-api

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

Quick example showing how to connect, get changed paths, 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)
```

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

### Page Preview iframe Example

Source: https://www.framer.com/developers/site

Uses the usePublishInfo hook to get the staging current page URL and renders it in an iframe. If the staging URL is not available, it returns the text 'Publish your Site'.

```typescript
const publishInfo = usePublishInfo()
const stagingUrl = publishInfo?.staging?.currentPageUrl
  
if (!stagingUrl) return "Publish your Site"

return (
  <iframe src={stagingUrl} />
)
```

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

### Install framer-api with npm

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

Installs the framer-api Node package using npm.

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

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

### Example output from getFonts()

Source: https://www.framer.com/developers/fonts

An example snippet showing the structure of the array returned by `getFonts()`. Each entry includes the font family, weight, and style.

```javascript
// An example snippet from `getFonts`.
[
  //..
  {
    family: "Inter",
    weight: 900,
    style: "normal"
  },
  {
    family: "Noto Sans",
    weight: 400,
    style: "normal"
  },
  {
    family: "Noto Sans",
    weight: 400,
    style: "italic"
  },
  {
    family: "Noto Sans",
    weight: 500,
    style: "normal"
  },
  //..
]
```

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

### framer.json configuration example

Source: https://www.framer.com/developers/configuration

Example framer.json configuration file. The id and name fields are required, modes can include canvas, image, and editImage, and icon is a path relative to the plugin's public folder.

```json
{
  "id": "xxxxxx",
  "name": "My Plugin",
  "modes": [
    "canvas",
    "image", // Allows launching plugins from the Image Popout
    "editImage", // Allows launching plugins from the Image Popout when an image is set
  ],
  "icon": "/icon.svg" // Change the icon of your image. Relative to your plugin `public` folder 
}
```

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

### ProtectedMethod type example

Source: https://www.framer.com/developers/plugins-permissions

Use the ProtectedMethod type for complex permission setups. This example shows an array of method names that satisfies the type.

```typescript
const syncMethods = [
  "ManagedCollection.removeItems",
  "ManagedCollection.addItems",
  "ManagedCollection.setPluginData",
] as const satisfies ProtectedMethod[]
```

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

### setAttributes method signature and usage examples

Source: https://www.framer.com/developers/reference/plugins-number-variable-set-attributes

Shows the method signature and two usage examples for setAttributes. The first example renames the variable. The second example updates other attributes but requires narrowing with instanceof FileVariable first to avoid potential bugs. Returns the updated variable on success, or null if the variable was removed between getting it and calling this method.

```typescript
setAttributes(attributes: UpdateVariableAttributes<typeof this>): Promise<typeof this | null
```

```typescript
const updatedVariable = await variable.setAttributes({ name: "New Name" })
```

```typescript
if (variable instanceof FileVariable) await variable.setAttributes({ allowedFileTypes: ["txt", "md"] })
```

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

### isAllowedTo usage examples

Source: https://www.framer.com/developers/reference/plugins-is-allowed-to

Examples of using isAllowedTo to check permissions before calling protected methods. The first checks a single method, the second checks a class instance method with a class name prefix.

```typescript
if (framer.isAllowedTo("addImage")) await framer.addImage(...)
if (framer.isAllowedTo("Collection.setItemOrder")) await collection.setItemOrder(...)
```

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

### BooleanShapeNode.getPluginData

Source: https://www.framer.com/developers/reference/plugins-boolean-shape-node

Gets plugin data by key.

```APIDOC
## BooleanShapeNode.getPluginData

### Description
Get plugin data by key.

### Method
getPluginData

### Signature
`getPluginData(key)`

```

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

### framer.getPluginDataKeys

Source: https://www.framer.com/developers/storing-data

Gets all data keys from the project. Returns an array of keys.

```APIDOC
## [GET] framer.getPluginDataKeys()

### Description
Gets all data keys from the project. Returns an array of keys.

### Method
GET

### Endpoint
framer.getPluginDataKeys()

### Parameters
None.

### Request Example
```javascript
const keys = await framer.getPluginDataKeys();
```

### Response
Returns an array of keys.

```

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

### Get a font with optional weight and style attributes

Source: https://www.framer.com/developers/fonts

Pass optional `weight` and `style` attributes to `getFont()` to specify the desired font variant. The first example gets a weight of 800 in normal style; the second gets weight 800 in italic style.

```javascript
// Get Noto Sans with a weight of 800 in a normal style.
const font = await framer.getFont("Noto Sans", {
  weight: 800
})

// Get Noto Sans with a weight of 800 in an italic style.
const font = await framer.getFont("Noto Sans", {
  weight: 800,
  style: "italic"
})
```

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

### Enable Local SSL with mkcert

Source: https://www.framer.com/developers/oauth

Run this command in the root of the example directory to enable local SSL. Some providers require local URLs to use HTTPS. When deploying and running in production, all traffic should be served over HTTPS to ensure tokens sent in the body of a request are encrypted.

```bash
mkcert localhost
```

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

### Run the Backend Locally

Source: https://www.framer.com/developers/oauth

Run these commands in the backend directory to install dependencies, set up the D1 database, and run the worker locally. If successful, the URL output in the terminal is usually `https://localhost:8787`.

```bash
# Install the dependencies.
npm install

# Setup D1 database.
npm run bootstrap

# Run the worker locally.
npm run dev
```

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

### Create a Color Style in a folder

Source: https://www.framer.com/developers/styles

Use a slash in the name to place the Color Style in a folder. This example creates a folder named 'My Plugin'.

```javascript
const colorStyle = await framer.createColorStyle({
name: "My Plugin/My Cool Color",
// ...
})
```

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

### Get the current selection with framer.getSelection()

Source: https://www.framer.com/developers/nodes

Returns an array of nodes currently selected on the canvas. Use this as the starting point for plugins that operate on the user's selection.

```javascript
const selection = await framer.getSelection()
```

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

### setAttributes examples for renaming and setting file types

Source: https://www.framer.com/developers/reference/plugins-image-field-set-attributes

Two examples of using setAttributes: the first renames a field, the second sets allowedFileTypes after narrowing on the field's type to avoid potential bugs. The method returns the updated field on success, or null if the field was removed between getting it and calling the method.

```typescript
const updatedField = await field.setAttributes({ name: "New Name" })
```

```typescript
if (field.type === "file") await field.setAttributes({ allowedFileTypes: ["txt", "md"] })
```

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

### Load tokens on first load

Source: https://www.framer.com/developers/oauth

On component mount, retrieves tokens from local storage and lifts them into state. If no tokens exist, does nothing.

```javascript
useEffect(() => {
  // Check for tokens on first load.
  const serializedTokens = window.localStorage.getItem("tokens");
  if (!serializedTokens) return;

  const tokens = JSON.parse(serializedTokens);
  setTokens(tokens);
}, []);
```

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

### walk

Source: https://www.framer.com/developers/reference/plugins-component-instance-node-walk

Documentation for the walk method on ComponentInstanceNode.

```APIDOC
## walk(this: AnyNode): AsyncGenerator<AnyNode>

### Description
Walks this node and its descendants recursively, yielding nodes depth-first using an async generator.

### Method
walk

### Parameters
- **this** (`AnyNode`) - Required - The node to start walking from.

### Returns
- `AsyncGenerator<AnyNode>` - An async generator that yields nodes depth-first.
```

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

### getCodeFiles: Retrieve all code files

Source: https://www.framer.com/developers/reference/plugins-get-code-files

Call framer.getCodeFiles() to get all code files in the project. The returned promise resolves to an array of CodeFile instances. The example logs the total count of code files.

```javascript
const allFiles = await framer.getCodeFiles()
console.log(`Project has ${allFiles.length} code files`)
```

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

### Create a Text Style in a folder

Source: https://www.framer.com/developers/styles

Use a slash in the name to place the Text Style in a folder. This example creates a folder named 'My Plugin'.

```javascript
const textStyle = await framer.createTextStyle({
  name: "My Plugin/Heading,
  // ...
})
```

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

### getVersions: Retrieve file version history

Source: https://www.framer.com/developers/reference/plugins-code-file-get-versions

Call getVersions on a code file to get its version history. The returned promise resolves to an array of CodeFileVersion instances. The example logs the total number of versions to the console.

```javascript
const versions = await codeFile.getVersions()
console.log(`File has ${versions.length} versions`)
```

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

### Get nodes with attribute set using framer.getNodesWithAttributeSet

Source: https://www.framer.com/developers/reference/plugins-boolean-shape-node-get-nodes-with-attribute-set

Use this method to retrieve all descendant nodes that have the specified attribute set to a non-null value. The example filters nodes by the 'backgroundImage' attribute and returns a promise that resolves to an array of nodes.

```javascript
// Get all nodes with a background image set.
const nodes = await framer.getNodesWithAttributeSet("backgroundImage")
```

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

### navigateTo

Source: https://www.framer.com/developers/reference/plugins-component-instance-node-navigate-to

Documentation for the navigateTo method of the ComponentInstanceNode class.

```APIDOC
## navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>

### Description
Navigates to this node. May switch modes to reveal the relevant view.

### Method
navigateTo

### Signature
navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>

### Parameters
- **opts** (Pick<NavigableOptions, "select" | "zoomIntoView">) - Optional - Options to control navigation behavior.

### Returns
- **Promise<void>** - Resolves when navigation is complete.
```

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

### Use setAttributes to rename, change description, or update other attributes

Source: https://www.framer.com/developers/reference/plugins-color-variable-set-attributes

The setAttributes method signature, a basic rename usage, and an example of updating other attributes after narrowing with instanceof to avoid bugs. Returns the updated variable on success, or null if removed between getting and calling.

```typescript
setAttributes(attributes: UpdateVariableAttributes<typeof this>): Promise<typeof this | null

```

```typescript
const updatedVariable = await variable.setAttributes({ name: "New Name" })

```

```typescript
if (variable instanceof FileVariable) await variable.setAttributes({ allowedFileTypes: ["txt", "md"] })

```

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

### showUI

Source: https://www.framer.com/developers/reference/plugins-show-ui

Shows the plugin window with optional UI options.

```APIDOC
## showUI

### Description
Shows the plugin window.

### Method
showUI

### Parameters
- **options** (UIOptions) - Optional - The options for how to show the UI.

### Returns
- **Promise<void>**

### Example
```javascript
framer.showUI({
  position: "center",
  height: 300,
  width: 220
})
```
```

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

### Process an image with canvas and bytesFromCanvas

Source: https://www.framer.com/developers/assets

Example of image processing: gets the selected image, loads its bitmap, draws it on an HTML canvas with a horizontal flip, converts the canvas to bytes with `bytesFromCanvas`, and adds the processed image back. Note the code uses `img.width` and `img.height` which are not defined in the snippet.

```javascript
// Get the selected image in framer
const image = await framer.getImage()

const canvas = document.createElement("canvas")
const ctx = canvas.getContext("2d")

// Load the image bytes into an ImageBitmap that canvas supports
const bitmap = await image.loadBitmap()

// Set the height of the canvas to the height of the image
ctx.canvas.width = img.width;
ctx.canvas.height = img.height;

// Here we horizontally invert the image bitmap.
ctx.scale(-1, 1);
ctx.drawImage(bitmap, -bitmap.width, 0);

const result = await bytesFromCanvas(canvas);

await framer.addImage({
  image: { bytes: result, mimeType },
});
```

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

### Show plugin window with framer.showUI

Source: https://www.framer.com/developers/reference/plugins-show-ui

Opens the plugin window with the specified options. The `position` option sets the window's placement on screen, and `height` and `width` control its dimensions in pixels.

```javascript
framer.showUI({
  position: "center",
  height: 300,
  width: 220
})
```

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

### setFileContent example

Source: https://www.framer.com/developers/reference/plugins-code-file-set-file-content

Sets the content of a code file, creating a new version. The `code` parameter is a string containing the new source code. Returns a Promise that resolves to the updated CodeFile instance.

```javascript
const updatedFile = await codeFile.setFileContent(
	`export default function MyComponent() {
	  return <div>Hello World</div>
	}`
)
```

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

### Get and list Text Styles

Source: https://www.framer.com/developers/styles

Use framer.getTextStyles() to list all Text Styles and framer.getTextStyle() to get a specific one by ID.

```javascript
// Lists all Text Styles in a project.
const textStyle = await framer.getTextStyles()

// Get a specfic Text Style by it's ID.
const textStyle = await framer.getTextStyle("text-style-id")
```

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

### Show plugin UI with framer.showUI

Source: https://www.framer.com/developers/concepts

Opens the plugin window and sets its initial position and size. Called in main.tsx.

```typescript
framer.showUI({ position: "top left", width: 240, height: 245 })
```

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

### Get and list Color Styles

Source: https://www.framer.com/developers/styles

Use framer.getColorStyles() to list all Color Styles and framer.getColorStyle() to get a specific one by ID.

```javascript
// Lists all Color Styles in a project.
const colorStyles = await framer.getColorStyles()
  

// Get a specfic Color Style by it's ID.
const colorStyle = await framer.getColorStyle("color-style-id")
```

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

### Create and navigate to a web page with framer.createWebPage

Source: https://www.framer.com/developers/reference/plugins-create-web-page

Creates a new web page at the specified path and then navigates to it. Use this when you need to create and immediately open a web page. The pagePath parameter is required and should be a string like "/about". The function returns a Promise that resolves to a WebPageNode.

```javascript
const webPage = await framer.createWebPage("/about")
await webPage.navigateTo()
```

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

### Install custom code with framer.setCustomCode

Source: https://www.framer.com/developers/reference/plugins-set-custom-code

Installs a custom code snippet in the user's website via a <script> tag. The `html` option must be valid HTML and the `location` is set to "bodyEnd". A plugin can only set custom HTML once per location, and setting `html` to `null` clears the installed code snippet.

```javascript
framer.setCustomCode({
  html: '<script src="https://example.com/script.js"></script>',
  location: "bodyEnd"
})
```

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

### getNodesWithType usage examples

Source: https://www.framer.com/developers/reference/plugins-vector-set-item-node-get-nodes-with-type

Two usage examples for getNodesWithType: the first retrieves all frame nodes in the project, the second queries within a selection subtree when exactly one node is selected.

```javascript
// Get all frame nodes in a project.
const frameNodes = await framer.getNodesWithType("FrameNode")
```

```javascript
// Query within a selection subtree.
const selection = await framer.getSelection()
if (selection.length === 1) {
const frameNodes = await selection[0].getNodesWithType("FrameNode")
}
```

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

### navigateTo

Source: https://www.framer.com/developers/reference/plugins-boolean-shape-node-navigate-to

Documentation for the navigateTo method of the BooleanShapeNode class.

```APIDOC
## navigateTo

### Description
Navigate to this node. May switch modes to reveal the relevant view.

### Method
navigateTo

### Signature
navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>

### Parameters
- **opts** (Pick<NavigableOptions, "select" | "zoomIntoView">) - Optional - Options to control navigation behavior.

### Returns
- **Promise<void>** - A promise that resolves when navigation is complete.

```

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

### Show UI with framer.showUI

Source: https://www.framer.com/developers/interface

Call framer.showUI to display the plugin UI. The method accepts an optional configuration object with properties like position, width, height, resizable, minWidth, minHeight, maxWidth, and maxHeight. The default for resizable is false, and maxWidth/maxHeight default to Infinity.

```javascript
framer.showUI({
  position: "top left", // Optional, Allowed: "top left", "center", etc.
  width: 240, // Optional
  height: 245, // Optional
  resizable: true, // Optional (default false). Allowed: true, false, "width", "height"
  minWidth: 100, // Optional
  minHeight: 100, // Optional
  maxWidth: 300, // Optional (default Infinity)
  maxHeight: 300, // Optional (default Infinity)
})
```

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

### Publish a new preview link

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

Publishes a new preview link and returns a deployment object with an id.

```typescript
framer.publish(): Promise<{deployment: { id: string }}>
```

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

### Get a specific font with getFont()

Source: https://www.framer.com/developers/fonts

Use `framer.getFont("Noto Sans")` to get a font from a family. The family name is not case sensitive. By default, it returns a font with a normal weight and style.

```javascript
// Get Noto Sans with a weight of 400 in a normal style.
const font = await framer.getFont("Noto Sans")
```

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

### select()

Source: https://www.framer.com/developers/reference/plugins-component-instance-node-select

Documentation for the select() method of the ComponentInstanceNode class, which selects the node on the canvas.

```APIDOC
## select()

### Description
Selects this node on the canvas.

### Method
select()

### Returns
- `Promise<void>`

```

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

### Subscribe to isAllowedTo changes for addImage

Source: https://www.framer.com/developers/reference/plugins-subscribe-to-is-allowed-to

Example usage: logs the initial isAllowed value for the "addImage" method, then subscribes to changes and logs each new value. The callback receives the updated boolean.

```javascript
console.log(`Initial isAllowed: ${framer.isAllowedTo("addImage")}`)
framer.subscribeToIsAllowedTo("addImage", (isAllowed) => {
    console.log(`New isAllowed: ${isAllowed}`)
})
```

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

### Read custom code with framer.getCustomCode

Source: https://www.framer.com/developers/custom-code

Reads the custom code installed by your plugin. The `disabled` property indicates whether the user has disabled the custom code in settings; your plugin cannot re-enable it. The `html` property contains the installed code.

```javascript
const customCode = await framer.getCustomCode();
if (customCode.bodyStart.disabled) {
  // Custom  code was disabled by the user in settings.
  // Your plugin has no control over enabling this
  // But you could display some UI to indicate it.
}

const html = customCode.bodyStart.html
```

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

### getPluginDataKeys

Source: https://www.framer.com/developers/reference

Get all plugin data keys.

```APIDOC
## getPluginDataKeys

### Description
Get all plugin data keys.

### Method
getPluginDataKeys

### Parameters
None.

### Response
Returns an array of all plugin data keys.
```

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

### framer.showUI

Source: https://www.framer.com/developers/interface

Shows the plugin UI with optional configuration for position, size, and resizability.

```APIDOC
## framer.showUI

### Description
Shows the plugin UI. By default the UI is hidden and only a toast appears while the plugin is running. This method accepts an optional UI configuration object.

### Method
showUI

### Parameters
#### Optional Configuration Object
- **position** (string) - Optional - Allowed values: "top left", "center", etc.
- **width** (number) - Optional - Width of the UI in pixels.
- **height** (number) - Optional - Height of the UI in pixels.
- **resizable** (boolean | string) - Optional - Default false. Allowed values: true, false, "width", "height".
- **minWidth** (number) - Optional - Minimum width in pixels.
- **minHeight** (number) - Optional - Minimum height in pixels.
- **maxWidth** (number) - Optional - Default Infinity.
- **maxHeight** (number) - Optional - Default Infinity.

### Request Example
```javascript
framer.showUI({
  position: "top left",
  width: 240,
  height: 245,
  resizable: true,
  minWidth: 100,
  minHeight: 100,
  maxWidth: 300,
  maxHeight: 300,
})
```
```

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

### loadBitmap()

Source: https://www.framer.com/developers/reference/plugins-image-asset-load-bitmap

Loads the image as an ImageBitmap and returns a promise that resolves to the ImageBitmap.

```APIDOC
## loadBitmap()

### Description
Loads this image as an ImageBitmap.

### Method
loadBitmap

### Signature
loadBitmap(): Promise<ImageBitmap>

### Returns
- **Promise<ImageBitmap>** - A promise that resolves to an ImageBitmap object.

```

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

### WebPageNode.getPluginData

Source: https://www.framer.com/developers/reference/plugins-web-page-node

Get plugin data by key.

```APIDOC
## WebPageNode.getPluginData

### Description
Get plugin data by key.

### Method
`getPluginData(key)`

### Parameters
- **key** (string) - Required - The key of the plugin data.

### Returns
- **any** - The plugin data value.

### Example
```
const data = node.getPluginData('myKey');
```
```

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

### VectorSetNode.getPluginData

Source: https://www.framer.com/developers/reference/plugins-vector-set-node

Gets plugin data by key.

```APIDOC
## VectorSetNode.getPluginData

### Description
Get plugin data by key.

### Method
getPluginData

### Syntax
`vectorSetNode.getPluginData(key)`

### Parameters
- **key** (string) - Required - The plugin data key.

### Returns
The plugin data value.

### Example
```javascript
const node = new VectorSetNode();
const data = node.getPluginData("myKey");
```
```

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

### Create a Text Style

Source: https://www.framer.com/developers/styles

Creates a new Text Style with name, tag, fontSize, and lineHeight.

```javascript
const textStyle = await framer.createTextStyle({
  name: "Heading,
  tag: "h1",
  fontSize: "30px",
  lineHeight: "1.6em",
})
```

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

### VectorSetNode.getRect

Source: https://www.framer.com/developers/reference/plugins-vector-set-node

Gets the bounding box of this node.

```APIDOC
## VectorSetNode.getRect

### Description
Get the bounding box of this node.

### Method
getRect

### Syntax
`vectorSetNode.getRect()`

### Parameters
None

### Returns
A rectangle object representing the bounding box.

### Example
```javascript
const node = new VectorSetNode();
const rect = node.getRect();
```
```

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

### navigateTo

Source: https://www.framer.com/developers/reference/plugins-text-node-navigate-to

Documentation for the navigateTo method of the TextNode class.

```APIDOC
## navigateTo

### Description
Navigates to this node, potentially switching modes to reveal the relevant view.

### Method
navigateTo

### Signature
navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>

### Parameters
- `opts` (Pick<NavigableOptions, "select" | "zoomIntoView">) - Optional - Options for navigation, including whether to select the node or zoom into view.

### Returns
- `Promise<void>` - A promise that resolves when navigation is complete.
```

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

### navigateTo

Source: https://www.framer.com/developers/reference/plugins-component-node-navigate-to

Navigates to this node, optionally selecting it and zooming into view. May switch modes to reveal the relevant view.

```APIDOC
## navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>

### Description
Navigate to this node. May switch modes to reveal the relevant view.

### Method
navigateTo

### Signature
navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>

### Parameters
- `opts` (Pick<NavigableOptions, "select" | "zoomIntoView">) - Optional - Options for navigation, including whether to select the node and whether to zoom into view.

### Returns
- `Promise<void>` - A promise that resolves when navigation is complete.
```

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

### VectorNode.getPluginData

Source: https://www.framer.com/developers/reference/plugins-vector-node

Gets plugin data by key.

```APIDOC
## VectorNode.getPluginData

### Description
Get plugin data by key.

### Method
getPluginData

### Parameters
None

### Returns
None
```

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

### Create a code file with framer.createCodeFile

Source: https://www.framer.com/developers/reference/plugins-create-code-file

Creates a new code file named "MyComponent" with the provided JSX code. The returned promise resolves to a CodeFile instance. The name parameter includes the file extension, and the optional options.editViaPlugin flag makes the "Edit Code" UI action open the creating plugin.

```javascript
const newFile = await framer.createCodeFile(
  "MyComponent",
  `export default function MyComponent() {
    return <div>Hello World</div>
  }`
)
```

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

### getRect

Source: https://www.framer.com/developers/reference/plugins-design-page-node

Gets the bounding box of this node.

```APIDOC
## getRect

### Description
Gets the bounding box of this node.

### Method
getRect

### Endpoint
DesignPageNode.getRect()

### Parameters
None

### Request Example
None

### Response
#### Success Response
- **Rect** - The bounding box of the node.

#### Response Example
```
Rect
```
```

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

### navigateTo

Source: https://www.framer.com/developers/reference/plugins-path-node-navigate-to

Documentation for the navigateTo method of the PathNode class.

```APIDOC
## navigateTo

### Description
Navigate to this node. May switch modes to reveal the relevant view.

### Method
navigateTo

### Signature
navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>

### Parameters
- **opts** (`Pick<NavigableOptions, "select" | "zoomIntoView">`) - Optional - Options to control navigation behavior.

### Returns
- `Promise<void>` - Resolves when navigation is complete.

```

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

### clone()

Source: https://www.framer.com/developers/reference/plugins-component-instance-node-clone

Documentation for the clone method of the ComponentInstanceNode class.

```APIDOC
## clone()

### Description
Clones this node, creating a duplicate in the canvas tree.

### Method
clone

### Signature
clone(): Promise<typeof this | null>

### Returns
- **Promise<typeof this | null>** - The cloned node, or `null` if the clone failed.

```

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

### BooleanShapeNode.getRect

Source: https://www.framer.com/developers/reference/plugins-boolean-shape-node

Gets the bounding box of this node.

```APIDOC
## BooleanShapeNode.getRect

### Description
Get the bounding box of this node.

### Method
getRect

### Signature
`getRect()`

```

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

### ManagedCollection.addItems fieldData format change

Source: https://www.framer.com/developers/changelog

Shows the breaking change in v3.0.0 where `fieldData` must now be an object with `value` and `type` properties. The 'Before' example uses a plain string value, while the 'After' example uses the new typed object format.

```javascript
// Before 
managedCollection.addItems([
  { [fieldID]: "Your Value" }
])

// After
managedCollection.addItems([
  { [fieldID]: {
      type: "string",
      value:  "Your Value"
  }
}])
```

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

### navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>

Source: https://www.framer.com/developers/reference/plugins-shape-container-node-navigate-to

Navigates to this node. May switch modes to reveal the relevant view. Accepts optional options to select or zoom into view.

```APIDOC
## navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>

### Description
Navigates to this node. May switch modes to reveal the relevant view.

### Method
navigateTo

### Signature
navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>

### Parameters
- **opts** (`Pick<NavigableOptions, "select" | "zoomIntoView">`) - Optional - Options to control navigation behavior.

### Returns
- `Promise<void>` - A promise that resolves when navigation is complete.

```

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

### VectorSetNode.getChildren

Source: https://www.framer.com/developers/reference/plugins-vector-set-node

Gets the children of this node in the canvas tree.

```APIDOC
## VectorSetNode.getChildren

### Description
Get the children of this node in the canvas tree.

### Method
getChildren

### Syntax
`vectorSetNode.getChildren()`

### Parameters
None

### Returns
An array of child nodes.

### Example
```javascript
const node = new VectorSetNode();
const children = node.getChildren();
```
```

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

### Create fields with addFields

Source: https://www.framer.com/developers/reference/plugins-collection-add-fields

Creates new unmanaged Collection fields by passing an array of field definitions. The example adds a string, an enum with cases, a file with allowed types, and a collection reference. Returns a Promise resolving to the newly created Field instances.

```javascript
const createdFields = await collection.addFields([
  { type: "string", name: "Name" },
  { type: "enum", name: "Status", cases: [{ name: "New" }, { name: "Done" }] },
  { type: "file", name: "Text", allowedFileTypes: ["md"] },
  { type: "collectionReference", name: "Author", collectionId: "ASh5SZOh" },
])
```

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

### VectorNode.getChildren

Source: https://www.framer.com/developers/reference/plugins-vector-node

Gets the children of this node in the canvas tree.

```APIDOC
## VectorNode.getChildren

### Description
Get the children of this node in the canvas tree.

### Method
getChildren

### Parameters
None

### Returns
None
```

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

### ControlType.Transition

Source: https://www.framer.com/developers/property-controls

Documentation for the Transition property control.

```APIDOC
## ControlType.Transition

### Description
A control that allows for editing Framer Motion transition options within the Framer UI.

### Usage
Use `ControlType.Transition` in `addPropertyControls` to add a transition control to a component. The transition object is passed directly as a property.

### Properties
- `type` (ControlType.Transition) - Required - The control type.
- `defaultValue` (object) - Optional - The default transition object.

### Example
```jsx
export function MyComponent(props) {
  return (
      <motion.div
         animate={{ scale: 2 }}
         transition={props.transition}
      />
  )
}

addPropertyControls(MyComponent, {
  transition: {
    type: ControlType.Transition,
    defaultValue: { type: "spring", stiffness: 800, damping: 60 },
  },
})
```
```

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

### Navigate to code file with codeFile.navigateTo()

Source: https://www.framer.com/developers/reference/plugins-code-file-navigate-to

Navigates to the code file in the Code Editor, potentially switching modes to reveal the relevant view. Returns a Promise that resolves when navigation is complete.

```javascript
await codeFile.navigateTo()
```

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

### getFields

Source: https://www.framer.com/developers/reference/plugins-managed-collection-get-fields

Get all fields defined on this Managed Collection.

```APIDOC
## getFields

### Description
Get all fields defined on this Managed Collection.

### Method
No HTTP method (JavaScript method)

### Endpoint
collection.getFields()

### Parameters
None

### Request Example
```javascript
const fields = await collection.getFields()
```

### Response
#### Success Response
- **Promise<ManagedCollectionField[]>** - An array of managed collection field definitions.

#### Response Example
```typescript
Promise<ManagedCollectionField[]>
```
```

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

### Connect and get project info with framer-api

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

Creates a JavaScript or TypeScript file that connects to the Framer Server API, retrieves project info, and disconnects. Requires an API key and project URL or ID.

```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()
```
Tokens:
Raw