Local projects
Open folders as editable web projects and keep files visible beside the editor.
Workspace
A Mac workspace for real web projects.
HTML Designer keeps project folders, linked sites, source editing and preview in one desktop workflow, with Finder-friendly local files and saved remote connections.
Linked sites
The Links palette lists saved FTP, FTPS and SFTP sites next to local project shortcuts.
Finder integration
Project actions include opening folders, revealing files and launching pages in a browser.
Site windows
Remote and local project windows keep site-specific editing tasks organized.
Projects first
The main workflow starts with the site you are working on, not with a blank document. Open a folder or connect to a saved site and continue from there.
Preview and PHP
Code, Split and Preview layouts with real local serving.
The app includes a local preview server for project roots, Dreamweaver-style layout modes and a PHP staging workflow that uploads temporary preview files to the user's own server.
Code, Split, Preview
Use editor-only, preview-only or split mode from the View menu.
Vertical or horizontal split
Place source and live view side by side or stacked, with Live View on Top when needed.
Local preview server
Project files can be served from a local Mac preview server, with port 8080 as the default.
Debounced live reload
The preview refreshes without flicker while typing, and can be forced from Refresh Live View.
PHP staging
PHP previews can upload into temporary hep-preview-* folders on a configured server.
Browser and history controls
Preview navigation includes reload, back, forward and external browser handoff.
Static and server-side workflows
Static files can render from the local project. PHP can be staged through FTP, FTPS or SFTP so server-side output is tested in a realistic environment.
Advanced Inspector
Inspect and edit the rendered page without losing the source.
The Mac preview injects an in-app inspector into the rendered page. It is separate from normal browsing mode, so links still work when Inspect is off.
Hover and selection overlay
Inspect mode highlights the element under the pointer and keeps a persistent selection after click.
Selector and DOM breadcrumb
The side panel shows a compact selector and a clickable DOM path from root to the selected node.
Box model
Margin, border, padding and content dimensions are drawn in a DevTools-style box model panel.
Computed styles filter
Computed CSS properties are listed with a filter field that searches names and values.
Jump to source
Clicking an element sends tag and structural path back to Swift so the editor reveals the matching source range.
Native Web Inspector
The WKWebView remains inspectable on macOS, so the system Inspect Element path is still available.
Edit Text in Preview
With Edit Text on, double-click a rendered text element, edit it in place and commit on Enter or blur.
Undo-friendly source write
Visual text edits are mapped back to plain-text HTML elements, escaped safely and written through the editor's undo path.
Built for live page work
The inspector understands that WebKit may normalize DOM structure. Before jumping or writing, the app validates the tag and only commits visual edits when the source element contains plain text rather than nested markup.
Remote sites
FTP, FTPS and SFTP connections built in.
Saved connections let the Mac app browse, connect, disconnect and edit site files without switching to a separate transfer utility for routine work.
Connection manager
Create, edit and configure saved site connections from the Links palette.
FTP and FTPS
Work with traditional web hosting servers that expose FTP-style access.
SFTP
Connect to SSH-backed sites when SFTP is the correct publishing channel.
Remote browsing
Open remote folders, inspect files and keep server projects separate from local work.
Connection details stay visible
The connection sheet keeps protocol, host, port, remote path, credentials and passive mode in one Mac-native form before saving the site.
Palettes
Floating Mac tools for structure, style and reusable code.
HTML Designer uses dedicated palettes for repeated web-editing tasks so the main editor can stay focused while supporting tools remain nearby.
DOM outline
Inspect tags, #id values and .class values, then reveal the opening tag in source.
CSS Designer
Adjust common style properties from a focused palette while editing CSS and markup.
Snippets
Create snippet folders, assign triggers, import, export and insert reusable code.
Swatches and elements
Keep colors and common HTML elements close to the active project.
Inspector-style editing
The palette model fits Mac desktop work: small focused windows for structure, style and reuse while the editor remains the primary surface.
Editor tools
Built for HTML, CSS, JavaScript, PHP and Markdown power editing.
The source editor supports common web project files with helper tools for formatting, navigation, snippets, image previews, multi-selection and file-aware editing.
HTML breadcrumb bar
A thin bar below the editor shows the DOM path at the cursor; clicking a segment jumps to that tag.
Select Parent / Child Tag
Commands expand selection to the containing HTML element or descend to the first child element.
Multi-cursor selection
Find all, add next match and skip next match support repeated edits across a document.
Image hover preview
Hover local image paths in HTML or CSS to preview project images without opening the file.
Code-safe text view
Smart quotes, replacements, spelling and data detection are disabled for reliable source editing.
Two-space tabs
Tab inserts two spaces and Shift-Tab removes indentation near the cursor.
| Area | Formats and tools | Workflow |
|---|---|---|
| Markup | html, htm, xhtml | Edit source, inspect DOM structure and preview rendered output. |
| Styles and scripts | css, js | Maintain page styling and behavior next to the HTML project. |
| Server and data files | php, json | Open supporting files and preview PHP through a configured server workflow. |
| Writing and notes | md, txt | Edit Markdown and plain text inside the same project workspace. |
Insertion shortcuts
The Insert menu keeps common HTML, form, CSS, jQuery Mobile, PHP and Markdown snippets close to the editor.
AI assistant
Ask for web-development help inside the Mac app.
The assistant is tuned for HTML, CSS, JavaScript and related site work: explanations, debugging, code review, examples, file edits and cleaner implementations.
OpenAI and Anthropic providers
HTML Designer includes provider code for OpenAI and Anthropic, plus app prompts focused on semantic, accessible and responsive web output.
With a project folder open, assistant edits are confined to the project root, can create or update files, and can write raster image requests from SVG source when supported.
Explain code
Ask what a snippet does, how layout works or why a script is failing.
Generate snippets
Create clean HTML, CSS and JavaScript examples for common interface tasks.
Review and debug
Use the assistant for code review, accessibility checks and clearer implementations.
Project context
Attach a bounded project file list and readable source files while skipping heavy directories.
Validation
Check documents before they leave the editor.
HTML Designer includes document validation paths for checking HTML output and surfacing issues while the project is still open on Mac.
HTML validation
Run checks against the active document to catch markup issues.
Issue feedback
Validation results can be reviewed before publishing or remote upload.
Web-aware checks
The validation path identifies itself as HTML Designer document validation.
Report pipeline
Feedback and crash-reporting code keeps app diagnostics connected to product quality.
Find in Project
Search and replace across site files.
Project search supports broader maintenance work: finding repeated strings, narrowing scope and replacing across selected files when a site-wide edit is needed.
Project-wide search
Find text across the files that make up the current project.
Replace all
Apply repeated text changes without opening each file manually.
Scoped results
Limit work to the relevant project area when a full-site search is too broad.
Maintenance workflow
Use search for link changes, class renames, text updates and cleanup passes.
Mac app
Native HTML Designer for macOS.
HTML Designer is the Mac app in the htmldesigner project. The current app target uses version 26.0b and requires macOS 14.6 or later.
SwiftUI desktop interface
The app is built as a native Mac experience with desktop windows and palettes.
Product-first copy
The site presents HTML Designer as the complete Mac product.
Mac distribution ready
The call to action can point to the final Mac distribution URL when it is available.
Rainbow Factory
The product footer and splash asset use Rainbow Factory branding.