What is Pixla Editor?

The native Mac editor for HTML, CSS & JavaScript — and Swift/Vapor projects.

Pixla Editor is a fast, native macOS code editor built for web development — HTML first. It’s the best place on the Mac to hand-write HTML, CSS, and JavaScript, with first-class support for Swift and Vapor projects as a strong second pillar.

It’s lightweight and quick, not a heavyweight IDE. Open a folder, open a file, and start editing — no project format to learn, no configuration to wrangle. Files are read straight from disk and written straight back.

What’s included

• Best-in-class web editing — syntax highlighting, Emmet, tag auto-close, and prettier-style formatting for HTML, CSS, and JavaScript.
• Live preview — see your HTML render side by side, with two-way scroll sync.
• Language intelligence — real completion, diagnostics, and hover docs from bundled language servers, with native fallbacks.
• Swift & Vapor — first-class editing for the Vapor projects Vaporware runs locally, backed by SourceKit-LSP.
• Git, integrated — status badges, diffs, staging, commit, and sync without leaving the editor.

Pixla Editor is free and full-featured — no Pro tier, no paid unlock. Every feature ships free.

See also: First Launch · Opening a Folder · HTML Live Preview

First Launch

The welcome window and how to open your first project.

When Pixla Editor launches, it shows the welcome window — an Xcode-style start screen with quick actions on the left and your recent projects on the right.

• New Project… — create a fresh folder and open it as a workspace.
• Open Folder… — open any existing folder as a workspace.
• Recent Projects — jump straight back into something you were working on.

Each action opens the project in its own editor window. You can turn off Show this window when Pixla Editor launches to skip straight to your most recent project next time.

Reopen the welcome window any time from Help ▸ Welcome to Pixla Editor.

See also: Opening a Folder · Opening a Single File

Keeping Pixla Editor Updated

Automatic updates, signed and notarized.

Pixla Editor ships as a notarized, Developer-ID-signed app and updates itself in place using Sparkle. When a new version is available, you’ll be prompted to download and install it.

To check manually, choose Pixla Editor ▸ Check for Updates… from the menu bar.

The first time you launch a copy from your Downloads folder, Pixla Editor offers to move itself into Applications so updates install cleanly.

Opening a Folder

Workspaces are just folders on disk.

Pixla Editor is folder-based. Choose File ▸ Open Folder… (⌘O) and the folder becomes your workspace: its files appear in the sidebar file tree, and everything you edit is saved right back to disk.

There’s no intermediate project file — the folder is the project. Open a Pixla Sites export, a Vapor project, or any web folder and start editing immediately.

Working with a sibling Pixla app? The File menu has shortcuts that start the open panel right inside your Pixla Sites exports or Vaporware projects.

See also: The File Tree · Opening a Single File

Opening a Single File

A lone file still gives you the full editor.

Open an individual file with File ▸ Open File… (⇧⌘O), by double-clicking it in Finder with Pixla Editor set as the handler, or by dropping it on the Dock icon.

A lone file opens its enclosing folder as the workspace and focuses the file in a tab — so opening a stray .html still gives you the file tree, tabs, and everything else.

See also: Opening a Folder · Working with Tabs

The File Tree

Create, rename, and delete files in the sidebar.

The sidebar shows your workspace as a file tree. Click a file to open it in a tab; expand and collapse folders to navigate.

• New File (⌘N) and New Folder (⇧⌘N) create items in the selected folder.
• Right-click any item to rename, delete, or reveal it in Finder.
• Git badges show which files have uncommitted changes at a glance.

See also: Working with Tabs · Git Integration

Working with Tabs

Every open file gets a tab.

Each open file appears in a tab across the top of the editor. A dot on a tab means unsaved changes.

• Save with ⌘S.
• Close the active tab with ⌘W.
• Reorder tabs by dragging them.

See also: Find & Replace · The File Tree · Files Changed Outside the Editor

Files Changed Outside the Editor

Open files follow edits made by other apps.

When another app changes a file you have open — an AI agent, a build script, another editor, or a git command in Terminal — Pixla Editor notices and brings the tab up to date.

No unsaved changes

The tab quietly reloads the new text, keeping your place in the file. A Markdown or HTML preview updates along with it, so you can watch an agent’s edits land as they happen.

Unsaved changes

Your edits are never replaced. Instead, a banner above the editor says the file was changed by another app and offers two choices:

• Reload — discard your edits and show the version on disk.
• Keep Mine — save your version over the one on disk.

