Code Controls

Code Controls is a Framer plugin that turns hardcoded values inside Code Components into clean, editable Property Controls without rebuilding the component or changing its React behavior.

Select a Code Component on the Framer canvas, scan it, and Code Controls finds editable values across the TSX file. It can expose supported values as real Framer controls, including text fields, numbers, colors, and toggles.

Instead of editing TSX manually every time you want to change a title, width, color, label, boolean, or configuration value, you can control those values directly from Framer’s Properties panel.

Code Controls is designed for creators, developers, template makers, and teams working with custom Framer Code Components.

What Code Controls can expose

• Text, titles, labels, descriptions, button copy, and alt text

• Numbers, sizing values, spacing, limits, and dimensions

• Colors and backgrounds

• Boolean values as toggles

• Values stored in nested objects, arrays, and config data

• Values used across same-file child components

Keeps your component intact

Code Controls edits the existing TSX Code Component in place. It does not convert your design into native Framer layers or recreate your component from scratch.

Your original component structure, layout, React logic, and interactions stay intact while selected values become editable through Framer Property Controls.

How it works

Select a Code Component → open Code Controls → scan the component → choose detected fields → make them editable → change values directly in the Framer Properties panel.

Free includes one successful Code Component conversion. Code Controls Pro unlocks unlimited scans and conversions with lifetime access.

Perfect for Framer developers, premium templates, reusable Code Components, client projects, design systems, and anyone who wants the flexibility of code with the editing experience of Framer.