Prepare your component for review

Before submitting your component, use the following checklist to verify that it meets Framer’s expectations for security, performance, accessibility, and compatibility. While this guide focuses on code components, many of the recommendations also apply to other component types.

Support static rendering

Animated code components must remain static on the Canvas and when Framer generates exported assets. Prevent browser-only behavior from running during static rendering.

Use useIsStaticRenderer() to prevent animations and other browser behavior from starting in these environments.

import { useEffect } from "react"
import { useIsStaticRenderer } from "framer"

export default function Component() {
    const isStaticRenderer = useIsStaticRenderer()

    useEffect(() => {
        if (isStaticRenderer) return

        // Start animations or browser behavior here.

        return () => {
            // Stop animations and remove listeners here.
        }
    }, [isStaticRenderer])

    return <div>Component content</div>
}

import { useEffect } from "react"
import { useIsStaticRenderer } from "framer"

export default function Component() {
    const isStaticRenderer = useIsStaticRenderer()

    useEffect(() => {
        if (isStaticRenderer) return

        // Start animations or browser behavior here.

        return () => {
            // Stop animations and remove listeners here.
        }
    }, [isStaticRenderer])

    return <div>Component content</div>
}

import { useEffect } from "react"
import { useIsStaticRenderer } from "framer"

export default function Component() {
    const isStaticRenderer = useIsStaticRenderer()

    useEffect(() => {
        if (isStaticRenderer) return

        // Start animations or browser behavior here.

        return () => {
            // Stop animations and remove listeners here.
        }
    }, [isStaticRenderer])

    return <div>Component content</div>
}

Also make sure you:

• Don’t rely on checking whether window exists. Browser APIs may also be available on the Canvas.

• Don’t start animations, timers, media playback, scroll behavior, or DOM manipulation outside the component or at the module level.

Remove unused code

Unused code makes components harder to review and can hide incomplete functionality. Keep your component focused on the functionality it actually provides.

Before submitting:

• Remove unused imports, props, variables, and constants.

• Delete unreachable or abandoned code.

• Resolve TypeScript errors instead of bypassing them.

• Remove incomplete features.

• Handle expected errors and empty states.

Pause work outside the viewport

Components shouldn’t continue performing expensive work when they’re off-screen. Pause background work when the component isn’t visible, and resume it only when needed.

Pause:

• Animations and requestAnimationFrame loops.

• Timers and polling.

• Media playback.

• Canvas or WebGL rendering.

• Expensive calculations and DOM updates.

Always stop background work when the component unmounts.

Limit external dependencies

External resources can affect reliability, privacy, and security. Keep external dependencies to a minimum whenever possible.

• Bundle dependencies with the component.

• Avoid loading scripts or executable code from remote URLs.

• Avoid unnecessary third-party iframes and embeds.

• Validate URLs supplied through property controls.

• Clearly disclose any required external services.

• Handle unavailable resources gracefully.

Never allow configurable values to select arbitrary scripts, modules, or network destinations.

Make interactions accessible

Interactive components should work for keyboard users and assistive technologies. Native HTML elements provide the best accessibility by default.

Whenever possible:

• Use <button> for actions.

• Use <a href="…"> for navigation.

• Add alternative text to meaningful images.

• Preserve visible focus states.

• Associate form inputs with labels.

• Add accessible names to icon-only controls.

If you use a custom interactive element, provide the appropriate role, keyboard support, and focus behavior.

Keep DOM changes inside the component

Components share the page with other Framer elements. Global DOM changes can unintentionally affect the rest of the site.

Avoid:

• Modifying document.body or document.head.

• Applying broad global styles.

• Searching for or modifying elements outside the component.

• Observing the entire document for mutations.

• Overriding browser globals or shared event handlers.

Scope DOM operations to your component, and clean up event listeners and observers when they’re no longer needed.

Avoid performance issues

Components should do only the work required to render and respond to the user. Unnecessary background work can reduce performance for the entire page.

Check for:

• Continuous animation loops.

• Short polling intervals.

• Page-wide mutation observers.

• Repeated full-DOM scans.

• Event listeners added during every render.

• Expensive calculations that could be memoized.

• Effects that restart because of unstable dependencies.

Debounce frequent updates where appropriate, and always clean up effects when the component unmounts.

Keep property controls accurate

Property controls should be easy to understand and produce a visible result. Remove controls that don’t affect the rendered component.

Before submitting:

• Test every control on the Canvas.

• Use clear titles and descriptions.

• Provide sensible defaults.

• Set appropriate ranges and options.

• Hide controls when they don’t apply.

• Make sure defaults in your code match the property panel.

See the Property Controls documentation for supported controls and examples.

Avoid unsafe HTML injection

Configurable or external content shouldn’t be rendered as raw HTML. This helps protect users from unsafe or unexpected behavior.

Instead:

• Render React elements and components.

• Use structured data instead of markup strings.

• Use a strict allowlist parser when structured rendering is necessary.

• Use trusted SVG components for icons.

Avoid using innerHTML or dangerouslySetInnerHTML with configurable, external, or user-provided content.

Use supported Framer APIs

Use current, documented Framer APIs and verify that your component works consistently across the Canvas, Preview, and published sites.

Before submitting, confirm that:

• Property controls affect the rendered result.

• Required props have safe defaults.

• Editor-only behavior doesn’t run on published sites.

• Browser-only behavior doesn’t run during static rendering.

• Deprecated APIs have been replaced.

• The component doesn’t depend on undocumented Framer internals.

Passing this checklist doesn’t guarantee approval. Every submission is reviewed as a whole and may receive findings specific to its implementation.

For broader guidance on designing and publishing components, see Component best practices.