Format Code

Format Code brings reliable TypeScript and TSX formatting to Framer’s Code Editor.

Format Code brings reliable TypeScript and TSX formatting to Framer’s Code Editor.

Keep the compact Fx control open and work normally. Press Command-S on macOS or Ctrl-S on Windows to save and format, or use the Fx button to format the current saved file.

Choose two- or four-space indentation, semicolons, single quotes, and optional spacing inside single-line JSX elements. Your preferences are stored locally.

Highlights:

• Safe format-on-save workflow • TypeScript and TSX support • Compact, resizable Framer-native interface • Light and dark mode support • No account, API key, analytics, or external server • Invalid source code is never written back

Format Code uses the open-source Prettier library for code formatting. It is independently developed and is not affiliated with or endorsed by Prettier.

Note: Framer provides plugins with the latest saved version of a code file. Keep Format Code open while working and save your file before formatting unsaved changes.

Format TypeScript & TSX in Framer