What is Pixla Sites?

A no-code website builder for Mac.

Pixla Sites is a native macOS website builder. You build pages by adding elements — headings, images, buttons, heroes — style them on a live canvas, and export static HTML or publish straight to the web. No code, no build step, no toolchain.

Your first project

1. Open Pixla Sites — the Welcome window offers templates, New Blank Site, and Open Existing.
2. Pick a template, or start blank and add pages yourself.
3. Your project is a .pxs file saved on disk, just like any other document.

Each project holds one or more pages. The editor shows the current page on a canvas, with a sidebar on the left and an inspector on the right.

What’s included

• Visual canvas — click or drag elements in, edit them in place.
• Media Studio — social cards, site icons and hero graphics, generated from your own brand.
• Six bundled fonts — they work offline and ship with every export.
• Export or publish — a self-contained folder, or one click to yourname.pixla.app.

Everything you build is yours. Exports carry no frameworks, no trackers, and no calls home — a page works offline the moment it is on disk.

See also: The Editor · Using Templates · Export as HTML

The Editor

Sidebar, canvas, inspector, toolbar.

The editor has four areas.

Sidebar (left)

• Pages — manage your site’s pages.
• Elements — click or drag to add new elements.
• Layers — see and reorder the element tree.
• Assets — images, and the Downloads manager.

Canvas (center)

A live preview of the page. Click an element to select it, then edit it in the inspector. Double-click text to edit it in place.

Inspector (right)

Content fields, layout and style for whatever is selected. With nothing selected it shows page- and site-level settings instead.

Toolbar (top)

Zoom, undo/redo, the advanced-controls toggle, the Media Studio wand, Preview, and Publish.

See also: Simple vs. Advanced Mode · Adding Elements · Media Studio

Using Templates

Start from a built-in design.

Pixla Sites ships with twelve templates, and each one is a whole site rather than a demo of one: a global navbar and footer, every page written through to the end, and Privacy and Terms already in place. Open the Welcome window (File > New Window) to browse them.

Picking one creates a brand-new document with its pages, elements and styles already in place. The template itself is never modified — your copy is fully independent.

There is no Lorem Ipsum and there are no blank pages. Where a template writes something you are meant to replace, it says what belongs in that spot in the voice the finished page should use — so you can read it as an instruction and then type over it.

Customizing a template

• Change any text by selecting it on the canvas and editing in the inspector — every field a template fills in has a control.
• Swap images from the inspector’s asset picker.
• Set the Navbar’s Mark to your own logo. A template wears a monogram of your site’s initial, never Pixla’s logo.
• Set your colours and fonts once as tokens, in Page ▸ Colors and Page ▸ Fonts.
• Try the Layout picker on the big sections — it rearranges one without you retyping a word.
• Add, remove or reorder pages in the Pages tab.

See also: Section Layouts · Colors & Fonts · Making It Look Like Yours · Managing Pages

Importing an Existing Site

Bring a page in as a content scaffold.

If you already have a page somewhere, you can bring its content in rather than retyping it.

• File > Import Website... (Cmd+Shift+I) — choose an .html file, or the folder containing the site so its images come too.
• File > Import from URL... — paste a page address and Pixla Sites fetches it.

Both add one new page to the project you already have open — not a new document — and select it, so you can import into an existing site without disturbing it.

What comes across

Headings, paragraphs, list lines, images and links, in document order, grouped into sections. The page’s meta description becomes its SEO description. The first nav becomes a global Navbar and the first footer a global Footer — but only if your project doesn’t already have them, so an import never clobbers your own chrome. A thin slice of inline styles (colour, background, size, weight, alignment, radius, opacity) comes with it. Local images are embedded as assets; remote ones are downloaded, up to 40 per import.

What doesn’t

Stylesheets. All of them — external CSS, style blocks, classes, the cascade. With them go layout (flex, grid, spacing, positioning), fonts, animations and hover states. Tables, forms, videos, iframes and inline SVG have no equivalent here and are skipped, and only the first nav and footer are read.

Treat it as a content scaffold, not a copy of the site. You get the words and pictures in roughly the right order; the design is yours to rebuild. A JavaScript-rendered site may import almost nothing, because the URL import reads the raw HTML the server sends and nothing a script would have drawn.

See also: Global Elements · Adding Elements · Making It Look Like Yours

