I've increased my productivity massively with Remix react (
https://remix.run/docs/en/v1). You default to HTML and JS but extend it with JSX/React. It supports Markdown MDX out of the box. It has some architectural features that allows me to reduce my lines of code 60-90%. No more reducers, context, weird state bugs. Just do your work and be done. But you can use all of these or any third party react component if you want to.
There are three functions, your export default JSX, a "loader" which runs on every load, and "action" for GET/POST to handle mutations. From this, you get the old style CGI script work flow.
It has its own context via OutletContext that does away with react's state weirdness/gotcha's. My old code for stripe/mailchimp/oauth was 4000 lines. In remix, it's 400 lines.
For CSS I am using Material v5, but that wasn't my choice. Although I am a big fan of it's <Box display="flex" sx={{ maxWidth:'xyz', foo:bar }}>. I think "Box" has been copied from theme-ui (?), it seems universal in this era. With just <Box> and Markdown, I can make a nice website.
For testing, I use Playwright with Cucumber-js, but with a twist. I write my tests as acceptance criteria format but in markdown. I can embed documentation and images that are ignored by the test runner.
For the backend I use Postgraphile and roles with row level security. Remix serves a cookie and I store a JWT token to talk directly to postgresql. I get enterprise level response with graphql without having to write any graphql handlers.
It's the best stack I've ever used so far. If I could describe the experience in one sentence: "Get out of my way, so I can work done!"