⌘ K
svelte · sfc · indent · live

Format Svelte components

Indents Svelte single-file components by tracking braces and tags. For production formatting, install prettier-plugin-svelte locally. Runs in your browser.

Svelte Formatter
Input
129 B
4 lines
Output
130 B
5 lines
Status
ready
live
Ratio
1.01×
out/in
input · svelte
output · indented svelte
<script>let count=0;
function inc(){count++;}</script>
<button on:click={inc}>{count}</button>
<style>button{padding:8px}</style>
Quick Start

How to format Svelte

Svelte components mix three languages. This tool runs a generic brace-tracker — for canonical output use the official prettier-plugin-svelte locally.

  1. 01

    Paste a .svelte file

    The whole single-file component including <script>, markup, and <style>.

    Parsing runs through Prettier’s standalone bundle (or the language-specific equivalent) loaded lazily — no parser ships until the tool is opened.

    sveltePrettierASTstandalonelazy
    input · sourceraw · AST
    <script>let x</script>
    loaded · parsedAST · ready
  2. 02

    Pick indent

    2 spaces is the Svelte project default; 4 if you prefer wider tabs.

    Indent width, tab style, and print-width re-format through a memoised pass — switching 2 → 4 spaces never re-parses, only re-prints.

    optsindentprint-widthmemoisedlive
    opts · optionsindent · live
    indent=2
    options applied · livelive
  3. 03

    Braces aligned

    JS blocks, CSS rules, and tag pairs each track their own depth.

    The formatter is deterministic and idempotent: running it twice produces byte-identical output, which keeps diffs and git noise to a minimum.

    liveidempotentdeterministicdiff-cleanstable
    out · formatteddepth · ready
    {#if x}
  y
{/if}
    formatted · liveidempotent
  4. 04

    Copy or save

    Component is never uploaded — copy or grab the .svelte file directly.

    Download writes a Blob with the language-appropriate extension; copy uses navigator.clipboard.writeText so the output preserves all whitespace exactly.

    exportclipboardbloblanguage MIMEclient-side
    ok · copiedready · done
    ✓ Copied
    shipped · ready to shipsuccess
Pro tips

Formatting tips that keep diffs sane

Pick one config and pin it

Inconsistent formatting causes diff churn. Commit .prettierrc / .editorconfig and enforce in CI.

Format on save

Editor integration is faster feedback than a pre-commit hook. Use both for belt-and-braces.

Idempotency matters

Running the formatter twice should produce identical output. Test this on a representative file.

Match the language community

Default to community conventions: 2 spaces for JS/CSS, 4 for Python, tabs for Go. Fights over indent are a productivity tax.

Print-width drives wrapping

80, 100, and 120 are the common targets. Wider lines parse fast but review slower side-by-side.

Don&rsquo;t mix formatters and linters

Prettier handles whitespace; ESLint handles correctness. Disable overlapping rules to avoid fight-club configs.

Related toolsVue SFC FormatterAstro FormatterTSX FormatterJSX FormatterHTML FormatterCSS Formatter
Use Cases

When to format Svelte

Pasted snippets, code review, REPL exports.

REPL exports

Tidy a component pasted out of the Svelte REPL. Idempotent: running the formatter twice produces byte-identical output, which is the foundation of a clean CI gate. Pair with a pre-commit hook so PRs arrive already formatted, focusing review on logic.

idempotent

Code review

Match indent before pasting into a PR comment. Pairs with EditorConfig + .prettierrc for end-to-end consistency. Whitespace-only changes vanish so reviewers see real diffs, and git blame stays honest about who wrote what.

CI-ready

Tutorials

Standardise Svelte examples across a course or blog. Output respects your indent width, tab style, and print-width — settings carry over for repeat runs. Switching 2-space to 4-space costs nothing in CPU but standardises an entire codebase.

diff-clean

Quick demos

Reformat a single-file component for a slide. Format-on-save is the fastest feedback loop; CI is the safety net. Together they make inconsistent indentation a thing of the past and free up review cycles for genuine concerns.

PR-friendly

Legacy clean-up

Tidy an old SvelteKit page from a previous major. Whitespace-only changes don't trigger downstream content-hash invalidations, so CDN cache keys and CI cache layers stay warm. Real changes get all the rebuild budget.

review-ready

Cross-framework

Match neighbour Vue / React file indent in a polyglot repo. Pairs with linters (ESLint, Stylelint, pylint) that catch what formatting alone can't — bugs, unused imports, dead code. Each tool stays in its lane, and the codebase stays clean.

deterministic
FAQ

Frequently asked questions

No — the official plugin needs a Node runtime. This is a brace-tracking heuristic for quick clean-ups.
{#each}, {#if}, {:else} blocks are tracked by their braces; they indent like any other block.
No — script blocks are treated as braced text. The TSX Formatter has full TS support if you split out the script.
No. Order is preserved; only whitespace changes.
No — formatting runs locally in your browser tab.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!