HugoBlox Studio for VS Code

Visual Editing
for VS Code

The power of Hugo. The simplicity of Notion. Edit your site visually in VS Code with drag-and-drop blocks, AI-powered fixes, and instant preview.

Install for VS Code View Pricing

Free to start · No credit card required · Works offline

VS Code — HugoBlox Studio
5-star rated on VS Code Marketplace
Open Source framework
Built for researchers by researchers

Build Visually. Ship Instantly.

Four ways Studio accelerates your workflow

Visual Theme Configurator

Pick colors, fonts, and spacing with dropdowns and color pickers. Changes apply instantly across your entire site.

No YAML editing required

Drag-and-Drop Page Builder

Reorder blocks, swap layouts, and configure content sections with intuitive visual controls.

20+ pre-built blocks

Smart Content Editor

Notion-style slash commands for instant block insertion. Write in Markdown with live preview and syntax highlighting.

Markdown-native

HugoBlox AI Assistant Pro

Your personal expert for building sites. Get instant answers, generate content, and fix issues without leaving VS Code.

Context-aware help

Studio Features by Plan

Start free, unlock more as you grow. See full comparison →

Feature Free Plus/Pro
AI Docs Assistant
Get instant answers powered by AI
 Trial Unlimited
Fix-It Bot
One-click fixes for broken links and errors
 Trial Unlimited
Visual Homepage Editor
Drag-and-drop block editor
 — ✓
Tag Manager
Organize and clean up your taxonomy
 — ✓
Publication Importer
Import papers from DOI, arXiv, or BibTeX
 Trial High
GitHub Auto-Sync
Automatic commits and pushes
 — ✓
CV Generator
Export your profile to PDF
 — ✓
Batch Operations
Process multiple files at once
 — Pro
Compare all plans

Frequently Asked Questions

Is HugoBlox Studio free?
Yes! The HugoBlox Studio VS Code extension is free to install. The free tier includes the visual content editor, media library, site configurator, and trial access to AI features. Paid plans unlock unlimited AI assistance, advanced automation, and Pro features.

Does Studio work offline?
Yes! HugoBlox Studio is a local VS Code extension. You only need internet for initial installation and AI-powered features. All visual editing, configuration, and content management work fully offline.

What are the system requirements?
Studio requires VS Code 1.85.0 or later and a HugoBlox site running v0.11.0+. It works on Windows, macOS, and Linux, and is also compatible with GitHub Codespaces for cloud-based editing.

Can I still edit YAML manually?
Absolutely! Studio and manual YAML editing work together. Click "View YAML" in Studio to switch to raw editing at any time. Studio preserves your comments and formatting when saving changes.

What if I use a non-HugoBlox Hugo site?
Studio is optimized for HugoBlox sites, but many features like the content editor and media library work with any Hugo-based project. AI features are specifically trained on HugoBlox documentation.
Read the full documentation →

Ready to build visually?

Install HugoBlox Studio for free and start editing your site in minutes.

Install for VS Code Read Documentation

Looking for a template to get started? Browse all templates →