Editors and views

Two controls on the context bar decide how the open file is presented, and they answer different questions. Editor is which editor : Canvas , Grid , Code , Entry , Home , or one of the Styles workspace's Elements and Variables . It lists only the editors this file supports, so there is nothing in it to be disabled. Diff is never one of the choices: it is the editor a comparison opens in, and it shows as the bar's Editor only while you are looking at one. View is which view of the canvas : Edit or Design , with Preview as a toggle beside them. It appears only while the Canvas editor is open. A view is a lens rather than a different app, showing the same file underneath in the way that suits the job. Every open file remembers both as you switch between tabs.

Those seven names come from one list in Studio, which is why the pane's context bar and the status bar can never print different words for the same editor.

Edit

Edit is for writing. The canvas becomes the page itself: click any text and type, press / for blocks, and fill in the page's metadata on the Inspector's Page tab beside it. Nothing is docked above the page, so it opens at its first line. It reads like the finished page because it is the finished page. The context bar's Size control works here too: pick a breakpoint and the column narrows to it, so you can write against the width your readers will have. Or drag the handle on either side of the column, and the width becomes anything you like with the breakpoint following it. Full guide: Edit mode .

Design

Design is for structure and style. The canvas shows a live panel per breakpoint, phone and tablet and desktop side by side, and the Style tab of the Inspector becomes a full visual inspector for the selected element. A page's title, layout and frontmatter are on the Inspector's Page tab, in Design as in Edit. Full guide: Design mode .

Grid

Grid is for tabular data. Files like CSV spreadsheets open as an editable table: click a cell to change it, and use the familiar copy, paste, and selection keys, which work on the table's rows and cells rather than on the page. Cell edits collect in the tab until you Save , which writes them all back to the file at once.

Entry

An entry that is only fields (a JSON entry of a content collection) opens as a form built from that collection's schema: a date picker for a date, a toggle for a boolean, a tag input for a list, and a picker of real entries for a field that references another collection. Open Entry in the palette opens it. An entry with a body is written on the canvas instead, with the same form in the Inspector's Entry tab. Full guide: Content types .

Home

Home is a workspace's own page, the tab a workspace opens on when none of its documents is open: the Content workspace's collection browser, the Media workspace's library, and Publish's page. It sits in the strip alongside your files rather than over the top of them, and you can keep it beside a page in a split . Full guides: The Content workspace and Media .

Media

An image, video, audio file, font or PDF opens in a viewer rather than an editor. It shows the file itself (the picture at full size, media with playback controls, a font set as a specimen) plus what Studio knows about it, the URL a document references it by, and which documents use it. Clicking a file in the Files panel, or Open in viewer on a file in the Media workspace, is all it takes. Full guide: Media .

Code

Code shows the file as raw source in a full code editor with syntax highlighting, the same editor VS Code uses. It is the escape hatch when you want to see exactly what Studio wrote, and the Export button at the right of the context bar saves a copy of the file elsewhere. Everything you can do here you can also do visually; see Logic for where code fits in Studio.

Switching away from Code, to another editor or another view or another document, carries your last keystrokes with you rather than leaving them behind in a buffer you can no longer see. See Code editing .

Diff

Diff compares the open file against your last commit. You reach it from Review changes in the Publish workspace, with a changed file's Before and after , or from the Editor control on a file that has changes.

It has two halves and a switch above them. Visual draws the page twice, side by side, with added blocks marked in green, removed blocks in red, and edited ones marked on both sides. Code shows the file's text with changed lines highlighted instead. A file with no visual form, such as a stylesheet or a script, offers only Code.

Next change and Previous change , or F7 and ⇧F7 , walk the changes in order, and both sides move together so the block you are reading stays lined up.

The full guide is Source control .

Project Styles

