---
title: "Framer Developers: Reference"
description: Reference of exports from the Framer Library
published: "Sep 18, 2026, 4:28 PM UTC"
---

# [API Reference](#api-reference)

A list of exports from the `framer` library available in every Code Component.

## [RenderTarget](#rendertarget)

To detect which context your Code Component is currently being shown, you can import and use `RenderTarget`. This includes `RenderTarget.current()` function to check the current RenderTarget as well as few types to check them against.
- `RenderTarget.canvas` — The Canvas
- `RenderTarget.export` — The Export Canvas
- `RenderTarget.thumbnail` — Project Thumbnails
- `RenderTarget.preview` — The Preview or live site

```
import { RenderTarget } from "framer"

const isOnCanvas = RenderTarget.current() === RenderTarget.canvas
```

#### [Canvas and Export](#canvas-and-export)

For Components that animate, like WebGL shaders, we have a custom hook that we recommend you use instead. This ensures that your Component is static both on the Canvas and the exported assets—preventing performance issues on the Canvas and exporting issues like tiling, which are issues caused by the Component still animating during export. For all animated components, instead of `RenderTarget`, use this hook.

```
import { useIsStaticRenderer } from "framer"

// Static on both Canvas and Export
const isStaticRenderer = useIsStaticRenderer()
```

## [Localization](#localization)

When using Localization with Framer you may want to create a custom Locale Picker. In most cases you should do this with Smart Components, which you can learn about in the [Localization 2.0 video](https://youtu.be/5ZQ2-w1KwGo?feature=shared&t=250). However if you have very specific needs based on logic there is an API for getting and setting the current Locale info.

##### [`useLocaleInfo()`](#uselocaleinfo())

```
const { activeLocale, locales, setLocale } = useLocaleInfo()

function handleChange(event) {
    const locale = locales.find((locale) => locale.id === localeId)
    setLocale(locale)
}

return (
  <select
    value={activeLocale?.id ?? "default"}
    onChange={handleChange}
  >
    {locales.map((locale) => (
      <option key={locale.id} value={locale.id}>
        {locale.name}
      </option>
    ))}
  </select>
)
```

## [Property Controls](#property-controls)

Property Controls allow users to pass props to a Code Component through the Framer interface. There is only one function needed for this feature, however the full type reference can be found in our [Property Controls Guide](./property-controls).

##### [`addPropertyControls(component, controls)`](#addpropertycontrols(component-controls))

```
import { addPropertyControls, ControlType } from "framer"

function Button(props) {
  const { tint = "#09F" } = props

  return <button style={{ background: tint }}>Hello</button>
}

addPropertyControls(Button, {
  tint: {
    type: ControlType.Color
  }
})
```

## [Framer Motion](#framer-motion)

Also available in every Code Component is the entire [Motion](https://motion.dev/docs/framer) for React API. This can be imported from `"framer-motion"`.

```
import { animate, motion } from "framer-motion"
```

[Previous Property Controls](./property-controls)

[Next Introduction](./overrides-introduction)

---

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