Managing Pages

Add, rename, and set the homepage.

Every project has at least one page. The Pages tab shows them all, split into Main and Utility.

• Adding — click + in the Pages header, or press Cmd+Shift+N.
• Renaming — double-click a page name, or right-click ▸ Rename.
• Setting the homepage — right-click ▸ Set as Homepage. Only one page can hold it.
• Page settings — right-click ▸ Page Settings... for the title, description and slug.

The homepage is always served at the root URL (/). Every other page gets its own slug.

See also: Homepage & SEO · Global Elements

Homepage & SEO

Titles, descriptions, slugs and social cards.

The homepage is the first page visitors see, served at / when you publish. Every other page gets its own URL slug (/about, /contact).

SEO fields

• Title — the <title> tag. Keep it under 60 characters.
• Description — the meta description. Keep it under 160 characters.
• Slug — the URL path segment. Generated from the page name, or set it yourself.

These are included in the HTML export and the published site.

Social card

The inspector’s SEO section also has a Card: the image someone sees when they paste a link to this page into a message, a post or a chat. Click Create... to make one in the Media Studio, or clear it with the x. A page with a card publishes it alongside the page with the og:image tags that make it show up large rather than as a thumbnail; a page without one is unaffected.

Fill in the title and description first. The Media Studio seeds a new card from them, so the card is usually right on the first look.

See also: Media Studio · Managing Pages · Publish to Pixla Hosting

Adding Elements

The catalog, and how to place things.

Switch to the Elements tab in the sidebar to see the full catalog.

• Layout — Container, Grid, Section, Spacer
• Typography — Heading, Paragraph, Rich Text, Button
• Media — Image, Video, Gallery, Icon, Divider
• Components — Navbar, Hero, Testimonial, Pricing, Features, Footer, Form, Product Card, App Card, FAQ, Embed
• Sections — Section Header, Chip Strip, Feature Row, Terminal, App Window, Steps, CTA Banner, Docs
• Site — Pixla Badge, Share

Click an element to add it to the current page, or drag it onto the canvas. It lands at the bottom of the element tree; use the Layers panel to drag it into position.

Icons

The Icon element draws an SF Symbol, as do the small icons on a Section Header, a Features grid and a Steps list. Type a symbol name, or take one from the grid under the field — the search matches on name, so “arrow” finds every arrow and “circle” every circled one.

The grid only offers symbols the exporter can draw. A name from outside that set publishes as a plain diamond, so if you type one the inspector says so above the picker rather than letting you discover it on the live page.

Gallery

A captioned media grid — every frame takes the same shape, so rows line up whatever your pictures measure. Set the columns, pick 21:9, 16:9, 4:3 or 1:1, and turn on Lead to let the first frame span the full width.

A frame with no image is not a mistake: it draws an empty branded placeholder, which is exactly what you want when announcing something you can’t show yet.

See also: Containers & Layout · Saved Sections · Forms

Containers & Layout

Nesting, flex, and sizing.

• Container is the fundamental layout element. It holds other elements and can be a vertical or horizontal flex container.
• Section is a full-width container for top-level page blocks — heroes, feature grids, CTAs.
• Grid creates a responsive multi-column layout.

Nesting — drop elements into containers via the Layers panel. A container can hold any element, including other containers.

Width and height — in simple mode, width is Auto or Fill. Advanced mode adds pixel values, padding and flex settings.

See also: Simple vs. Advanced Mode · Responsive Design · Adding Elements

Section Layouts

Three arrangements of the same words.

Nine sections carry a Layout picker at the head of their inspector — Hero, Navbar, Footer, Section Header, Feature Row, CTA Banner, Gallery, Steps and Pricing. It offers Primary, Secondary and Tertiary.

Switching it rearranges the section and keeps every word you wrote. That is why it is one element with three layouts rather than three elements to swap between: try the other two, keep whichever suits your content, and nothing has to be retyped.

