--- title: "Framer Developers: Quick Start" description: Get your first Plugin up and running published: "Sep 18, 2026, 3:46 PM UTC" --- # [Quick Start](#quick-start) This guide will help you get up and running with a Framer Plugin. ## [Installation](#installation) To get started with Plugins, you can run `npm create framer-plugin@latest` in your terminal. This will walk you through a few steps and will create a new Plugin folder with a basic Plugin setup. If you prefer something other than npm, all major package managers are supported. If you’d looking to build a CMS Plugin specifically, we recommend starting with the CMS Starter Plugin. Learn how to get started with it in the CMS guide. > ###### [Manual Installation](#manual-installation) If you have an existing project you’d like to use the Plugin API from, you can install the `@framer/plugin` package directly. However, we currently do not officially support this. ## [Running your Plugin](#running-your-plugin) After the initial setup, navigate into your Plugin folder using `cd your-plugin` and then run `npm run dev`. This command is what you’ll need to run each time you want to develop your Plugin. With this dev command running, your Plugin can be picked up by Framer and will automatically update when you change any files from within your Plugin folder. > ###### [Node Version too low?](#node-version-too-low) Framer uses the latest libraries that require a modern version of node. We recommend upgrading node or using a node version manager like `n` if you swap versions often. ## [Opening in Framer](#opening-in-framer) Now you have a Plugin running on your computer the next step is opening it within Framer. You'll need to enable the Developer Tools preference from within the Plugin section in the main menu. Once Developer Tools are enabled, open the Plugin menu from the toolbar, and click “Open Development Plugin”. This will run your Plugin. > ###### [Ad-blockers](#ad-blockers) Some Ad-blockers or browsers like Brave try to restrict access to localhost. If you have issues running your development Plugin, allow-listing framer.com may help. Now that your Plugin is up and running, you can add some functionality to your app. Some ways to start would be to try manipulating Nodes, inserting Components, syncing to the CMS, or to start styling your plugin. [Previous Introduction](./plugins-introduction) [Next Publishing](./publishing) --- ## 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)