Pancake Stack › Pancake Stack Manual

Browse and edit a site's files inside Pancake, preview them at phone, tablet or desktop width, and design a page with the Assistant.

5.1The Files window

Click Files on a site's card. The window has three parts: the folder tree on the left, the editor in the middle, and the preview on the right.

• The tree. Folders open in place. Drag files from the Finder onto the list to add them. Right-click a file for Rename…, Duplicate, Show in Finder and Move to Trash. Hidden files and backups are dimmed.
• Sensitive files (.env files, .sql dumps, keys and .htpasswd) show a lock: they are never served to browsers, and Pancake doesn't edit them here.
• New makes a file (page.html unless you name it) or a folder.

5.2The editor

The editor shows line numbers and colours for HTML, CSS, JavaScript, PHP and Python. Press ⌘F to find, ⌥⌘F to find and replace, and ⌘S to save. Smart quotes and autocorrect are off, so code stays code.

• Images, PDFs and other non-text files open in Quick Look.
• Files over 2 MB open read-only, showing their end (useful for logs).
• Open in My Editor sends the file to your own editor.

5.3Live preview

Turn on Preview in the toolbar and choose a Width: Phone, Tablet or Desktop. The preview reloads every time you save. It shows the page you're editing when it's an HTML or PHP page inside the site; otherwise it shows the home page.

The preview needs the servers. If they're stopped, the Files window has its own Start All button.

5.4Tidy HTML

For HTML files, Tidy HTML indents the page, closes tags and fixes nesting with HTML Tidy. It doesn't save by itself: check the result, then press ⌘S.

5.5Ask the Assistant

1. Select the code you want changed, or select nothing to work on the whole file.
2. Click Ask the Assistant, describe the change ("make the header sticky") and click Ask.
3. Compare Now and Proposed side by side. Click Apply Change if you like it, then save.

Nothing changes until you apply and save. The Assistant uses your cloud AI provider if you switched one on, otherwise Private Cloud Compute or Apple Intelligence on this Mac (see The Assistant and MCP). When the code goes to a cloud provider, passwords and keys are removed first.

5.6Design with the Assistant

Describe the site you want and Pancake designs its home page: a complete, responsive page in the site's folder, ready to edit, test and deploy.

1. Choose New Site ▸ Design with the Assistant and give the site a name. (For an existing site, open its Files and click Design….)
2. Pick a look: Black & business, Fun, Elegant, Minimal, Warm & friendly, or Surprise me.
3. Describe the site, for example "A bakery in Kyoto: our breads, opening hours, where to find us, a contact form".
4. Optionally open More choices for a Layout (landing page, portfolio, restaurant or shop, documentation) and Colours.
5. Click Design It and look at the preview at phone, tablet or desktop width.
6. Ask for changes in Ask for a change ("make the header darker", "add a pricing section") until you like it, or Start Over.
7. Click Use This Design. Pancake takes a save point first and keeps the previous page as .pancake-bak.

How the page is made depends on the AI you have:

• Private Cloud Compute or your own AI key: the assistant writes the whole page. With a Claude key, Pancake sends Anthropic's frontend-design guidance with each request; other models get Pancake's own design guidance.
• Apple Intelligence on this Mac: it plans the page and Pancake's templates draw it. Free, private and offline.
• No AI available: the page is built from the look you picked, with your first line as its title.

Pages are self-contained: they use the fonts already on visitors' devices and need no outside files or scripts.