HTFlow - AI-Powered Page Builder for VS Code

Transform your HTML development workflow with HTFlow, the ultimate visual page builder extension for VS Code, Cursor, Kiro, Antygravity, Windsurf, Trae or any any other Monaco Editor based editor. Build stunning websites faster with AI-powered components, real-time visual editing, and seamless deployment to HTFlow hosting.

✨ Key Features

🎨 Visual Page Builder

Live Preview & Edit Mode - See your changes instantly in a built-in browser preview
Click-to-Edit Interface - Select any element to edit its styles, content, and properties
Responsive Design Tools - Switch between desktop, tablet, and mobile views with one click
Real-time Style Panel - Modify CSS properties visually without touching code
Combo Class Support - Manage multiple CSS classes per element with ease

🤖 AI-Powered Components

Generate with AI - Create complete pages, sections, and components using natural language prompts
HTFlow MCP Integration - Access pre-built templates for heroes, features, pricing, testimonials, and more
Smart Component Library - Browse and insert professional components instantly
Webflow-Compatible Output - Generate clean HTML/CSS ready for Webflow, WordPress, or any platform

🚀 One-Click Deployment

HTFlow Hosting - Deploy your sites to htflow.dev with custom subdomains
Multi-Site Management - Manage multiple projects from one interface
Pull & Push Sites - Sync your local files with deployed sites
Live Preview URLs - Share your work instantly with clients

📦 Component Showcase

Save Custom Components - Build once, reuse everywhere
Component Library - Access your saved components across all projects
Import/Export - Share components with your team

🎯 Developer-Friendly

Code & Visual Modes - Switch between visual editing and code editing seamlessly
Layer Navigator - View and navigate your HTML structure like a tree
Breadcrumb Navigation - Always know where you are in the DOM
Undo/Redo Support - Never lose your work

🎯 Use Cases

For Freelancers & Agencies

Rapid Prototyping - Build client mockups in minutes, not hours
Client Presentations - Share live preview URLs for instant feedback
Webflow Preparation - Generate clean HTML/CSS ready to import into Webflow
Multi-Client Management - Keep all client sites organized in one place

For Developers

Speed Up HTML/CSS Work - Visual editing for faster development
Component Reusability - Build a library of reusable components
Responsive Testing - Test all breakpoints without browser DevTools
Clean Code Output - No bloat, just semantic HTML and CSS

For Designers

Design to Code - Turn your designs into code without writing CSS
Pixel-Perfect Control - Fine-tune every spacing, color, and font
No Code Required - Edit visually, let HTFlow handle the code
Export Anywhere - Use your designs in any platform

📖 Getting Started

Installation

Open VS Code, Cursor, Kiro, Antygravity, Windsurf, Trae or any any other Monaco Editor based editor.
Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
Search for "HTFlow"
Click Install

Quick Start Guide

1. Open the HTFlow Panel

Click the HTFlow icon in the sidebar
Sign in with your HTFlow account (free to create)

2. Create or Open an HTML File

Create a new .html file in your workspace
Or open an existing HTML file

3. Start the Visual Editor

Click the "Preview" button in the HTFlow panel
Your HTML file opens in the visual editor

4. Edit Visually

Click the "Edit" button in the toolbar to enable edit mode
Click any element on the page to select it
Use the Style Panel on the right to modify properties
Switch breakpoints to design for different screen sizes

5. Generate with AI

Click the "AI" tab in the sidebar
Type a prompt like "Create a hero section with a gradient background"
Insert the generated component into your page

6. Deploy Your Site

Click the "Deploy" button in the toolbar
Select an existing site or create a new one
Your site goes live at yoursite.htflow.dev

🎨 Visual Editing Features

Style Panel

Edit CSS properties visually across all breakpoints:

Typography - Font size, weight, line height, color, alignment
Spacing - Margin, padding with individual side controls
Layout - Flexbox and Grid properties
Sizing - Width, height, min/max dimensions
Background - Colors, gradients, images
Borders - Radius, width, style, color
Effects - Shadows, opacity, transforms

Breakpoint Management

Design responsive layouts with ease:

Desktop (default) - Full-width design
Tablet (≤991px) - Tablet-optimized layout
Mobile Landscape (≤767px) - Landscape phone view
Mobile (≤478px) - Portrait phone view

Styles cascade down from desktop, with override indicators showing which properties are customized per breakpoint.

Element Selection

Click to Select - Click any element to edit it
Breadcrumb Navigation - See the element hierarchy
Layer Navigator - Tree view of your HTML structure
Parent Selection - Quickly select parent elements

🤖 AI Component Generation

Using HTFlow MCP

Generate professional components with natural language:

Example Prompts:

"Create a modern hero section with a gradient background and CTA buttons"
"Generate a pricing table with 3 tiers"
"Build a testimonial carousel with customer photos"
"Create a feature grid with icons"

Available Component Types:

Hero sections
Feature grids
Pricing tables
Testimonials
CTAs (Call-to-actions)
Footers
Navigation bars
Contact forms
FAQ sections
Team sections

Component Library

Save and reuse your best work:

Build a component in the visual editor
Click "Save to Library"
Access it anytime from the "My Components" tab
Drag and drop into any project

🚀 Deployment & Hosting

Deploy to HTFlow

Click the "Deploy" button in the toolbar
Create a New Site or select an existing one
Enter a site name and optional subdomain
Click "Deploy All HTML Files"
Your site is live at yoursite.htflow.dev

Site Management

View All Sites - See all your deployed sites in one place
Pull Sites - Download all pages from a deployed site
Update Sites - Re-deploy to update your live site
Custom Subdomains - Choose your own subdomain or auto-generate

Import to Webflow

HTFlow generates Webflow-compatible HTML:

Deploy your site to HTFlow
Open your Webflow project
Use the HTFlow Webflow App or Chrome Extension
Import your HTFlow pages directly into Webflow

💡 Pro Tips

Workflow Best Practices

Use Combo Classes - Organize styles with multiple classes per element
Design Mobile-First - Start with mobile, then enhance for desktop
Save Components - Build a library of reusable components
Use AI Wisely - Generate base components, then customize visually

Performance Tips

Inline CSS - Keep styles in <style> tags for better portability
Use CDN Images - Link to Unsplash or other CDNs instead of local files
Minimize External Files - HTFlow deploys only root-level HTML files

Keyboard Shortcuts

Cmd/Ctrl + S - Save changes
Cmd/Ctrl + Z - Undo
Cmd/Ctrl + Shift + Z - Redo
Escape - Deselect element

🔧 Troubleshooting

Preview Not Loading

Ensure your HTML file is saved
Check that the file has valid HTML structure
Try clicking the "Reload" button in the preview toolbar

Styles Not Applying

Verify you're editing the correct combo class
Check the breakpoint - styles may be inherited from desktop
Ensure the CSS selector has proper specificity

Deployment Issues

Only root-level HTML files are deployed
External CSS/JS files are not deployed (use inline styles)
Images should use full URLs (not relative paths)

🔗 Resources

Homepage: htflow.com
Webflow App: HTFlow on Webflow

🆘 Support

Documentation: htflow.dev/docs
Discord Community: Join our Discord for help and tips
Email Support: info@htflow.dev

📄 License

MIT License - See LICENSE file for details.

Made with ❤️ by the HTFlow Team

Start building beautiful websites faster. Install HTFlow today!

HTFlow AI Page Builder

htflow