Build Websites on Mac

HTML Designer is a native Mac editor for HTML, CSS, JavaScript, PHP and Markdown projects, with advanced live preview, visual text editing, inspector tools, FTP, SFTP, snippets, swatches and AI assistance.

HTML Designer Mac workspace with code editor, live preview and advanced inspector panel
Native Mac workflow

A complete web editor built around real projects and live inspection.

Open local folders, connect remote sites, edit source, preview pages, inspect rendered elements, update plain text directly from the preview and keep project tools close without leaving the Mac desktop.

Projects

Local folders and linked sites in one workspace.

The Links palette keeps local projects and remote connections together. Open a folder, jump into a saved site, configure a connection or reveal files in Finder.

Workspace details →
HTML Designer FTP connection sheet for a remote site
HTML Designer advanced preview inspector with box model and computed styles
Advanced Inspector

Inspect the rendered page and jump back to source.

Inspect mode adds hover overlays, persistent selection, DOM breadcrumbs, box model, filtered computed styles and source reveal. Edit Text mode lets plain-text elements be changed from the preview and written back to the file with undo.

Inspector workflows →
Preview

Code, Split and Preview layouts for Mac.

Switch between source-only, preview-only or split view. Split can be vertical or horizontal, live view can sit on top, and PHP preview can stage files through your own FTP, FTPS or SFTP server.

Preview workflows →
HTML Designer live preview beside source code
Palettes

DOM, CSS, snippets and swatches stay within reach.

Floating Mac palettes help you inspect the DOM, tune styles, insert reusable snippets, browse elements and collect colors while the editor remains focused.

Palette system →
HTML Designer CSS Designer floating palette
HTML Designer AI assistant and validation tools
AI and validation

Ask for code help and validate the result.

The assistant can use OpenAI or Anthropic providers for web-development help. Built-in validation checks documents and reports issues before you publish.

AI and validation →

Real Mac app screens

The site now uses live screenshots from HTML Designer on macOS: remote connection setup, source and preview, inspector tools, insert menus, elements, CSS controls and snippets.

HTML Designer workspace with inspector panel

Inspector workspace

HTML Designer live preview beside code editor

Live preview

HTML Designer new FTP connection dialog

FTP connection

HTML Designer CSS Designer palette

CSS Designer

HTML Designer Elements palette

Elements palette

HTML Designer Snippets palette

Snippets palette

HTML Designer Insert menu

Insert menu

HTML Designer CSS selector and text controls

CSS controls

Mac desktop app

Code, preview, inspect and publish from one place.

HTML Designer brings the repetitive parts of web work into a native Mac layout: project navigation, source editing, rendered preview, visual inspection, remote transfer, CSS tools and assistant feedback.

Remote workflows →
HTML Designer local and remote web project screen

Everything at a glance

HTML Designer is for Mac web projects that need source editing, preview, inspection, remote access and code assistance in a single native app.

Project workspace

Open local folders and saved sites from the Links palette.

Learn more →

FTP, FTPS, SFTP

Connect, browse, edit and manage remote site files.

Learn more →

Code/Split/Preview

Switch between editor-only, split live view and preview-only layouts.

Learn more →

Advanced inspector

Hover overlays, persistent selection, breadcrumbs, box model and computed styles.

Learn more →

Visual text editing

Double-click preview text and commit plain-text changes back to source.

Learn more →

PHP staging

Preview PHP through a temporary folder on your own server.

Learn more →

DOM and CSS tools

Use DOM outline, CSS Designer, Elements, Snippets and Swatches palettes.

Learn more →

Editor power tools

Breadcrumb navigation, parent/child tag selection, multi-cursor and image hover preview.

Learn more →

Find in Project

Search and replace across project files with safe open-tab handling.

Learn more →

AI assistant

Use OpenAI or Anthropic for code fixes, file edits, explanations and reviews.

Learn more →
Fast hands, faster edits

Common Mac commands stay within reach.

⌘SSave
⌘FFind
⌘RRefresh preview
⌘BOpen browser

Get HTML Designer for Mac

A native Mac app for building and maintaining HTML, CSS, JavaScript, PHP and Markdown projects with live inspection and visual text editing.

View the full feature encyclopedia
Requires macOS 14.6 or laterVersion 26.0b
HTML Designer Mac workspace