Until you choose, saving — ⌘S or auto-save — won’t write over the other app’s change.

Reloading starts the file’s undo history fresh, the same as opening it.

See also: Working with Tabs · The File Tree

Syntax Highlighting

Fast, accurate highlighting for every core language.

Pixla Editor highlights HTML, CSS, JavaScript, JSON, Swift, and Markdown out of the box. Highlighting is data-driven and runs on the native TextKit 2 text engine, so it stays fast even in large files.

Choose a light or dark editor theme in Settings, and Pixla Editor follows your system appearance by default.

See also: Themes & Appearance · Formatting

Emmet & Tag Auto-Close

Write HTML at the speed of thought.

Type an Emmet abbreviation and press Tab to expand it into full markup. For example, ul>li*3 becomes a list with three items.

As you type an opening tag, Pixla Editor auto-closes it for you, and a live tag-pair rename keeps the opening and closing tags in sync when you edit one.

The HTML formatting toolbar gives one-click access to common tags and structure while you edit.

See also: Formatting · HTML Live Preview

Formatting

Prettier-style formatting, on demand or on save.

Clean up the current document with Format ▸ Format Document (⇧⌘F). Formatting is prettier-style for HTML, CSS, JavaScript, and JSON.

Turn on Format on Save in the Format menu to reformat automatically every time you save.

To make every file end with a newline, turn on Ensure final newline on save in Settings ▸ Editor ▸ Saving. It adds one only when it’s missing, matching the file’s line endings.

When a language server is available it does the formatting; otherwise Pixla Editor’s built-in formatters handle it — so it always works.

See also: Language Servers · Autocomplete

Autocomplete

Language-aware completion as you type.

Pixla Editor completes tags, properties, and values as you type. In web files that includes class and id names from your document, plus href/src path completion that walks your project folder.

Completion is powered by bundled language servers where available, falling back to native completion engines so suggestions never disappear.

See also: Language Servers · Formatting

Find & Replace

Search and replace within a file.

Open Find with ⌘F to search the current file, and use replace to swap matches. Matches are highlighted inline as you type.

See also: Working with Tabs

HTML Live Preview

See your page render side by side.

Open a live preview of your HTML right next to the source. The preview updates as you edit, with two-way scroll sync so the source and the rendered page stay aligned.

Markdown files open as the rendered page. The switch in the toolbar shows the editor, the editor and preview side by side (they scroll together, and the preview updates as you type), or the preview alone. ⌥⌘P toggles the preview and ⌃⌥⌘P side by side. Each file reopens the way you last left it; an empty file opens in the editor. To change where new files open, use Settings ▸ Editor ▸ Open Markdown files in.

While you read, the bar above the preview has Contents (jump to any heading), the word count and reading time, and Find (⌘F, then ⌘G / ⇧⌘G for the next and previous match). Markdown headings also appear in the sidebar’s Outline. Links to #a-heading jump within the page, and a link to another file in the project opens it in a tab — at the heading, if the link names one.

Side by side, the two halves scroll together line by line, so the paragraph you’re editing stays next to its preview. Markdown is rendered the way GitHub renders it: tables, task lists, strikethrough, footnotes and bare links included.

