BUILDMID

Build a Code Formatter Playground

60 minutes

0 completed

prettiercode-toolsdiffreact

Description

Build a web tool where you paste code, configure formatting rules, and see formatted output with a diff view.

Requirements

Paste code in the left panel, see formatted code in the right panel

Support at least 3 languages: JavaScript/TypeScript, JSON, CSS

Configurable rules: indent size (2/4/tabs), semicolons, quotes (single/double), trailing commas

Diff view highlighting what changed

Copy formatted code button

Reset to defaults button

Preset configurations (Prettier default, StandardJS, Airbnb)

Use Prettier as the formatting engine (runs in-browser via WASM). Use a diff library for highlighting changes.

.prettierrc import/export

Format on paste

Multiple file tabs

You will be guided through MCP setup before the timer starts