#yew #formatter #rustfmt

app yew-fmt

Code formatter for the Yew framework

10 releases (4 breaking)

new 0.5.1 Feb 25, 2024
0.5.0 Feb 16, 2024
0.4.0 Feb 11, 2024
0.3.0 Jan 27, 2024
0.1.1 Nov 25, 2023

#82 in Development tools

Download history 43/week @ 2023-11-21 67/week @ 2023-11-28 28/week @ 2023-12-05 18/week @ 2023-12-12 54/week @ 2023-12-19 64/week @ 2023-12-26 62/week @ 2024-01-02 34/week @ 2024-01-09 20/week @ 2024-01-16 46/week @ 2024-01-23 21/week @ 2024-01-30 43/week @ 2024-02-06 256/week @ 2024-02-13 353/week @ 2024-02-20

677 downloads per month

MIT license

2.5K SLoC


Format HTML-enhanced Rust like normal Rust

yew-fmt is a drop-in replacement for rustfmt, which means that, on top of all of its formatting, it applies formatting to the HTML in yew::html! and yew::html_nested!.

Install yew-fmt

Installing it is as easy as

cargo install yew-fmt

Use yew-fmt in your project

After installing it, it can be used from the command line just like rustfmt. To verify this, run the following command:

yew-fmt --version

However, because it's a drop-in replacement for rustfmt, it can replace the latter to be the backend for the cargo fmt command. To make it the default formatter on your machine, export an environment variable RUSTFMT and set it to yew-fmt, on Linux/MacOS it can be done with the following command:

export RUSTFMT=yew-fmt

Configure yew-fmt

In the fashion of being a drop-in replacement, it inherits methods of configuration from rustfmt, which is explained here, and all of configuration options for rustfmt are also supported by yew-fmt. On top of those, yew-fmt provides the following options of its own:


Maximum width of an HTML node before falling back to vertical formatting.

  • Default value: inherited from max_width
  • Possible values: any positive integer


Along with yew.html_width, different kinds of nodes have different rules for when to be broken up. This option controls what set of rules to use.


Elements are not broken up if they have no children or if all their children are block nodes, otherwise they're broken up.
if nodes are always broken up

    <code>{ "panic!(" }{ msg }{ ")" }</code>
if condition {
    <p>{ "Something else" }</p>


Elements can only be broken up due to exceeding yew.html_width.
if nodes will remain on 1 line unless they exceed yew.html_width

<div><code>{ "panic!(" }{ msg }{ ")" }</code></div>
if condition { <p>{ "Something else" }</p> }


Elements and if nodes are always broken up

        { "panic!(" }
        { msg }
        { ")" }
if condition {
        { "Something else" }


Use prop initialiser shorthand if possible.


<div id={id} />


<div {id} />


Remove braces around prop initialisers if they consist of only a literal.

  • Default value: true
  • Possible values: true, false


<div id={"foo"} class="bar" />


<div id="foo" class="bar" />


Make elements self-closed if they have no children.

  • Default value: true
  • Possible values: true, false


<div id="foo"></div>


<div id="foo" />


By default yew-fmt formats the HTML using Yew's original syntax, however, this feature allows for switching the HTML flavor used to accomodate e.g. community-made variations. As of now, the only supported syntactic variation is that of yew-html-ext

  • Default value: "Base"
  • Possible values: "Base", "Ext"


The default syntax specified by Yew itself.


The syntax of yew-html-ext.

Keep in mind, work is still in progress

As the project is very early on in development, not all CLI options of rustfmt are supported, yet the eventual target of the project is 100% compatibility, so all the ❌ in the table below will eventually become 🟩.

CLI option support
--backup 🟩
--check 🟩
--color 🟩
--config 🟩
--config-path 🟩
--edition 🟩
--emit files 🟩
--emit stdout 🟩
--files-with-diff 🟩
--quiet 🟩


~115K SLoC