Code Components in Framer

What Are Code Components?

Code Components are React-based components you build directly inside Framer to enable functionality that goes beyond the visual Editor.
Unlike regular canvas layers, Code Components render:

• directly on the canvas

• inside preview

• on your published website

…making them the most powerful way to extend what Framer can do.

They behave like any normal React component, but with Framer-specific features such as Property Controls, auto-sizing, and instant live preview.

If you need fully custom UI, logic, dynamic rendering, or any behavior the canvas doesn’t support — Code Components are the solution.

Why Use Code Components?

Framer already includes Effects, Interactions, CMS, Localization, and Fetch — but sometimes you need something more advanced.

Use Code Components when you need:

1. Custom UI elements

Examples:

• multi-step forms

• carousels

• navbars with scroll logic

• charts & data visualizations

• embedded canvas, SVG, or WebGL

2. Fully custom behaviors

Examples:

• keyboard shortcuts

• audio/video players

• 3D model viewers

• algorithmic animations

3. Reusable components your team can control

With Property Controls, teams can visually adjust:

• colors

• images

• text content

• boolean toggles

• numbers

• breakpoints

• state logic

4. Dynamic, data-driven views

Render anything you can fetch, compute, or calculate inside React.

Core Features of Code Components

Code Components come with unique functionality that makes them production-ready:

1. Property Controls

Expose customizable props to the canvas UI.

These let non-developers modify component behavior visually:

• strings

• numbers

• booleans

• colors

• images

• enums

• control arrays

• object-like groupings

This transforms technical components into editable marketing-ready building blocks.

2. Auto-Sizing

Code Components support multiple layout behaviors:

• fixed

• intrinsic

• fill container

• hug contents

This allows custom-built features to naturally fit layouts, stacks, and responsive frames.

3. Shareable, Versioned Components

Framer automatically versions components and assigns:

• a unique URL

• dependency tracking

• auto-updating imports

This makes it perfect for team libraries, enterprise design systems, and client work.

4. Fully React 18 Compatible

You can use:

• hooks

• effects

• refs

• portals

• context

• async functions

• modern JSX patterns

React knowledge = everything you need.

How to Create a Code Component

Step 1 — Create a New Code File

In the Assets panel → Code → Create Code File, Framer generates a starter component:

This component is available immediately in the Insert panel.

Step 2 — Use the Live Split Preview

Click Preview → Split view to see your component update in real time.
No build steps. No bundlers. No config.

Changes save automatically and refresh instantly.

Step 3 — Add Property Controls

Expose props for teams:

Now the component behaves like a native Framer component.

When to Use Code Components vs. Other Developer Tools

Framer has many extension points. Code Components are only one of them:

If you need custom UI that behaves differently than canvas layers, use Code Components.

If you only need to change layer properties, prefer Overrides.

If you only need API data on a component, try Fetch first.

Best Practices for Code Components

1. Always use React 18 patterns

Framer requires React 18 compatibility:

• use forwardRef where necessary

• avoid deprecated lifecycle methods

• don’t mutate DOM manually

2. Make everything configurable

Expose as many opinions as possible through Property Controls.

This turns your component into a reusable, team-friendly building block.

3. Follow Framer’s auto-sizing rules

To avoid layout breaking:

• don’t hardcode width/height unless needed

• support “fill container” with style={{ width: "100%", height: "100%" }}

4. Use Framer Motion only when needed

Effects and Components often cover 90% of animation needs better than custom code.

5. Test frequently in preview

Canvas ≠ preview ≠ published site.
Make sure everything works across all rendering layers.

Examples of What You Can Build

Custom UI

• Tabs

• Accordions

• Sliders

• Multi-step forms

Advanced visuals

• Lottie animations

• Canvas 2D drawings

• Custom SVG animations

• Charts with Chart.js or Recharts

API-driven components

• Crypto price tickers

• Weather widgets

• Real-time dashboards

• Product availability displays

Brand/enterprise components

• tokenized design system elements

• multi-variant buttons

• typography components

• governance-ready UI patterns

Why Code Components Matter

They enable a hybrid future:
designers work visually, developers extend capabilities, and teams collaborate in one system — without handoffs.

Teams choose Code Components because they offer:

• unlimited behavior

• unlimited UI flexibility

• unlimited scaling

• full React power

• freeform creativity

• instant publishing

• frictionless collaboration

Framer becomes a true design + code environment but without the typical engineering overhead.

Conclusion

Code Components make Framer one of the most extendable no-code platforms on the market. Whether you’re building a deeply custom UI element, integrating a unique interaction, or exposing advanced props for marketing teams, Code Components give you full power without leaving the Framer Editor.

They are:

• flexible

• scalable

• React-native

• shareable

• production-ready

…and they let teams build websites that would be impossible in visual-only builders.

Related reading

• Framer vs Webflow vs Custom Code: Which Stack Fits a B2B Startup?
• How We Use Code Components in Framer
• Website Build (service)
• Compare website stacks (interactive tool)