Install

npm install @wasm-fmt/web_fmt

npx jsr add @fmt/web-fmt

Supported Formats

• Script: JavaScript, TypeScript, JSX and TSX
• Style: CSS, SASS, LESS
• Markup: HTML, Vue, Svelte, Astro, Jinja, Twig
• JSON: JSON, JSON with comments
• GraphQL

Usage

Node.js / Deno / Bun / Bundler

import { format } from "@wasm-fmt/web_fmt";

// JavaScript/TypeScript
format(`function foo() {console.log("Hi")}`, "index.js");

// CSS/SCSS/LESS
format(`.foo{color:red}`, "style.css");

// HTML/Vue/Svelte
format(`<div  class="x">Hi</div>`, "index.html");

// JSON
format(`{"name":"John"}`, "data.json");

// GraphQL
format(`query{user{name}}`, "query.graphql");

Web

For web environments, you need to initialize WASM module manually:

import init, { format } from "@wasm-fmt/web_fmt/web";

await init();

// Format your code
const formatted = format(`function foo() {console.log("Hi")}`, "index.js");
console.log(formatted);

Vite

import init, { format } from "@wasm-fmt/web_fmt/vite";

await init();
// ...

Entry Points

• . - Auto-detects environment (Node.js uses node, Webpack uses bundler, default is ESM)
• ./node - Node.js environment (no init required)
• ./esm - ESM environments like Deno (no init required)
• ./bundler - Bundlers like Webpack (no init required)
• ./web - Web browsers (requires manual init)
• ./vite - Vite bundler (requires manual init)

With Configuration

const config = {
	// Common layout options
	indentStyle: "space", // "tab" | "space"
	indentWidth: 4, // number
	lineWidth: 100, // number
	lineEnding: "lf", // "lf" | "crlf"

	// Format-specific options
	script: { quoteStyle: "single", semiColons: "asNeeded" },
	style: { declarationOrder: "alphabetical" },
	markup: { selfClosingSpace: false },
	json: { trailingComma: true },
};

format(code, filename, config);

Configuration

• Biome (Script)
• Malva (Style)
• markup_fmt (Markup)
• pretty-graphql (GraphQL)

Credits

Thanks to:

• The Biome project
• The malva project
• The markup_fmt project
• The pretty_graphql project