I completely understand the hesitation, it appears to be going against 30 years of separation of concerns. However, there is a big difference between the HTML/JS mix in React, there you are using JS as a template language, mixing it with your html. Personally I prefer a domain specific template language (like Django or Vue.js) as it enforces separation of concerns. With Tetra you aren't mixing your js/html/css/python, they are just conveniently located next to each other. It's much closer to the idea of Vue.js single file components, where you have your JS, CSS, and HTML for a component all in the same file.

I have been calling what Tetra does "close proximity of related concerns", the creator of HTMX called it "locality of behaviour" (https://htmx.org/essays/locality-of-behaviour/).

The original idea with Tetra was to use Python import hooks to create something akin to Vue.js single file components, and I did in fact built an early prototype doing that. However then the idea came to use Python type annotations to enable you to indicate to your editor to syntax highlight inline strings (the Vue.js like single file components would have needed an even more complex editor plugin and setup).

So, it's not going to be to everyone's taste, it it shouldn't be. There are a million ways to build a website, this is just another. However, I believe its good way to do it.

It's worth noting that it's possible to split the html/css/js out into other files if you set your template to '{% extend "template.html" %}', your styles to '@import "styles.css";", and your script to 'export default from "script.js"'.