The preview also typesets what GitHub does: callouts (> [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION]), math ($…$ inline, $$…$$ or a `math fence for display, set with KaTeX), diagrams from `mermaid fences, and YAML front matter as a small card at the top. It all works offline. Click any inline code to copy it — handy for IDs, URLs and commands.

While writing Markdown: select some text and paste a URL to make it a link. Paste or drop an image — a screenshot, or image files from the Finder — and it’s saved in an images folder beside the file and linked in place (an image already inside the file’s folder is linked where it is). Format Document (⇧⌘F) lines up every table’s columns. The status bar shows the word count and reading time.

In the Finder, select a Markdown file and press Space: Quick Look shows it rendered the way the preview does — callouts, math and diagrams included, light or dark with your Mac. To have .md files open in Pixla Editor when you double-click them, use Settings ▸ Editor ▸ Markdown ▸ Use Pixla Editor.

To change how the preview reads, use Settings ▸ Editor ▸ Markdown: Preview font (System, New York, Rounded or Monospaced) and Preview width (Narrow to Full Width).

To copy part of a preview, hover it. A code block shows a copy button in its corner that copies the code exactly as written. A heading shows one in the margin that copies its whole section — the heading and everything under it, up to the next heading of the same level — as Markdown; ⌥-click it to copy the section as plain text instead. You can also select across paragraphs, lists and tables and press ⌘C.

Export a rendered page with File ▸ Export as HTML…, or a Markdown file as a paginated PDF with File ▸ Export as PDF…. File ▸ Print… (⌘P) prints it the same way — callouts, math, diagrams and code included, on white paper whatever your theme.

To paste a document somewhere else, use the Copy button next to the pencil while previewing (or Edit ▸ Copy As). A click copies rich text (⌥⇧⌘C), which keeps headings and bold in Mail or Pages and gives a plain field clean text. The arrow also offers Plain Text (no # or **, which is handy for web forms like App Store Connect’s license field), HTML, and Markdown Source.

See also: CSS Color Swatches · Diagnostics & Validation

Publish to Pixla Hosting

Put a site online straight from the editor.

Publish a folder of HTML, CSS and JavaScript to Pixla Hosting without leaving the editor. Your first site, at name.pixla.app, is free.

Connect your account

The first time, click Connect with Pixla. It opens pixla.app so you can sign in and approve Pixla Editor. You can also paste an API key in Settings ▸ Pixla. The key is kept in your Mac’s Keychain, and Sign Out there removes it.

Publish

• Click the cloud button in the toolbar, or choose File ▸ Publish to Pixla Hosting… (⇧⌘U).
• Check the folder. A public, dist, site or build folder with an index.html is picked for you; otherwise it’s the whole project. Choose… picks another.
• Pick an existing site, or type a new address. The sheet checks it’s free as you type.
• Click Publish. Unsaved files are saved first, and you get the live link to open or copy.

Publishing replaces everything on the site with the folder, so files you delete locally disappear from the site too. Your last 20 publishes are kept, so you can roll back (see below).

Publish changes

Once a project has been published, a click on the cloud button (or File ▸ Publish Changes, ⌥⇧⌘U) publishes your latest changes to the same site with no questions. Its arrow menu opens the sheet to change the site or folder, or opens the live site. The status bar shows a link to the live site.

Roll back

Choose Publish History… from the cloud button’s menu (or the File menu) to see the site’s recent publishes. Roll Back puts an earlier one live again. The version it replaces stays in the list, so you can roll forward too. Your files in the editor aren’t changed, so your next Publish Changes uploads them again.

What isn’t uploaded

Version control and tool folders (.git, node_modules, build folders), hidden files such as .env, and system files like .DS_Store are never published. .well-known, _redirects and _headers are.

Vapor projects aren’t published from here. They run on the server side, so use Open in Vaporware instead.

See also: HTML Live Preview · The Pixla Family

CSS Color Swatches

Inline swatches and a color picker.

Color values in your CSS show an inline swatch you can click to open a color picker — including colors written inside <style> blocks in your HTML.

See also: HTML Live Preview · Syntax Highlighting

Diagnostics & Validation

Catch problems in the gutter as you type.

HTML and CSS validation, plus diagnostics from the language servers, appear in the gutter beside the affected lines. Hover a marker to read the message.

A structure outline gives you a bird’s-eye view of a document’s headings and elements for quick navigation.

See also: Language Servers · Hover Docs & Jump to Definition

Hover Docs & Jump to Definition

Documentation and navigation, inline.

Hover a tag, property, or symbol to see documentation, with clickable MDN reference links for web languages.

Jump to a symbol’s definition with Format ▸ Jump to Definition (⌃⌘J).

See also: Language Servers · Diagnostics & Validation

Editing Vapor Projects

The editor for Vaporware's local Vapor projects.

Pixla Editor is the place to write the code for the Vapor (Swift) projects Vaporware runs locally. Vaporware owns the local server, toolchain, and databases; Pixla Editor is where you edit.

Open a Vapor project like any folder. From Vaporware, you can hand a project straight to Pixla Editor for code editing.

See also: Swift Language Support · Opening a Folder

Swift Language Support

SourceKit-LSP-backed Swift editing.

Swift editing is backed by SourceKit-LSP, giving you completion, diagnostics, and jump-to-definition for your Vapor code — the same language-server intelligence you get in the web languages.

See also: Editing Vapor Projects · Autocomplete

Language Servers

Real LSP intelligence, with native fallbacks.

Completion, diagnostics, formatting, and hover docs are powered by language servers: the standard web language servers for HTML, CSS, JSON, and JavaScript, and SourceKit-LSP for Swift.

If a server isn’t available, Pixla Editor falls back to its built-in engines — so the app is always useful, and gets smarter when the servers are present.

See also: Autocomplete · Formatting · Diagnostics & Validation

Git Integration

The everyday git loop, built in.

Pixla Editor brings the everyday git loop into the editor: status badges in the file tree, a per-file changes/diff view, staging, commit, and sync — no need to reach for the terminal for routine work.

Not in a repository yet? Choose File ▸ Initialize Git Repository… to start one.

See also: Committing & Syncing · Branches

Committing & Syncing

Stage, commit, push, and pull.

Review your changes in the diff view, stage what you want — whole files or individual hunks from the change gutter — then commit. Push and pull (sync) keep you in step with your remote.

The first time you push, set your origin remote URL (for example a GitHub URL) and sign in through your browser. Pixla Editor uses a standard credential helper, so your token lives only in the macOS Keychain — the editor never stores or sees it.

Let AI draft your commit message from the staged diff — see AI Features.

See also: Branches · AI Features

Branches

Switch, create, merge, and delete branches.

The git toolbar shows your current branch and lets you switch, create, merge, and delete branches from within the editor.

Pixla Editor covers the everyday loop, not the full git IDE. Complex merge conflicts and advanced history operations are surfaced, then handed off to the terminal.

See also: Committing & Syncing · Git Integration

Themes & Appearance

Light, dark, and editor themes.

Pixla Editor follows your system appearance by default, or you can force light or dark in Settings. Editor settings also cover tab size, word wrap, and line numbers.

Display

• Word wrap — reflow long lines to the editor’s width instead of scrolling sideways.
• Show line numbers — the gutter, which also carries git change bars.
• Show invisible characters — reveal spaces, tabs, and line endings.
• Highlight current line — a soft band behind the line the caret is on, with its number picked out in the gutter. On by default; it steps aside while you have text selected.
• Show hidden files — list dot-files like .env and .gitignore in the file tree. Off by default. Toggle it with ⇧⌘. (as in the Finder), from View ▸ Show Hidden Files, or from the eye menu at the top of the file tree. Version-control and Finder bookkeeping — .git, .svn, .hg, .DS_Store — is never listed either way.

See also: Syntax Highlighting

AI Features

Optional AI assistance with your own key.

Pixla Editor can generate a git commit message from your staged changes. AI features use your own API key, entered in Settings ▸ AI and stored securely in the macOS Keychain.

AI is entirely optional and free to use — there’s no gating or markup on it.

See also: Committing & Syncing

Keyboard Shortcuts

The shortcuts worth memorizing.

Files & tabs

• New File — ⌘N
• New Folder — ⇧⌘N
• Open Folder — ⌘O
• Open File — ⇧⌘O
• Save — ⌘S
• Close Tab — ⌘W
• Publish to Pixla Hosting — ⇧⌘U
• Publish Changes — ⌥⇧⌘U

Editing

• Find — ⌘F
• Format Document — ⇧⌘F
• Jump to Definition — ⌃⌘J
• Toggle Markdown Preview — ⌥⌘P
• Markdown Side by Side — ⌃⌥⌘P

Formatting

The Format menu carries the same actions as the toolbar above the editor, and changes with the file you’re editing — HTML actions for an .html file, Markdown ones for a .md.

• Bold — ⌘B
• Italic — ⌘I
• Underline — ⌘U (HTML)
• Strikethrough — ⇧⌘X
• Inline code — ⌘E
• Insert link — ⌘K
• Heading 1–6 — ⌥⌘1–⌥⌘6 (HTML); ⌥⌘1 inserts a Markdown heading
• Body text / paragraph — ⌥⌘0 (HTML)
• Blockquote — ⇧⌘9
• Bulleted list — ⇧⌘8
• Numbered list — ⇧⌘7
• Task list — ⇧⌘L (Markdown)

The remaining toolbar actions — images, tables, code blocks, <div>, <pre>, rules and line breaks — live in the Format menu without a shortcut, so the keys you do learn stay the ones you’d expect from any Mac app.

See also: Formatting · Find & Replace

The Pixla Family

Better together, great alone.

Pixla Editor is part of the Pixla family of apps. Each works on its own, and they’re better together:

• Pixla Sites — a no-code website builder; hand its exported HTML/CSS/JS to Pixla Editor when you need to hand-edit.
• Pixla Hosting — managed hosting with analytics, forms, and store.
• Pixla Mail — email campaigns and newsletters.
• Vaporware — a local Vapor dev environment whose projects Pixla Editor opens for code editing.

The tools are free; the services are paid. Pixla Editor itself is free and full-featured.

See also: Editing Vapor Projects · What is Pixla Editor?