<!DOCTYPE html><html lang="en">  <head>    <base href="/prettier/" />    <meta charset="utf-8" />    <meta      name="description"      content="Format the resulting HTML with Prettier via a response handler."    />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <link rel="stylesheet" href="/index.css?v=mwbofrht" />    <link rel="stylesheet" href="/prettier/index.css?v=mwbofrht" />    <link rel="canonical" href="https://expo.jeasx.dev/prettier" />    <script type="module" src="/index.js?v=mwbofrht"></script>    <title>Post-process HTML with Prettier » Jeasx - JSX with Ease</title>  </head>  <body>    <header class="shell-header">      <nav class="container">        <ul>          <li>            <a href="/" class="shell-brand"              ><span class="shell-gradient">Jeasx</span> Expo</a            >          </li>          <li><a href="/" class="shell-back">← All examples</a></li>        </ul>        <ul>          <li>            <a              href="https://github.com/jeasx/jeasx-expo/tree/main/src/prettier"              class="shell-source"              title="View source code"              ><img                src="/github-GDUVNX2O.svg"                width="20"                height="20"                alt=""              /><span>Source</span></a            >          </li>        </ul>      </nav>    </header>    <main class="container">      <h1>Post-process HTML with Prettier</h1>      <p>        Jeasx lets you post-process the finished HTML with a        <a href="https://www.jeasx.dev/faq#response-handler">response handler</a        >. This example uses <a href="https://prettier.io">Prettier</a> to        format the markup of this very page.      </p>      <p>        The handler is set on <code>this.responseHandler</code>, receives the        rendered payload and returns the formatted text. Change the widths below        and submit to see the result in the frame, and have a look at the source        to see how it is wired up.      </p>      <form action="" method="post" class="options">        <label          >Print width<input            type="number"            name="printWidth"            min="20"            max="200"            value="80" /></label        ><label          >Tab width<input            type="number"            name="tabWidth"            min="1"            max="8"            value="2" /></label        ><input type="submit" value="Format" />      </form>      <iframe        class="preview"        title="Formatted markup of this page"        src="?printWidth=80&amp;tabWidth=2"      ></iframe>    </main>    <footer class="container shell-footer">      <p>        <a href="https://www.jeasx.dev">jeasx.dev</a        ><span aria-hidden="true">·</span        ><a href="https://github.com/jeasx/jeasx-expo">GitHub</a>      </p>      <p>© 2026 · powered by Jeasx on Node@26.13.0</p>    </footer>  </body></html>