# Framer API Integration

> To integrate APIs in Framer, open your project and access the Assets panel. Navigate to the Code section, click the add icon, and select New Code File. Title your component, click Create, and add it to your design library. Complete the API configuration, save changes using Ctrl + S, connect your design to dynamic data using the API fetcher, and access your configuration to connect external data sources.

Canonical: https://livedemo.ai/tutorials/framer-api-integration/
Apps: Framer
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff3b7dd0e157abed9159/preview?step=1

## Steps

1. Open your Framer project.
2. In Framer, go to the 'Assets' panel to access your design assets library for images, icons, and components.
3. Navigate to the 'Code' section and click the add icon.
4. Select 'New Code File'.
5. Add a title for your new component.
6. Click 'Create' and finalize your component and add it to your design library.
7. Complete your API configuration with the closing parameter. Save your code changes with the keyboard shortcut Ctrl + S
8. Connect your design to dynamic data using the API fetcher.
9. Access your API configuration to connect with external data sources.