Pixla Editor Documentation

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

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.

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 get a preview too — toggle it with ⌥⌘P.

Export a rendered page with File ▸ Export as HTML….

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.

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

Editing

Find — ⌘F
Format Document — ⇧⌘F
Jump to Definition — ⌃⌘J
Toggle Markdown Preview — ⌥⌘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.