Build a site. Keep it up to date.HTML Designer for Mac

Create a portfolio, update your opening hours or add a new service page. Edit the files, check the page in preview and publish the changes to your own hosting.

Download for Mac Download on the Mac App Store
Direct download: version 26.2macOS 14.6 or later · automatic updates
HTML Designer with a project open: code editor, AI Chat, live preview of a website and the About window
Build on your Mac

Take a page from draft to published.

Open your existing site or a new project folder. Write the page, see how it looks and upload it when the wording, images and links are ready.

Website Projects

Return to a client’s website.

Return to a portfolio or client website and find the page, styles and images for the next update.

Manage your websites →
HTML Designer FTP connection sheet for a remote site
HTML Designer advanced preview inspector with box model and computed styles
Visual Inspector

Find what is moving that button.

Find why a button is out of place, inspect its spacing and reach the matching HTML. For an eligible plain-text heading, correct the wording directly in the preview.

Find what controls a page →
Live Preview

Check the new heading on the page.

Check a new headline, image or section in the page preview before publishing the update.

Check changes as you edit →
HTML Designer live preview beside source code
CSS Styling

Match your site’s fonts and colours.

Match a new page to your site’s fonts and colours. Reuse a contact block or button snippet, then adapt it to the new content.

Style your website →
HTML Designer CSS Designer floating palette
HTML Designer AI assistant and validation tools
AI Website Assistant

Ask AI for a starting section.

Ask for a services section with three headings and a contact link. Review the code, replace placeholder content and check the page before publishing.

Build a section with AI → Connect your assistant →

See the tools for the next update.

See where to inspect a misplaced element, check the preview, connect to hosting and adjust page styles.

HTML Designer workspace with inspector panel

Visual Inspector

HTML Designer live preview beside code editor

Live Preview

HTML Designer new FTP connection dialog

Hosting connections

HTML Designer CSS Designer palette

CSS Styling

HTML Designer Elements palette

Page elements

HTML Designer Snippets palette

Reusable Snippets

HTML Designer Insert menu

Quick insertion

HTML Designer CSS selector and text controls

Style controls

Website Publishing

Publish the new page or correction.

Update a contact page, replace a menu or publish a new portfolio project. Connect to your hosting, transfer the changed files and check the live page in a browser.

Publish website changes →
HTML Designer local and remote web project screen

Choose a website task.

Choose the update you need to make: fix a heading, change contact details, add a section or publish the new page.

Manage your websites

Return to a portfolio or client website and find the page, styles and images for the next update.

See how →

Publish website changes

Upload new opening hours, a revised menu or a portfolio page to your own website hosting.

See how →

Check changes as you edit

Check a new headline, image or section in the page preview before publishing the update.

See how →

Find what controls a page

Inspect a misplaced button or oversized heading and find the HTML or style that controls it.

See how →

Change text on the page

Fix a heading typo or change a short caption directly in the preview, with the HTML updated too.

See how →

Preview PHP pages

Preview a server-rendered PHP page, including its shared header, on your configured hosting.

See how →

Style your website

Set a heading font, use your brand colour on buttons or adjust the spacing around a section.

See how →

Edit pages & source

Write a service page, add a booking link or edit a product section with its preview nearby.

See how →

Update text across a site

Find an old address, phone number or product name across your website and update the matches.

See how →

Build a section with AI

Ask AI to draft a services section, explain a script or suggest a focused page fix.

See how →

Connect your AI assistant

Connect a compatible assistant to inspect your project or prepare an edit you can review in the app.

See how →
Fast hands, faster edits

Keep familiar shortcuts at your fingertips.

⌘SSave
⌘FFind
⌘RRefresh preview
⌘BOpen browser

The palettes in HTML Designer

Open a palette from the Window menu and place it where you work.

DOM palette in use over an illustration

DOM

See the structure of the page as a tree, from html down to each link, and find the element you want to change.

Elements palette in use over an illustration

Elements

Add a div, an image, a paragraph, a heading or a table to the page with one click.

CSS palette in use over an illustration

CSS

Pick a selector and change its text, decoration and layout properties, colour included.

Snippets palette in use over an illustration

Snippets

Insert a ready-made block of HTML or CSS, such as a navigation list, a responsive grid or a sticky header, from its trigger key.

Build the page your site needs.

Build a portfolio or business website, check each update and publish it to your hosting.

Explore all features
Direct download: version 26.2Requires macOS 14.6 or laterAlso for iPad & iPhone

The direct download updates itself from inside the app.

HTML Designer Mac workspace