Skip to content

Oxfmt Beta

We are thrilled to announce that Oxfmt has reached beta! Since the alpha release in December, we have added support for additional file formats, embedded language formatting, import sorting, Tailwind CSS integration, and much more.

Getting Started

Install oxfmt as a dev dependency:

sh
pnpm add -D oxfmt

Add scripts to package.json:

package.json
json
{
  "scripts": {
    "fmt": "oxfmt",
    "fmt:check": "oxfmt --check"
  }
}

Format files:

sh
pnpm run fmt

Check formatting without writing files:

sh
pnpm run fmt:check

Migrating from Prettier

Install, migrate your config, and reformat in a single command:

sh
pnpm add -D oxfmt && pnpm oxfmt --migrate prettier && pnpm oxfmt

For the full migration guide, see Migrate from Prettier.

AI Migration Prompt

Copy this prompt to your AI coding assistant to migrate your project:

Migrate this project from Prettier to Oxfmt following https://oxc.rs/docs/guide/usage/formatter.html:
1. Install oxfmt and run `oxfmt --migrate prettier`
2. Update package.json scripts to use oxfmt
3. Update CI workflows to use `oxfmt --check`
4. Update lint-staged to use `oxfmt --no-error-on-unmatched-pattern`
5. Run oxfmt to reformat all files
6. Uninstall prettier and related packages
7. Update editor settings for oxfmt
8. Update CONTRIBUTING.md, AGENTS.md, or CLAUDE.md if they mention prettier

For more detailed instructions, check out the Oxfmt docs.

Highlight of New Features Since Alpha

100% Prettier Compatibility

Oxfmt now passes 100% of Prettier's JavaScript and TypeScript conformance tests. For the few remaining formatting inconsistencies, we have reported them to the Prettier team and are collaborating to converge on the expected behavior.

This means you can migrate from Prettier to Oxfmt with confidence that your code will be formatted identically. If you encounter any uncovered cases, please report them.

Additional File Formats

Oxfmt now formats JavaScript, JSX, TypeScript, TSX, JSON, JSONC, JSON5, YAML, TOML, HTML, Angular, Vue, CSS, SCSS, Less, Markdown, MDX, GraphQL, Ember, and Handlebars. This means you can use a single formatter for your entire project.

Tailwind CSS Integration

Automatic Tailwind CSS class sorting is supported for both JS/TS and non-JS/TS files. The functionality of prettier-plugin-tailwindcss is built-in, so the plugin is no longer required.

Import Sorting

Built-in import sorting is now available with configurable options:

  • ignoreCase - Case-insensitive sorting
  • sortSideEffects - Sort side-effect imports
  • order - Custom sort order
  • newlinesBetween - Control blank lines between import groups
  • customGroups - Define custom grouping rules

package.json Sorting

Automatic package.json field sorting is enabled by default, keeping your package.json files consistently organized.

Embedded Language Formatting

Format code embedded in template literals and JSX:

  • Tailwind CSS class sorting in JS/TS templates
  • CSS-in-JS with styled-jsx and CSS prop support
  • Angular @Component template and styles

Node.js API

A programmatic API is now available:

ts
import { format, type FormatOptions } from "oxfmt";

const input = `let a=42;`;
const options: FormatOptions = {
  semi: false,
};

const { code } = await format("a.js", input, options);
console.log(code); // "let a = 42"

CLI Changes

  • --init - Bootstrap a new configuration file
  • --migrate prettier - Migrate from Prettier configuration
  • --stdin-filepath - Specify filepath for stdin input

Config Changes

Editor Support

Oxfmt works in all supported editors: VS Code, Cursor, Zed, IntelliJ IDEA, WebStorm, Neovim, and any editor with LSP support.

Roadmap

We are continuing to improve Oxfmt towards a stable release:

  • Prettier plugins support
  • Stability
  • Performance optimizations

Next Steps

See the full installation guide in the Oxfmt docs.

Reporting Issues

For formatting differences, please refer to the formatting differences discussion.

Join the Community

We'd love to hear your feedback on Oxfmt. Connect with us: