Framer plugin

Format Code.

Less cleanup. More flow.

A closer look

Two tools. One clearer workflow.

People working with code components in Framer who want a tidier, more convenient editing workflow.

Format on save.

Bring spacing, indentation and line endings into a more consistent, readable shape as you work.

Your formatting preferences.

Options for indentation, semicolons, quotes and JSX layout help keep code in the style you prefer.

Imports within reach.

Add imports to the TSX file from the Importer instead of repeatedly writing them by hand.

A small interactive example of the workflow. The plugin runs inside Framer.

02 — A little less friction

Format Code

Framer Plugin

A little less friction between you and your code.

01 / Formatter

Less cleanup.

Consistent spacing, tidy JSX, and semicolons handled.

Example.tsx

Interactive preview

export default function Example() {
    return (
        <div
            style={{ padding: 24 }}
        >
            Hello, Framer.
        </div>
    )
}

Try Format to tidy the example.

02 / Importer

Keep your flow.

Add imports without leaving your code behind.