codefmt vs. Prettier Playground
Prettier Playground is a single-page tool for formatting plain JavaScript and TypeScript source files. codefmt is a formatter for code that runs inside an automation platform wrapper, such as a Zapier Code action, an n8n Code node, a Pipedream code step, or a Make Code App. Both produce Prettier-compatible output; codefmt uses Biome under the hood, which speaks Prettier's option set.
tl;dr
pick codefmt if: you are formatting code that lives inside Zapier, n8n, Pipedream, Make, or HubSpot, and you want platform-aware wrapping, linting, and HubL or Python support alongside JavaScript.
pick Prettier Playground if: you are formatting a plain JavaScript or TypeScript source file, a React component, or any code that already parses as a complete program, and you want to try Prettier configuration options interactively.
what each one is
codefmt: a free web formatter and linter for automation-platform code. It wraps JavaScript snippets in the runtime shell each platform uses (top-level await, bare return, inputData, $input, etc.), formats with Biome, lints with oxlint, and also formats Python with Ruff and HubL with an in-house formatter and linter. Free, no account, runs in the browser. Chrome and Firefox extensions are available for in-editor formatting.
Prettier Playground: the official interactive playground for Prettier, the popular code formatter for JavaScript, TypeScript, JSX, CSS, JSON, Markdown, and other web languages. Free, no account, runs in the browser. It is the canonical place to try Prettier options and copy formatted output.
side by side
| feature | codefmt | Prettier Playground |
|---|---|---|
| intended use | code inside automation platform wrappers | plain JavaScript and TypeScript source files |
| JavaScript engine | Biome (Prettier-compatible output) | Prettier |
| handles top-level await and bare return | yes, wraps in the platform's async function first | parses as a complete program |
| recognizes platform globals | yes, inputData, output, $input, $http, callback, requests, etc. | no, these are out of scope |
| Python | Ruff formatter and linter | not supported |
| HubL | in-house formatter and linter for HubSpot CMS | not supported |
| linting alongside formatting | oxlint for JavaScript, Ruff for Python, custom for HubL | formatting only |
| browser extension | Chrome and Firefox, formats in-platform editors | no |
| price | free | free |
frequently asked questions
why does Prettier Playground throw an error on my Zapier or n8n code?
Code by Zapier, n8n Code nodes, and Pipedream code steps run inside an async function wrapper provided by the platform. That means top-level await statements and bare return statements are valid inside the platform but are not valid as standalone JavaScript programs. Prettier Playground parses input as a complete program and stops at the first syntax error. codefmt wraps your snippet in the matching platform shell before formatting and strips the shell afterward, so the same snippet formats cleanly.
does codefmt use Prettier or its own formatter?
codefmt formats JavaScript with Biome, which is designed to produce Prettier-compatible output and supports the same option set (printWidth, tabWidth, semi, singleQuote, trailingComma, bracketSpacing, arrowParens, and so on). For plain JavaScript and TypeScript, the formatted output is intended to match Prettier byte for byte on the supported options. The difference is the platform wrapping layer that sits above the formatter, not the formatting itself.
is Prettier Playground the right place to format a React component?
Yes. Prettier Playground is the canonical place to format and try Prettier options on JSX, TSX, plain JavaScript, TypeScript, CSS, JSON, and Markdown. codefmt is not trying to replace it for those file types. codefmt is for code that runs inside a Zapier, n8n, Pipedream, Make, or HubSpot wrapper, plus Python and HubL.
can I get a Prettier config out of codefmt?
codefmt exposes a fixed set of Biome formatter options through the settings panel (print width, indent style, indent width, quote style, semicolons, trailing commas, bracket spacing, arrow parentheses, JSX quote style, organize imports). It does not export a .prettierrc file. If you need a portable config for a repo, set the same options in your project's Prettier config directly.
does codefmt have a playground-style URL share feature?
Not currently. codefmt focuses on quick formatting of platform snippets rather than shareable playground URLs. If you need to share a Prettier-formatted snippet via URL, Prettier Playground supports that. If you want to share an example for a Zapier or n8n snippet, paste it as plain text and link to codefmt.dev.
best code formatter for Zapier code step?
If the code in your Zapier Code action uses top-level await, bare return, or references inputData and output, a generic JavaScript formatter will stop at the first syntax error because the snippet is not a complete program. codefmt is designed for this case: paste the snippet at codefmt.dev or use the Chrome or Firefox extension to format directly in the Zapier editor. For plain JavaScript files outside Zapier, Prettier Playground is the standard tool.
also format code for Zapier, n8n, Pipedream, Make
related comparisons: codefmt vs. HubL Code Formatter, codefmt vs. Zapier's built-in Formatter