Edit Page

#Canvas Components

Start using design components from the canvas directly in your code components.

Every design component you define on the canvas in Framer X can be imported directly from code, including defined properties. They are referenced from the code/canvas.tsx file, which holds all design components. To make a component in Framer X:

  • Select any Frame on the canvas
  • Switch to the components panel
  • Click create and name your component
import * as React from "react"
import { Button } from "./canvas"

export function MyComponent() {
  return <Button title="Login" />
}

#Canvas.tsx

Your component gets automatically written to a dynamic file called code/canvas.tsx, from where you can add it to any code file in your project. The imported components are named after their Frame name and behave like any other React component. This file is automatically generated when you change any of your components.

// code/canvas.tsx example contents
import { createDesignComponent, CanvasStore } from "framer"
const canvas = CanvasStore.shared(); // CANVAS_DATA;
export const MyComponent = createDesignComponent<{parentSize?:{width:number|string,height:number|string},width?:number|string,height?:number|string}>(canvas, "id_wOcClzQbT", {}, 200,200);

#Properties

If you’ve defined any properties on your component master (like text or image), as well as width and height, you’re able to reference and update these properties via code too.

import * as React from "react"
import { Profile } from "./canvas"

export function MyComponent() {
  return (
    <Profile
      width={200}
      height={200}
      name="Harry"
      image="harry.jpg"
    />
  )
}

#Layout

Exported Canvas components switch to full DOM layout so they will behave like any other relative DOM element.

import * as React from "react"
import { Card } from "./canvas"

export function MyComponent() {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Card size="100%" />
    </div>
  )
}