API Reference
A list of all functions and attributes available on the framer
Plugin API.
CMS APIs
Framer provides APIs to interact with our CMS. Collections can be either user-created (Unmanaged
) or controlled by a Plugin (Managed
). The Collection types share similar API structures and Plugin authors can choose which Collection type works best for their use-case. Reference the latest APIs below or learn more with the CMS guide.
Retrieve the Collection currently active (selected) in the Framer UI.
Retrieve the currently active managed Collection from the UI.
Get all Collections in the project. Both Managed and Unmanaged.
Retrieve Collections that are managed by the current Plugin.
A Collection that is not controlled by a Plugin.
Whether a Collection is read-only.
Remove fields from a Collection by their IDs.
Remove Items from a Collection by their IDs.
Set the Collection as active.
Reorder the Fields in a Collection based on an array of Field IDs.
Reorder the Items in a Collection based on an array of Item IDs.
The ID of the Field the slug is based on.
The name of the Field used as the slug.
A class for a CMS item in a Collection or ManagedCollection.
An Enum Case for an Enum Field.
A unique identifier for the Enum Case.
The name of the Enum Case.
Remove the Enum Case.
Update the attributes of the Enum Case.
An enum field.
A CMS Collection that is controlled by a Plugin.
Retrieve all Item IDs in a Managed Collection.
Remove CMS items by their ID.
Open this Collection in the Editor.
Arrange CMS items in a specific order.
Localization (Beta) APIs
Framer provides APIs to interact with our Localization functionality. The key pieces of Localization in Framer are Locales, Localization Groups, and Localization Sources. Locales are a language paired with an optional region, like English or English (Canada). Localization groups are things like pages or CMS items that contain one or more Localization sources. Localization sources are the strings from your site, along with their localized values.
Get the currently active Locale.
Get the default locale of the project.
Get all Locales in the project.
Get all Localization Groups in the project.
Update localization data.
A Locale in your project.
The language code of the Locale.
The ID of the fallback Locale.
A unique identifier for a Locale.
The name of the Locale.
Slug value of the Locale.
A group of Localization Sources.
A unique identifier for a Localization Group.
The name of a Localization Group.
The Localization Sources in the Localization Group.
The status of the Localization Group in each Locale.
Whether a Localization Group supports the "excluded" status.
The type of a Localization Group.
A localizable string on your site.
A localizable string on your site.
A unique identifier for a Localization Source.
The name of a Localization Source.
The type of value for this Localization Source.
The current value of the Localization Source in the default locale.
Localized values and metadata for each Locale.
The localized value and assocaited metadata for a Locale.
The localized value and assocaited metadata for a Locale.
The time the Localized Value was last edited at.
Whether the value is read only and therefore cannot be updated.
The status of the Localization Value.
The actual text of the Localization Value
A warning about the Localization Value.
Canvas APIs
Allow any HTML element to become draggable.
An object that represents the data to be dragged.
A React component that makes it's child draggable.
A callback triggered when a drag finishes.
Allow any HTML element to become draggable.
Plugin UI
A set of functions for opening and closing the Plugin itself, along with options setting a specific size for your Plugin. Plugins are able to run completely UI-less if desired.
showUI(options)
hideUI()
closePlugin(message?: string)
Modes
A property with the current mode. Modes are used to understand the context in which the Plugin is being run, and adjust logic as needed. Learn more in the mode guide.
mode
User
Information about a the current user logged into Framer. Returns the name of the user, as well as a hashed User ID to uniquely identify the current user.
getCurrentUser()
Project
Information about the current Framer Project. Returns the display name of the Project as well as a hashed Project ID. This ID cannot be used to access the Project.
getProjectInfo()
Selection
Functions for reading, setting, or listening to the current selection on the Canvas. The returned list can range from zero items to a very large list of items.
getSelection()
setSelection(nodeIds)
subscribeToSelection(callback)
Assets
A selection of functions for working with Images, Files, and SVGs. The high-level add
and set
functions are designed to work in most cases and automatically handle uploading for you. Learn more in the working with Assets guide.
addImage(imageAsset)
setImage(imageAsset)
uploadImage(file)
uploadFile(file)
uploadFiles(files[])
addSvg(svgString)
Components
Functions for utilising Components in your Plugin. Learn more in the Component guide.
addComponentInstance({ url, attributes })
addDetachedComponentLayers({ url, layout, attributes })
Text
A selection of functions for working with text layers and their content.
getText()
setText(text)
addText(text)
subscribeToText(callback)
Custom Code
With Custom Code your plugin can install code snippets in a user's Website via <script>
tags. Custom Code added by a Plugin appears in a separate section of a Project’s site settings specifically for Plugins. This can be used to load external scripts on a site. Custom code should be valid HTML.
setCustomCode(options)
getCustomCode()
subscribeToCustomCode(callback)
When setting Custom Code, you must provide the html string, as well as a location
.
The location
property has the following values:
headStart
- Injects the code snippet at the start of the HTML<head>
tagheadEnd
- Injects the code snippet at the end of the HTML<head>
tagbodyStart
- Injects the code snippet at the start of the<body>
tagbodyEnd
- injects the code snippet at the end of the<body>
tag
Setting the html
value back to null
clears the installed code snippet.
Storing Data
Functions for storing data that your Plugin case use across users and sessions. Learn about the different ways to store data in our Data guide.
getPluginData(key)
setPluginData(key, value)
getPluginDataKeys()
Styles
A set of functions for creating, reading and manipulating the Color and Text Styles in a Project. Learn more in our Styles guide.
createColorStyle(attributes)
getColorStyle(id)
getColorStyles()
subscribeToColorStyles(callback)
createTextStyle(attributes)
getTextStyle(id)
getTextStyles()
subscribeToTextStyles(callback)
Fonts
Plugins can use typefaces available in the Font Picker to get information about specific fonts or to apply them to Text Styles.
getFont(family)
getFonts()
Unlike the Font Picker, which groups fonts by typeface, getFonts
will list individual fonts for each weight and style. You can think these as separate font files.
To get a specific font from a family, use getFont
and pass in the family name. This is not case sensitive. By default, this will return a font in the family that has a normal weight and style.
Make sure to check that a font exists before using it. If a font does not exist, getFont
will return null
.
Note: Custom Fonts are not available to Plugins
Editor
Functions for common actions in the Framer Editor, like going to a specific node on the canvas, or displaying a message in a toast.
zoomIntoView(nodeId)
notify(message, options?: NotifyOptions)
You can automatically adjust the viewport's pan and zoom so that a node appears in the center. This is the equivalent to using Zoom to Selection in the UI, except you can use any list of Nodes.
Nodes
Low-level API for working with Nodes. Useful for doing very specific tasks that may not be covered by the higher-level APIs. Learn more in our working with Nodes guide.