• Hero — centred; then split, with the screenshot beside the copy; then short and flat, for an inside page.
• Navbar — links after the lockup; then centred between the lockup and the button; then a tall, non-sticky bar with the logo above the links.
• Section Header — centred; then the heading and its summary side by side; then a small left-aligned title on a rule, for a minor block.
• Feature Row — media on one side; then mirrored; then stacked and centred.
• Steps — a row of cards; then a numbered vertical list; then a horizontal timeline with connectors between the numbers.
• Gallery — an even grid; then a lead shot above the rest; then one wide column with each caption beside its frame.
• CTA Banner — a full slab; then a rail with the button on the right; then no slab at all, just rules and page-coloured type.
• Pricing — a card; then a wide horizontal row; then unboxed, type only on a hairline.
• Footer — the full three-column block; then one compact bar; then a centred brand block above the columns.

A Feature Row’s flip and a Gallery’s lead shot belong to the Layout choice now rather than sitting in their own switches — two controls for one decision is how they come to disagree.

Primary is what these sections have always looked like, so a site you built before the picker existed renders exactly as it did.

See also: Adding Elements · Using Templates · Responsive Design

Global Elements

One navbar and footer for every page.

A Global Navbar and Global Footer appear on every page automatically, and are edited in one place.

1. Add a Navbar or Footer element to any page.
2. Right-click it in the Layers panel.
3. Choose Set as Global Navbar or Set as Global Footer.

The element moves out of the page tree into a Global section at the top or bottom of the Layers panel. Edits there affect every page. To undo it, click Remove in the Layers panel header.

See also: Saved Sections · Managing Pages · Making It Look Like Yours

Saved Sections

Reuse a block you've already built.

Save any element and its children as a reusable section.

1. Right-click the element in the Layers panel.
2. Choose Save as Section.
3. It appears in the Elements tab under Saved Sections.

Placing a saved section creates an independent copy with fresh IDs. Editing a placed copy does not affect the saved original or any other copy.

That independence is deliberate. Repeated sections — CTAs, testimonials — almost always get per-page tweaks, which makes linked copies more confusing than helpful. For the one case that really does want updating everywhere, use a Global Navbar or Footer.

See also: Global Elements · Adding Elements

Forms

Collect messages from visitors.

Add a Form from Elements ▸ Components. It arrives with Name, Email and Message already on it, since that is the form nine sites in ten actually want.

Fields

Each row has a label, a type, a placeholder and a Req toggle, with chevrons to reorder. Types: Text, Email, Phone, Textarea, Select, Checkbox and File. A Select gets its own option list. Add Field appends a blank one.

Form

Submit is the button’s label. Action is your own endpoint if you have one (a Formspree URL, say); leave it empty to use Pixla Hosting.

On submit

Message is the confirmation shown in place of the form (“Thanks! We’ll be in touch.” by default). Set Redirect instead to send people to a thank-you page. A redirect has to stay on your own site.

Where submissions go

• Filled in Action? That wins, always.
• Otherwise, once the project has been published to Pixla Hosting, forms post to that site’s form handling and you read them at hosting.pixla.app.
• Otherwise the form has nowhere to post. A never-published project with no Action exports a form that does nothing.

This follows the project, not the command you ran — a static export of a site you have published still posts to Pixla Hosting.

Spam is handled without a CAPTCHA and without loading anything from anyone else: every exported form carries a hidden field a person never sees but a bot fills in, and a timestamp that catches submissions completed impossibly fast. Pixla Hosting rejects both. Visitors see nothing.

See also: Publish to Pixla Hosting · Adding Elements

Simple vs. Advanced Mode

Two tiers of inspector controls.

The inspector has two tiers, switched by the slider toggle in the toolbar.

Simple mode (default)

• Content fields — text, URLs, heading level
• Width (Auto/Fill) and Height (Auto/Fill/px)
• Font, size, weight, alignment
• Background and text colour

Advanced mode adds

• Padding
• Border radius and opacity
• Border colour and width
• A shadow toggle
• Visibility and lock state
• Responsive overrides for tablet and mobile
• The viewport picker in the toolbar

Toggle it from the slider icon in the toolbar, the inspector header, or Preferences ▸ Editor — or press Cmd+Shift+K.

See also: Responsive Design · Containers & Layout · Keyboard Shortcuts

Colors & Fonts

Design tokens for colour and type.

