Skip to main content

​
Your First HTFlow Project

This guide will walk you through creating your first HTFlow project using the HTFlow extension.
Make sure you’ve installed the HTFlow extension first:

​
Step 1: Open a Project Folder

1

Open VS Code

Launch Visual Studio Code
2

Open a Folder

Go to File → Open Folder and select an empty folder for your project
Create a new folder for your HTFlow project to keep things organized

​
Step 2: Open the HTFlow Panel

Access the HTFlow interface: 
Press Ctrl+Shift+H (Windows/Linux)
Press Cmd+Shift+H (Mac)
HTFlow Panel

​
Step 3: Initialize Your Project

1

Click Initialize Project

In the HTFlow panel, click the “Initialize Project” button
2

Follow the Prompts

The extension will guide you through the initialization process:
  • Project name
  • Configuration options
  • Template selection (if available)
3

Wait for Completion

HTFlow will create the necessary project structure and files
You should see success messages in the Output panel

​
Step 4: Start Development Server

Now that your project is initialized, start the development server:
1

Click Start Dev Server

In the HTFlow panel, click “Start Development Server”
2

Automatic Port Management

HTFlow will automatically find an available port and start the server
The extension tracks running servers and displays them in the panel
3

Open in Browser

Your default browser will open with your development server URL
Default URL
http://localhost:3000

​
Step 5: Make Changes

Start editing your project files: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTFlow Project</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Welcome to HTFlow</h1>
        <p>Start building Webflow-compatible sites!</p>
    </div>
    <script src="script.js"></script>
</body>
</html>
Changes are automatically reloaded in the browser thanks to HTFlow’s hot reloading feature

​
Step 6: Validate Your Code

Ensure your code meets Webflow compatibility standards:
1

Click Validate

In the HTFlow panel, click “Validate Project”
2

Review Results

The extension will show validation results:
  • HTML compliance
  • CSS compatibility
  • JavaScript standards
3

Fix Issues

Address any reported issues to ensure Webflow compatibility
Validation errors may prevent proper functioning in Webflow

​
Step 7: Build for Production

When you’re ready to deploy:
1

Run Project Audit

Click “Audit Project” to get a comprehensive analysis
2

Build Production Code

Click “Build Project” to create optimized production files
Output
Build complete!
Output directory: ./dist
3

Deploy to Webflow

Use the production files in the dist folder to deploy to Webflow

​
Keyboard Shortcuts

Speed up your workflow with keyboard shortcuts:
ActionWindows/LinuxMac
Open HTFlow PanelCtrl+Shift+HCmd+Shift+H

​
Useful Commands

Package Management

Install, update, and manage HTFlow CLI

Project Management

Initialize and manage projects

Development

Start development servers

Validation & Audit

Validate and audit your code

​
Next Steps

Explore All Commands

Learn about all available HTFlow commands and features

Check Requirements

Review system requirements and best practices