HTML form template: <style>/<script> text is empty at runtime (kept in designer)

In an HTML form (form_template.html), the text inside a top-level <style> or <script> element is dropped when the app runs.
The designer preview shows the CSS applied, but in the running app DevTools shows <style></style> with 0 characters.
Classic YAML HtmlTemplate forms on the same page keep their <style> content, so it is specific to the new HTML form templates.

To reproduce

  1. Create a new app.
  2. Add an HTML form whose form_template.html is a top-level <style> followed by a <div>:
    <style>.x{color:red}</style>
    <div class="x">hello</div>
    
  3. Open the form in the designer: “hello” is red.
  4. Run the app: “hello” is black, and the <style> element in DevTools is empty.
  5. Put the same markup in a classic HtmlTemplate YAML form: it works.

Expected: the <style> text reaches the browser and the rule applies at runtime, as it does in the designer.
Actual: the element is emitted as <style></style>; all text inside <style>/<script> is lost.

Workaround: move the CSS into theme.css (or a theme asset referenced by <link>) instead of an inline <style>.

Seen 16 Sep 2026 on a hosted app, anvil CLI 0.7.2.

Good catch – fix on the way!

2 Likes

Got Claude to make a PR on the public repo if that helps speed things up

1 Like