Colors — the inspector’s colour picker sets background and text colours, stored as hex (#RRGGBB) with the value shown beside the swatch.

Color tokens

Page ▸ Colors holds your site’s named colours. A few names are wired into the design system:

• Brand — the accent that fills buttons.
• Accent Text — the accent used as text. Add it when one colour can’t do both jobs: a red that carries white text on a button is often too dark to read as text on a dark page.
• Brand Light — its tint.
• Status — the small dot in a hero badge.

Dark values — with Dark turned on, each token gets a moon button. Leave it alone and the dark tone is worked out for you; click it when your brand has already chosen its own.

Fonts

Six variable fonts ship with the app. They work offline and are embedded in every export, covering the full weight range from thin to black.

• Inter — clean humanist sans (default)
• DM Sans — geometric sans
• Outfit — friendly rounded sans
• Fraunces — expressive serif
• Lora — readable text serif
• JetBrains Mono — monospace

Name your font tokens Heading, Body and Mono — the built-in blocks look them up by those names.

See also: Making It Look Like Yours · Light and Dark · Media Studio

Making It Look Like Yours

Logo, site icon, watermark, frames.

A site built from the same blocks as everyone else’s still has to look like yours. Four places do most of that work.

Your logo

Select the Navbar and use the Mark control. It offers a Monogram — your site’s initial on a tile in your brand colour, which is what a new document and every template starts with — a four-square Grid, None for a wordmark standing on its own, and any image in the Assets panel.

Choosing an image replaces the drawn mark; the footer picks up whichever you chose, so the two never disagree. Clear the site name beside it and the image stands alone, which is what you want for a full lockup that already contains your name.

The monogram takes its letters from the site name, and its colour from your brand token — so it is a real mark that belongs to your site, not a placeholder to clear out.

Your site icon

Page ▸ Site Icon sets the image browsers show in a tab and iOS shows on a Home Screen. A tab icon is seen at 16 points, so use a cut drawn for that size rather than a shrunk app icon — fine detail turns to mush. The Home Screen icon should be full bleed and unrounded; iOS applies its own mask, and a pre-rounded tile gets rounded twice.

Create Site Icon... in that same section hands you both: the Media Studio draws a mark made for the size and leaves the masked sizes full bleed.

Your watermark

The quiet mark drawn behind an empty gallery frame. It is a separate setting from the logo on purpose: a full-colour logo shrunk and faded reads as a washed-out app icon. Use the single-colour cut of your mark, and set a second one for dark pages — the tone that carries on white is usually far too dark on near-black.

Frames

In advanced mode, Appearance ▸ Frame draws decorative corner brackets just inside an element, in its own border colour. Brackets mark a panel without closing it. Capped adds a small crenellated tab on the top edge; keep that to one panel per page, because a repeated ornament stops being a mark and becomes a texture.

Frame behaves differently on two things, because it would otherwise be useless on them. On a Divider it draws an engraved rule — a double hairline with a mark set into it, which you choose (lozenge, chevron, dot or none). On a Steps or Features grid it frames each card rather than drawing one box around the lot, and takes that element’s background, border and radius to the cards with it.

See also: Media Studio · Colors & Fonts · Light and Dark

Media Studio

Social cards, site icons, hero graphics.

Every site needs a few pictures of itself: the image a shared link unfurls into, the icon in a browser tab, a backdrop behind a hero. They are the one set of assets a site can’t ship without, and the one set a page builder can’t make out of the page. Media Studio makes them.

Open it from the wand in the toolbar, File > Media Studio... (Cmd+Shift+M), or the Create... buttons next to Card and Site Icon in the page inspector and the wand in the Assets panel.

It opens already looking like your site

Brand colour, heading and body fonts, this page’s title and description, the address you publish to, and initials for a monogram — all read from the project. Reset from Page pulls that text back if you wander off.

Three sets

• Social Card — Open Graph (1200×630), X/Twitter (1200×675), and a square 1080 crop for the platforms that crop.
• Site Icon — favicon at 48, 32 and 16px, the Home Screen icon at 180px, and PWA icons at 192 and 512px.
• Hero Graphic — a wide backdrop at 1600 and 2400px, plus a tall mobile crop. It seeds with no text, because it sits behind your hero’s own heading and buttons.

You always make a whole set, never one image — the sizes each platform demands are exactly the part nobody should have to remember. The chips under the preview are that set; click one to preview it.

The controls

• Ground — Mesh (four corner washes over your surface colour, in your brand’s four-colour palette if it has one), Solid, Gradient, or Ink for a dark card. Gradient and Ink switch the type to light automatically.
• Layout — Leading or Centered. Grid lays a fine rule over the ground. Mark puts your site’s logo (or the generated brand mark) beside the footer line.
• Icons — a Monogram of one or two letters, your Mark, or your Logo; Rounded, Circle or Square; and an inset slider. Two letters is the most that survives a 16px tab icon.
• Palette — accent, ink, surface and the two font families, seeded from your design tokens but free to change here.

Two ways out

• Use as Social Card / Use as Site Icon / Add to Media files the right sizes into the project and wires them up. A card becomes this page’s og:image; an icon becomes favicon.png and apple-touch-icon.png on export and publish.
• Export All Sizes... writes every size in the set to a folder you pick, as PNG or JPEG. Icons are always PNG — a hard-edged mark has no business in a lossy format.

Generating again reuses the same image rather than adding a near-duplicate, so anything already pointing at it picks up the new version. The studio remembers your look between sessions, and re-seeds when you open it on a different project.

See also: Homepage & SEO · Making It Look Like Yours · Colors & Fonts

Light and Dark

Follow the visitor's appearance.

Page ▸ Appearance ▸ Dark makes the exported site follow the visitor’s system appearance. Every colour you have set gets a dark counterpart worked out from it, so you don’t have to design the page twice.

Toggle adds a switch to the site’s nav. It flips between light and dark and always shows the icon for what a click will do — a moon on a light page, a sun on a dark one. A visitor who hasn’t touched it simply follows their system, live.

Where the automatic dark tone is wrong, override it: each colour token gets a moon button in Page ▸ Colors. This matters most for a saturated accent, which the automatic version keeps at roughly the same weight — fine as a button fill, often too dark to read as text on a dark page. Add an Accent Text token for the second job and give it its own dark value.

The canvas has its own sun/moon button so you can design in dark without changing your Mac’s appearance. The exported page is the authority; the canvas is a close preview.

See also: Colors & Fonts · Responsive Design · Export as HTML

Responsive Design

Desktop, tablet and mobile overrides.

In advanced mode, the toolbar shows a viewport picker: Desktop, Tablet, Mobile.

• Desktop is the default. Styles set here apply to every viewport unless overridden.
• Tablet and Mobile overrides store only the properties you change. Anything else inherits from desktop.

The HTML export turns each viewport into a CSS media query automatically.

See also: Simple vs. Advanced Mode · Containers & Layout · Export as HTML

Export as HTML

A self-contained folder of static files.

File > Export Website... (Cmd+Shift+E), or the Export Website button in the Publish popover.

Pixla Sites generates:

• One HTML file per page (index.html, about.html), with its styles in the page itself
• A fonts/ folder holding the bundled fonts you actually used
• favicon.png and apple-touch-icon.png, if you set a site icon
• The social card for any page that has one, plus its og:image tags
• Any files from the Downloads panel, at the paths you gave them
• 404.html — an error page in your site’s own colours, fonts and chrome

You get the 404 page whether or not you make one. Designate a page as the error page and that is what ships; otherwise Pixla Sites builds a plain one from ordinary elements, so it inherits your tokens, your fonts and your global navbar and footer. Without it a host has nothing to answer a wrong address with, and its only move left is to serve your home page as though the address were right.

Images are embedded in the page rather than written beside it, so a page you move or email still shows its pictures.

The output is vanilla HTML, CSS and a little JavaScript. No frameworks, no tracking, no external dependencies — an exported site works fully offline.

See also: Publish to Pixla Hosting · Downloads · Media Studio

Publish to Pixla Hosting

One click to yourname.pixla.app.

Export gives you a folder. Publishing puts the same folder on the web at yourname.pixla.app in one click, and lets you republish over it forever.

One-time setup

Publishing uses a Pixla API key — the same account that signs in to every Pixla app. Create one at app.pixla.app, then paste it into Settings ▸ Publishing ▸ API key. Until you do, the Publish popover offers Set Up Publishing... instead.

Publishing

1. Click Publish in the toolbar, then Publish to Pixla Hosting.
2. Choose a site address. Pixla Sites suggests one from the project name and checks it as you type: available, already yours, or taken. Only taken stops you.
3. Click Publish and leave the window open — you’ll see it export, create the site, and upload file by file.
4. On success: your live URL, a Copy Link button, and how many files went up.

Addresses are 3–63 characters of letters, numbers and hyphens, and can’t start or end with a hyphen. Republishing reuses the same address — the document remembers it, and the Publish popover shows where it last went.

Analytics, form submissions and site management live at hosting.pixla.app, not in this app.

See also: Custom Domains · Export as HTML · Forms

Custom Domains

Point a domain you own at your site.

A published site can answer on a domain you own. The Custom domain section appears in the Publish sheet once the site exists on the server — publish once first, then attach.

1. Type the domain (example.com) and click Add.
2. Pixla Sites shows you the exact DNS records to create — Type, Name and Value, with a copy button on the value. Create them at your DNS provider.
3. Click Check Again until the domain reports live over HTTPS. Certificates issue automatically once the records resolve, usually within a few minutes.

A domain is attached as a pair

example.com and www.example.com are both registered; the Visitors land on picker chooses which one is canonical, and the other redirects to it. Both keep working either way, and you can flip the choice later without touching DNS again. A deeper subdomain like shop.example.com has no www companion, so it gets no picker.

Two things that trip people up

• On a root domain, a CNAME is not legal DNS. Your provider has to flatten it: Cloudflare does that on its own, Route 53 wants an ALIAS record, and elsewhere look for “ANAME” or “CNAME flattening”.
• On Cloudflare, set the record to DNS only — the grey cloud. The orange one proxies the record and the certificate can’t validate. No other provider has such a setting; just create the record.

A just-added domain may show a brief connection error while the edge finishes setting it up. That clears itself. Your .pixla.app address keeps working throughout, and Remove reverts to it.

See also: Publish to Pixla Hosting · Export as HTML

Downloads

Publish files at fixed paths.

A download is a file your site publishes at a fixed path — an app installer, its appcast, release notes, a PDF — independent of any one button. They live in the sidebar’s Assets tab, in the DOWNLOADS section above your media.

Adding one

Click + and pick the file. Each row has a path field (downloads/App.dmg by default). Rename the path and every button and CTA in the project that pointed at the old one follows automatically — though an appcast or a link on someone else’s page is still yours to update.

Linking a button

In any URL field, the small download-arrow menu lists your downloads. Add File... attaches a file and points the field at it in one step.

Embedded or kept on disk

Keep on Disk (Always Latest) decides whether the file’s bytes are copied into the project now, or re-read from disk at every publish. Turn it on for something you keep rebuilding — a DMG you re-cut in Xcode — and the site always ships the current build. Leave it off for a file that never changes. Big files and installers default to on.

If a kept-on-disk file is moved or renamed, the row warns you and Replace File... points it at the file again.

Host on CDN

Host on CDN (cdn.pixla.app) keeps a large per-release binary out of the site itself: its bytes go to your project’s own space on the CDN and every link resolves there. It needs a published address to namespace the files, so attach one first.

The {filesize} token

Type {filesize} into a hero or CTA’s Sub or Fineprint and it becomes the size of whatever download that element’s button links to.

The size is measured, not remembered — a kept-on-disk file that grew between builds still shows the honest number, and you never have to remember to edit “59.2 MB” by hand.

See also: Publish to Pixla Hosting · Export as HTML · Adding Elements

Keyboard Shortcuts

Every binding in the app.

File

• Cmd+N — New document
• Cmd+Shift+N — New page
• Cmd+Shift+I — Import website
• Cmd+Shift+M — Media Studio
• Cmd+Shift+E — Export website

Edit

• Cmd+X — Cut element
• Cmd+C — Copy element
• Cmd+V — Paste element
• Cmd+D — Duplicate element
• Delete — Delete element
• Cmd+A — Select all elements

View

• Cmd+\ — Toggle sidebar
• Cmd+Shift+\ — Toggle inspector
• Cmd+Shift+K — Show/hide advanced controls
• Cmd+P — Toggle preview mode
• Cmd+Shift+D — Toggle dark preview
• Cmd+Up — Scroll to top
• Cmd++ — Zoom in
• Cmd+- — Zoom out
• Cmd+0 — Actual size
• Cmd+Shift+0 — Zoom to fit

Help

• Cmd+? — Open this guide

Inside a text field, the Edit shortcuts do the ordinary text thing instead — Cmd+C copies your selected characters, not the element.

See also: Simple vs. Advanced Mode · The Editor