Developer mode

Developer mode is one switch. Off, the builder is pages, media, content, and a conversation with the assistant. On, the same builder also gives you the source files, a code editor, and a file tree.

It changes nothing about your website. It changes what the builder is willing to show you.

Turning it on

Open a website's builder, then:

1. Click the website mark at the top of the left rail — it turns into a menu icon under your cursor. This is the builder menu.
2. Open the Advanced submenu at the bottom of it.
3. Click Developer mode.

A confirmation appears — "Developer mode on. Code, files, and the editor are available." — and the builder rearranges around it immediately.

There is a faster route once you know it exists. Press ⌘K (Ctrl + K on Windows) to open the command palette and type developer. The command reads Turn developer mode on or Turn developer mode off depending on where you already are.

Turning it off is the same switch. Nothing you made while it was on is lost or hidden from the assistant — the builder simply goes back to pages and preview.

Where the preference is kept

Developer mode is stored in your browser, not on your account and not on the website. That has a few practical consequences:

• It follows you from website to website. Turn it on once and every builder you open in that browser opens with it on.
• It does not follow you to another computer, another browser, or a private window.
• Your teammates are unaffected. Someone else opening the same website sees their own setting, not yours.
• Clearing your browser's site data resets it to off.

What appears

The Code segment

The mode switch at the top-left of the workspace always offers Preview and Edit. Developer mode adds a third segment, Code, which replaces the canvas with the file tree and the editor. The builder menu's View submenu holds the same three, plus Preview beside code — a split view with the editor on the left and the live preview on the right, divided by a seam you can drag to rebalance. Turning developer mode off while in Code mode lands you in Edit mode; turning it back on returns you to the code.

The device sizes — 1 for desktop, 2 for tablet, 3 for phone — keep working in either mode, and ⌘B collapses the side panel when you want the width.

The file tree

In Code mode a Files column opens along the left edge of the workspace, showing your website's whole source tree. Click a file to open it. Right-click a row (or use the two buttons in the column's header) to create, rename, or delete. Drag the column's right edge to widen or narrow it.

What you see there is the real source tree described in Building with Blade — resources/ for templates and data, public/ for files served exactly as they are.

The editor

Selecting a file opens it in the same editor that powers VS Code, with line numbers and the current line highlighted, so the caret is never ambiguous. HTML, CSS, JavaScript, JSON, XML and SVG, YAML, and Markdown files are colored, and Blade templates are colored as HTML plus their @directives, {{ }} and {!! !!} echoes, and {{-- --}} comments. Selecting an image opens a preview of the image instead. The editor follows the builder's light or dark appearance, and it is fetched the first time you open a file in Code mode, so the builder itself stays light.

Search inside the file. ⌘F opens find, ⌥⌘F opens find and replace — with match case, whole word, regular expressions, replace all, and a count of matches. ⌘G steps to the next match.

Edit like VS Code. The editor's whole keymap is there; the ones worth learning first:

On Windows, Ctrl stands in for ⌘ and Alt for ⌥. ⌘K still opens the builder's Quick open, even while the editor has focus. Pressing Enter keeps the current line's indentation.

Your work saves itself. About a second after you stop typing, the file is written and your website recompiles, so the preview beside you catches up on its own. ⌘S saves immediately rather than waiting. The top bar shows the current state — editing, saving, saved — so you never have to guess whether a change landed. A save the safety checks refuse is reported in the same place, and your text stays in the editor.

Revision history: every save is undoable

Each open file's header carries a History button. It lists that file's saves — newest first, with who saved it and how long ago — and restores any one of them with a click. Click a save itself to compare it with the file as it is now: the earlier save on the left, the current file on the right, differences marked, with a Restore this save button above the comparison. Close it to return to the editor with nothing changed.

• History covers every save of the file, whoever made it: your edits, your teammates' edits, and the assistant's.
• Each file keeps its 50 most recent revisions.
• Restoring — from the list or from the comparison — writes the old contents back through the normal save path, which records a revision of its own. An undo is itself undoable.
• Brand-new files have no history — there is no earlier state to keep — and neither do uploaded images, which are managed through the Media panel.

A fuller File menu

The builder menu's single New page… item becomes a File submenu:

• New page… — the same page dialog as before, which creates a real Blade page for you.
• New file… — any other source file, at any path.
• New folder… — an empty folder to organize into.
• Quick open (⌘K) and Save (⌘S).

Quick open searches files

⌘K normally searches your pages and the builder's commands. With developer mode on it searches files instead, so you can jump straight to resources/views/components/sections/hero.blade.php by typing hero.

An edit button on every page

Rows in the Pages panel gain a small Edit the page source button beside the settings gear, which opens that page's .blade.php file in the editor. It is the shortest path from "this page looks wrong" to the template that makes it. In Edit mode, every section's toolbar has the same Edit code button for its component.

Editable sections

With the files in front of you, you can decide what Edit mode offers for each section: a companion .yml beside a component declares its fields. See Editable sections.

The rules that still apply

Developer mode gives you the files. It does not remove the guardrails that keep a published website working:

• No server-side code. Your website is static, so files that a server would execute — .php, .py, .rb, .sh and similar — are refused. Blade templates under resources/views/ are the deliberate exception: they are sources, compiled here and never shipped.
• Some files cannot be deleted. index.html, robots.txt, sitemap.xml, llms.txt, and the platform's health-check file keep your website reachable and indexable.
• A save that would break the website is refused. The same safety checks that run before publishing run on every manual save, and a change that would introduce a new problem is rejected with the reason rather than quietly accepted. It only ever refuses new problems, so a website that already has an issue is still editable.
• Compiled output is not yours to edit. The HTML your visitors receive is generated from your templates on every save. Editing it directly is pointless: the next compile overwrites it.

Working alongside the assistant

You and the assistant are editing the same files, and neither of you is locked out.

The assistant reads your entire website at the start of every message you send it, so a file you changed by hand two minutes ago is simply part of what it sees. You can hand-tune a section, then ask it to "add three more cards like the ones in the services grid," and it will match what you wrote.

It works in the other direction too. When a template stops compiling — a missing @endforeach, a variable that does not exist — the assistant is told exactly what the compiler said. Describing the breakage to the assistant is usually the fastest fix, because it sees the diagnostic and you do not.

Where to go next

• Building with Blade — the source tree, pages, layouts, and components.
• Site data and collections — the data your templates read.
• Blade syntax reference — everything supported, in one place.