675: Building Hot Page with Tim Farnam

What It Covers

Tim Farnam presents HotPage, a website builder combining drag-and-drop interfaces with direct HTML and CSS control. The platform uses web components, real-time collaboration technology, and exports clean code while maintaining full developer access.

Key Questions Answered

• •Code-First Builder Approach: HotPage surfaces actual HTML and CSS instead of abstracting them away, letting users modify properties directly while maintaining visual editing. Users type real CSS properties like "color: red" to get color pickers, making skills portable to any project beyond the platform itself.
• •Inline Styles with Superpowers: The platform enables hover states and media queries in inline styles through custom implementation, solving the traditional limitation that makes inline styles impractical. This eliminates selector naming and specificity concerns while preserving CSS's full capabilities for single-element styling scenarios.
• •Web Components Integration: Any web component works natively in HotPage without framework lock-in. Users can import components via esm.sh, create custom elements with full attribute control, and build component libraries as shareable pages. The platform functions as a web components playground with zero build configuration required.
• •Real-Time Collaboration Architecture: HotPage implements Yjs CRDTs for conflict-free data synchronization, enabling multiplayer editing features launching within months. The architecture separates editor and site origins for security while maintaining instant updates across domains, with undo/redo functionality included automatically through the CRDT implementation.
• •Export and Portability Strategy: Users can download complete sites as static HTML/CSS files and host anywhere, avoiding vendor lock-in common in competitors like Webflow. The platform generates clean semantic HTML with minimal abstraction, making exported code readable and maintainable outside the builder environment.