> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.

---
title: "createCodeFile"
sidebarTitle: "createCodeFile"
description: "Create a new code file in the Framer project. Code files can export either code components or overrides. ALWAYS read the MCP resource file mcp://mcp.unframer.co/prompts/how-to-write-framer-code-files."
tag: "TOOL"
tagColor: "purple"
gridGap: 30
---

<Aside full>
  <RequestExample>
    ```json lines=false
    {
      "method": "tools/call",
      "params": {
        "name": "createCodeFile",
        "arguments": {
          "name": "string",
          "content": "string"
        }
      }
    }
    ```
  </RequestExample>
</Aside>

<MCPTool {...{"name":"createCodeFile","description":"Create a new code file in the Framer project. Code files can export either code components or overrides.\n\nALWAYS read the MCP resource file mcp://mcp.unframer.co/prompts/how-to-write-framer-code-files.md to see how to create code components and overrides.\n\nYou can use typescript and React. You can also import components in the project by using getComponentInsertUrlAndTypes to get their import url.\n\nWhen creating a code component you should also define its property controls via Framer addPropertyControls.\n\nReturns the ID, path, and insertUrl of the created code file. Use updateXmlForNode with the insertUrl in a ComponentInstance node to add the component to the canvas.","inputSchema":{"$schema":"https://json-schema.org/draft/2020-12/schema","type":"object","properties":{"name":{"type":"string","description":"The name of the code file (e.g., \"MyComponent.tsx\")"},"content":{"type":"string","description":"The TypeScript/React code content for the file"}},"required":["name","content"],"additionalProperties":false}}} />