A tour of Jx Studio

Everything in Jx Studio happens in one window. This page is your map: what each region is called, what it does, and where to read more. If you've used another visual builder the shape will feel familiar: a live canvas in the middle, docks on either side, a bar across the top. The names below are the ones the app itself uses.

The Command Bar

The top row. It holds the Studio menu (the ≡ button: opening and creating projects, Preferences, and everything else without a permanent button), the workspace tabs ( Design · Content · Media · Styles · Publish ), the Command Center pill , the four buttons worth keeping in reach ( Save , Open in Browser , Undo , Redo ), the Settings gear, and a toggle for each of the three docks. Open in Browser shows the page you're editing in your own browser, at the address it will really have, updating as you type. Each workspace tab sets the window up for one job: Styles , for example, is where your site's CSS variables and the default look of every element live, in its Variables and Elements views, with the Styles panel listing both (see Project Styles ). Read more in The workspace .

The Command Center

The pill in the middle of the Command Bar reads ◈ project › document › selection , and it is the fastest way to get anywhere. Press ⌘K to open it, or click a segment to open it already scoped: the project segment lists your projects, the document segment finds a file, the selection segment finds an element in the open document. See Quick Access .

The Navigator

The labelled rail on the far left, and the panel it opens beside it. The rail belongs to the Design workspace and is in two groups. Project : Site , your pages by address with the templates, components and media they are made of; it is where the Navigator opens. Document : Outline and Data . Files and Packages join them when you turn on Show developer panels in Preferences. One panel shows at a time, under a header naming it and the level it works at, so you always know what you're looking at. The Settings gear in the Command Bar opens a menu holding two entries, each with a submenu that jumps straight to a section: Preferences… for the app and Open Project Settings for this project. Both open as dialogs over whatever you are doing. Each panel is described in The workspace .

The panes and the canvas

The center of the window holds one editor pane, or two side by side when [⌘] gives the open document a pane of its own, so you can keep a page on screen while you work on its source, its layout or the same page at another size. A pane renders your page or component live, exactly as it will look in production, and you select, edit and rearrange elements directly on it. See The canvas , Edit mode and Design mode .

In Design and Content, the pane has a strip of open documents along its top; Media, Styles and Publish show their own page without one, and a Back button on the context bar returns you to it from anything opened beside it. Under the strip, a context bar states which Editor is open on the file, which View of the canvas is showing ( Edit , Design or Preview ), and the Context it's being rendered in. Details in Documents and panes and Editors and views .

The Inspector

The dock on the right, in three tabs. Page is the open document's own settings: title, address, template, and search and sharing. Element is the selected element, in three views: Content (its settings), Style (the visual inspector) and Logic (what happens on click, input and so on). Assistant is the AI chat. Select an element and the Inspector switches to Element; select nothing and it goes back to Page. Design mode covers Style, and Logic covers Logic.

The Bottom dock

⌘J opens a dock under the panes with two tabs. Problems is everything waiting to be fixed, each row carrying the file it happened in and the button that fixes it. Activity is one entry per long operation, with its steps, its log and a Cancel. A third tab, Logic , appears while you have a formula or a function open, so the page you're computing values for stays on screen beside the editor. The dock starts closed and only takes space from the canvas, never from the docks on either side.

The status bar

The thin strip along the bottom says what is true right now and nothing else: the project (name, branch, problem count), then the jump bar , a breadcrumb trail reading file › parent › element for whatever you have selected, and a selection count when you have more than one element picked. Every crumb is a button, so you always know where you are and can select any element above it with one click. Almost every other item is a button too.

Next

• Learn each region in depth in The workspace

• Start writing in Edit mode or styling in Design mode

• Keep your hands on the keyboard with the shortcut reference