Project Styles is the Styles workspace's two style editors over your project file. Elements is the catalog of your project's element defaults: every heading, button, and link rendered with its base style, so you set the look of each element type once for the whole site. Selecting an element switches the Inspector to the Style tab automatically. Variables lists your site's CSS custom properties by group, each editable in place. See Project Styles and Design tokens .

Project Settings

Your project's configuration, project.json , opens as a document in the Styles workspace, with three editors: Elements , Variables and Code . Switching between them keeps one undo history and one unsaved dot, and ⌘Z , the unsaved dot and ⌘S mean here exactly what they mean in a page. The one difference is Variables , which saves each change as you make it.

Open Project Settings is not one of its editors: it opens a dialog over whatever you are doing, with its sections in three groups (General, Integrations, Advanced), and every change in it is written to project.json as you make it. Go to Styles , in its Overview section, closes the dialog and opens the Styles workspace; Edit as code , in Raw JSON, opens the Code editor. Full guide: Project settings .

Which files offer what

Every file opens in its natural editor and view, and the two controls offer only what that file supports:

Any file with uncommitted changes can also be compared, including files that have no other editor at all, but not from the Editor control: you open a comparison by choosing the file in Source control , which opens it in Diff in the Publish workspace, and Back to Publish leaves it. Opening a file with no editor from the Files tree still says Studio has no editor for it; the comparison asks the narrower question of what changed, and answers it.

Opening project.json from the Files tree lands on Elements , and Go to Styles ( ⌘4 , or from ⌘K ) switches to the Styles workspace from anywhere. Open Project Settings is a dialog rather than an editor of the file, so it leaves the tab as it is.

A JSON entry of a content collection also has an Entry editor. Open Entry is how you reach it, and it joins that file's Editor control from then on, so you can move between the form and the source without losing your place in either. A Markdown entry is written on the canvas, with its fields in the Inspector's Entry tab.

Installed format extensions can add their own file types with their own lists, so this table can grow with your project.

Preview

Preview is a toggle beside the View control, not a third view. It applies to Edit and to Design alike: the base stays selected while you preview, so the bar always says which mode you are previewing and which one switching Preview off returns you to. Turn it on and the canvas shows the page with its real data resolved: dynamic text filled in, repeated lists expanded, exactly what a visitor gets.

What it resolves with comes from the two controls beside it. The Context controls hold what the page renders in : its breakpoint and colour scheme as segments on the bar, and, behind the sliders button, feature queries and a Show layout elements switch for pages that use a layout. The resolving with popover holds what it renders from , one field per line:

• For pages with dynamic addresses (a product page, a blog post), a picker per URL parameter so you choose which real record to preview.

• For components, a field per component option so you can try test values.

Its button says how many you have set, so you can tell at a glance whether the canvas is showing defaults.

Preview does not edit. While it is on, clicking the page selects nothing, no outlines are drawn, the insertion + and the canvas menu give way to your browser's own, nothing can be dropped in, and the keys that change the document do nothing. Anything you had selected is still selected when you switch Preview back off. Save, Undo and Redo keep working throughout.

Preview scrolls like a real page. Instead of the open surface you pan around in Design, Preview puts one page-sized frame in the pane and lets it scroll itself, so sticky headers stick, elements that animate as they come into view actually do, and anything that reacts to scrolling behaves the way it will for a visitor. There is no zoom control in Preview for the same reason: it is showing you the page at its real size.

And at the size you picked. Preview is as wide as the breakpoint chosen in the Context size segments, the same width Edit gives its column and Design gives that artboard, so the same page at md is the same page whichever view the toggle is over. With no breakpoint chosen it fills the pane.

Switch Preview off to go back to editing, in whichever view you were in.

Clicking a link in Preview opens that page in a new browser tab , rather than replacing the canvas. Links within the same page, the ones that jump to a heading, still scroll where you would expect.

Next

• Learn the canvas itself, its panning and zooming and selection and inserting, in The canvas

• See how each tab remembers its editor and view in Documents and panes