@import
and @media in inline styles. It works way too well.
April 28, 2025
Hot Page is now, like, actually good. Today, we are announcing a product that finally lives up to our ambitions: a graphical web page builder that puts code first, where anything is possible and you can always understand exactly what you’re building.
We took everything we learned from our 2024 edition and applied it to build an entirely new editor, practically from scratch. This release not only has a slick new interface, but new functionality that unlocks powerful new patterns for building web pages.
@import
and @media in inline styles. It works way too well.
Separation of content and design is a great idea — in theory ... some of the time. For the pages that we build, it’s often just (a lot) more mental overhead and work. When I made the Hot Page landing page, probably 90% of the CSS selectors were only targeting one element. Constantly switching back and forth between the body and styles of the page was a chore.
In our new editor, we decided to bring back something decidedly out of fashion: inline styles. It’s been a few decades so this powerful tool seemed ripe for some reinvention. Indeed, these are not your dad’s inline styles: they have all the modern stuff we depend on to build pages in the 2025, including @media queries, pseudo classes, and nesting.
You could think of it as everything people love about utility classes without the totally inscrutable syntax.
At the beginning we set out to create a web page builder without templates, one where you build up instead of removing cruft to get exactly what you want. While that’s a fundamentally more powerful and creative approach, it also implies a lot more work and of course it’s still pretty nice to have some help along the way.
Our new editor now has a code library full of just that kind of help. Call them whatever you want -- blocks, components, snippets, elements -- but having “stuff” right there to pull off the shelf is pretty damn useful.
The Hot Page code library is just getting rolling, but the possibilities here are very exciting. That’s because all of our library pages are just pages themselves. And since Hot Page itself is just HTML pretty much anything goes. Imagine opening a library page for Web Awesome or Shadcn, and dropping the finest quality components into your page as easily as stacking Legos. Or picking a hero image layout from 40 well-built examples. Now imagine building a library with your very own boilerplate code and effortlessly re-using your own hard work. That’s something we have always wanted --and have always wondered why we had to be the first ones to build it.
The first version of Hot Page was essentially an editor completed dedicated to writing HTML, one where the clutter of markup is hidden while you can still unlock all of its power. We’ve now done the same thing for CSS.
To make a CSS editor, we took away the punctuation and gave it drag-and-drop and other user-interface tweaks, like color pickers, drop downs pickers and property name suggestions.
There is still a long way to go in terms of fluid editing and adding more functionality for specific properties, but we are well on our way to reaching the goal of building a Photoshop-like experience for writing CSS.
Great web pages have great text. Content is always going to be king and we always want to be able to edit copy in an uncluttered interface. But HTML elements are or course much more than text, so our new editor moves all the configuration of elements to a panel on the right hand side of the window: all the attributes, the inline styles and JavaScript event handlers are there for you to tinker with.
Markup has never looked this good.
These days instant saves and multi-player editing are table stakes for web apps. Hot Page is now playing at the high-roller table thanks to the fastest CRDT out there, Yjs. This means all your changes are always transparently saved to the server and you can edit the same document in three tabs at once and nothing will get screwy -- we do it all the time because on Hot Page drag and drop works between windows.
Writing web pages without instant feedback is like driving in the dark without headlights. Why would you? Now if you load your own Hot Page site you’ll always see the latest version with all of your newest edits. Make changes and you’ll see the page move right in front of your eyes. Just flip a toggle to see it exactly how your readers will encounter it.
This all adds up to take us much further to our ultimate goal: creating the perfect web developer experience -- whether that’s for newbs building their first page or neck beards who have already built thousands. Our team is constantly using our own product to build our own product, feeling the pain points and iterating to make it better.
We’ve got a long roadmap for the rest of this year and our team is very excited to keep pumping out new features:
It’s going to be fun so stay tuned! And start building your own Hot Page now