[Skip to content](#main-content) [![Jx Suite](/favicon.svg) Suite](/)Search⌘KESC Jump to [Install Jx Studio](/docs/start/install)[Build your first project](/docs/start/first-project)[Document format](/docs/framework/concepts/documents)[Formula catalog](/docs/framework/reference/formulas) ↵ select↑↓ navigateesc close [Studio](/studio)[Framework](/framework)[Templates](/templates)[Compare](/compare)[Docs](/docs/start/first-project)[GitHub](https://github.com/jxsuite/jx)[Download](/download) ✕ [Studio](/studio)[Framework](/framework)[Templates](/templates)[Compare](/compare)[Docs](/docs/start/first-project)[GitHub](https://github.com/jxsuite/jx) Color scheme [Download](/download) ☰ Docs menu Start here[Overview](/docs/start/)Get started[Install Jx Studio](/docs/start/install/)[Your first project](/docs/start/first-project/)[A tour of Jx Studio](/docs/start/studio-tour/)Tutorials[Tutorial: interactive component](/docs/start/first-component/)[Tutorial: blog with collections](/docs/start/first-collection/)[Video tutorials](/docs/start/videos/)Coming from another tool[Coming from WordPress](/docs/start/coming-from-wordpress/)[Coming from Webflow or Framer](/docs/start/coming-from-webflow/)[Coming from Wix or Squarespace](/docs/start/coming-from-wix/)[Coming from Lovable or Builder.io](/docs/start/coming-from-ai-builders/)Studio[Overview](/docs/studio/)[The desktop app](/docs/studio/desktop/)The workspace[Overview](/docs/studio/interface/)[Welcome screen](/docs/studio/interface/welcome-screen/)[Editors and views](/docs/studio/interface/modes/)[The canvas](/docs/studio/interface/canvas/)[Documents and panes](/docs/studio/interface/tabs/)[Quick Access](/docs/studio/interface/quick-access/)[Keyboard shortcuts](/docs/studio/interface/shortcuts/)[Preferences](/docs/studio/interface/preferences/)[Languages](/docs/studio/interface/languages/)[Problems and progress](/docs/studio/interface/problems-and-progress/)[Commands](/docs/studio/interface/commands/)Projects[Overview](/docs/studio/projects/)[Create a project](/docs/studio/projects/create/)[Pages, layouts, components](/docs/studio/projects/pages-layouts-components/)[The Content workspace](/docs/studio/projects/browse/)[Starter templates](/docs/studio/projects/starters/)[Media](/docs/studio/projects/media/)[Content types](/docs/studio/projects/content-types/)[Project settings](/docs/studio/projects/settings/)[Dependencies and imports](/docs/studio/projects/dependencies/)Edit mode[Overview](/docs/studio/editing/)[Writing and formatting](/docs/studio/editing/writing/)[Slash commands](/docs/studio/editing/slash-commands/)[Frontmatter and metadata](/docs/studio/editing/frontmatter/)[Grid mode](/docs/studio/editing/grid/)Design mode[Overview](/docs/studio/design/)[Outline](/docs/studio/design/layers/)[Insert](/docs/studio/design/elements/)[Content tab](/docs/studio/design/properties/)[Style inspector](/docs/studio/design/style-inspector/)[Breakpoints](/docs/studio/design/breakpoints/)[States and selectors](/docs/studio/design/states-and-selectors/)[Design tokens](/docs/studio/design/tokens/)[Project Styles](/docs/studio/design/stylebook/)[Working with components](/docs/studio/design/components/)[Repeaters](/docs/studio/design/repeaters/)Logic[Overview](/docs/studio/logic/)[Formulas and expressions](/docs/studio/logic/formulas/)[Formula workspace](/docs/studio/logic/formula-workspace/)[Statements](/docs/studio/logic/statements/)[Logic tab](/docs/studio/logic/events/)[Data](/docs/studio/logic/data/)[Data sources](/docs/studio/logic/data-sources/)[Code editing](/docs/studio/logic/code/)Databases[Overview](/docs/studio/data/)[Connections](/docs/studio/data/connections/)[Data tables](/docs/studio/data/tables/)[Data grid](/docs/studio/data/grid/)[Auth and secrets](/docs/studio/data/auth-and-secrets/)AI assistant[Overview](/docs/studio/ai/)[The AI assistant](/docs/studio/ai/chat/)[Document assistant](/docs/studio/ai/document-assistant/)Publish[Overview](/docs/studio/publish/)[Source control](/docs/studio/publish/source-control/)[GitHub](/docs/studio/publish/github/)[Cloudflare Pages](/docs/studio/publish/cloudflare/)[Other hosts](/docs/studio/publish/other-hosts/)[Redirects](/docs/studio/publish/redirects/)[Real-time collaboration](/docs/studio/publish/collaboration/)Framework[Overview](/docs/framework/)Concepts[Documents](/docs/framework/concepts/documents/)[Elements](/docs/framework/concepts/elements/)[Components](/docs/framework/concepts/components/)[Props and scope](/docs/framework/concepts/props-and-scope/)[State](/docs/framework/concepts/state/)[Reactivity](/docs/framework/concepts/reactivity/)[References](/docs/framework/concepts/references/)[Expressions](/docs/framework/concepts/expressions/)[Statements](/docs/framework/concepts/statements/)[Functions and sidecars](/docs/framework/concepts/functions/)[Styling](/docs/framework/concepts/styling/)[Color schemes](/docs/framework/concepts/color-schemes/)[Popovers and overlays](/docs/framework/concepts/overlays/)[Accessibility](/docs/framework/concepts/accessibility/)[Lists and iteration](/docs/framework/concepts/lists/)[Data prototypes](/docs/framework/concepts/data-prototypes/)[Timing](/docs/framework/concepts/timing/)[Dynamic switching](/docs/framework/concepts/switching/)[Security](/docs/framework/concepts/security/)Site architecture[Overview](/docs/framework/site/)[project.json](/docs/framework/site/project-json/)[Routing](/docs/framework/site/routing/)[Layouts](/docs/framework/site/layouts/)[Content collections](/docs/framework/site/content-collections/)[Jx Markdown](/docs/framework/site/jx-markdown/)[Obsidian vault as content](/docs/framework/site/obsidian-vault/)[Relationships](/docs/framework/site/relationships/)[SEO and metadata](/docs/framework/site/seo/)[Locales and languages](/docs/framework/site/i18n/)[Images](/docs/framework/site/images/)[Redirects](/docs/framework/site/redirects/)[Feeds](/docs/framework/site/feeds/)[Site search](/docs/framework/site/search/)[Build output and adapters](/docs/framework/site/deployment/)How compilation works[Overview](/docs/framework/build/)[The dev server](/docs/framework/build/dev-server/)[CLI commands](/docs/framework/build/cli/)Working with agents[Overview](/docs/framework/agents/)[Authoring rules for agents](/docs/framework/agents/authoring-rules/)[Machine-readable docs](/docs/framework/agents/machine-readable/)Reference[Overview](/docs/framework/reference/)[Formula catalog](/docs/framework/reference/formulas/)[Operator reference](/docs/framework/reference/operators/)Extending[Overview](/docs/extending/)Extensions[Extension anatomy](/docs/extending/extensions/anatomy/)[Schema composition](/docs/extending/extensions/schema-composition/)[Custom classes](/docs/extending/extensions/classes/)[Custom formats](/docs/extending/extensions/formats/)[Capability methods](/docs/extending/extensions/capabilities/)[Project sections](/docs/extending/extensions/project-sections/)[Server mounts](/docs/extending/extensions/server/)[Connectors](/docs/extending/extensions/connectors/)[Search indexes](/docs/extending/extensions/search/)[Security and secrets](/docs/extending/extensions/security/)[Tutorial: a TOML format](/docs/extending/extensions/tutorial-toml-format/)[Tutorial: a guestbook](/docs/extending/extensions/tutorial-guestbook/)[First-party extensions](/docs/extending/extensions/first-party/)Embedding[Overview](/docs/extending/embedding/)[Hosting the Studio assets](/docs/extending/embedding/hosting/)[Writing a platform adapter](/docs/extending/embedding/platform-adapter/)[The backend protocol](/docs/extending/embedding/backend-protocol/)[Dev server internals](/docs/extending/embedding/dev-server/)[Embedding the runtime in your app](/docs/extending/embedding/runtime-host/)[Writing assistant tools](/docs/extending/embedding/assistant-harness/)UI kit[The Jx UI kit](/docs/extending/ui-kit/)Reference[Protocol routes](/docs/extending/reference/studio-routes/)[Implementation status](/docs/extending/reference/implementation-status/)[Spec changelog](/docs/extending/reference/spec-changelog/)[Standards alignment](/docs/extending/reference/standards/)Contributing[Working in the monorepo](/docs/extending/contributing/monorepo/)[Contributing to these docs](/docs/extending/contributing/docs/)[AI assistant evals](/docs/extending/contributing/ai-evals/) # Documents and panes Every document you open in Jx Studio belongs to a **pane**. A pane is one editor over one document: the strip of open documents along the top and the context bar saying which editor and view you're in describe the pane you're working in, and the document itself fills the rest. The [jump bar](/docs/studio/interface#the-jump-bar) at the foot of the window names where you are in the pane you're focused on. You can have one pane or two. ![A pane's strip of open documents, one of them showing the unsaved-changes dot](/content/docs/images/tab-strip.png) ## Opening and switching Open documents from the **Site** panel, the **[Content workspace](/docs/studio/projects/browse)**, or the Command Center (⌘K, or ⌘P straight into file search). Click a document in the strip to switch to it; the Files tree follows along, so the strip and the tree never disagree about where you are. **The strip shows the workspace you are in.** Every document belongs to one of the five [workspaces](/docs/studio/interface#workspaces): a page to Design, an entry to Content, an image to Media, Project Styles to Styles, a comparison to Publish. Each pane's strip shows only the current workspace's documents, and ⌃Tab moves only between them. The others stay open in their places and come back when you switch back. Opening a document from another workspace switches to it, and closing a workspace's last document leaves the pane empty rather than switching you somewhere else. **Only Design and Content show a strip.** They are where you keep several documents open and move between them. Media, Styles and Publish each show their own home (the media library, your project's styles, Review changes) without one. When something opens beside that home, such as a picture in the media viewer, a before-and-after comparison, or your project file as **Code**, the pane's context bar starts with a **Back** button that names where it leads: **Back to Media**, **Back to Publish**, **Back to Variables**. Press it to return to the home; a viewer or a comparison closes on the way, and the keyboard lands back on the picture or the change you opened. Esc does the same from a viewer or a comparison. In the **Code** view Esc belongs to the code editor, so leave Code with the Back button. Closing a viewer or a comparison with ⌘W lands on the home too. These workspaces keep one view beside the home: opening another picture replaces the viewer you had open, unless you pinned it or it holds unsaved changes, and ⌃Tab moves between the home and that view. These workspaces never leave you on an empty pane: closing the home itself shows it again. A side pane you opened in Design (a lens such as **Layout**, say) keeps its own row in every workspace, naming what it shows, with the ✕ that closes it. Media files open too. An image, a video, a font or a PDF gets a document of its own, in the Media workspace, with the same ⌘W, showing the file in the [Media viewer](/docs/studio/projects/media#open-a-media-file) rather than an editor. **Back to Media** returns you to the library. - Switch back and forth with ⌃Tab / ⌃⇧Tab, which walk your documents in most-recently-used order. - Close one with its **×**, by middle-clicking it, or with ⌘W. - Reopen the last one you closed with ⌘⇧T. - Drag along the strip to reorder, or onto the other pane's strip to move a document there. When more are open than fit, scroll the mouse wheel over the strip, or use the **⌄** button at its right edge to pick from the ones currently out of view. - Reach the strip from the keyboard with Tab. The whole strip is one stop, so the arrow keys then walk along it and switch as they land, Home and End jump to its ends, and Delete closes the document you are on, asking about unsaved changes exactly as the **×** does. ## Labels A document is named by the shortest part of its path that tells it apart from the others, so a project full of files called `index.md` still gives you four distinguishable names, and only the ones that actually collide grow a folder in front of them. Pages are labelled by their **route** instead (`/`, `/blog`, `/blog/[slug]`), because that is the address the page is published at, and it is what you were thinking of when you opened it. ## Preview and pinned documents A single click from the file tree or the palette opens a document in **preview**: it shows in *italics* and the next single click replaces it, so browsing around never leaves you with twenty things open. Anything that commits to it makes it permanent: editing it, double-clicking it, pinning it, or running **Keep Document Open**. **Pin** a document with the ◎ button on it (◉ once pinned) to hold it at the head of the strip, where no preview open can take its slot. Dragging can never interleave pinned documents with unpinned ones. ## Studio saves only when you do Jx Studio does **not** auto-save. Edits live in the open document until you save: - A **●** marks unsaved changes, and the **Save** button in the Command Bar lights up. With nothing to save it stays greyed out, and it lights up with your first keystroke, including typing in the Code view that has not reached the document yet. - Save with ⌘S or the **Save** button, and the **●** clears. Closing a document with unsaved changes asks first, and the question has three answers: **Save** writes the file and then closes, **Close Without Saving** throws the edits away, and **Cancel** leaves the tab where it was. A save that fails leaves the tab open and still unsaved, with the reason in [Problems](/docs/studio/interface/problems-and-progress). The close never outruns the write. ⌘W and the tab's **×** ask the same question. Studio skips it only when a collaborator is still in the document, because the shared session keeps the edits. **Text still in a code editor counts.** Closing settles whatever you have typed in a [Code view or a function body](/docs/studio/logic/code) before it decides whether to ask, so a document whose only unsaved change is the word you were halfway through still gets the question. Undo and redo are per document as well: each keeps its own history, so ⌘Z in one never unwinds work in another. Note Saving writes the file in place, in your project folder, as plain Markdown, JSON, or CSV. Nothing is held in a database; what you save is what git sees. See [Publish](/docs/studio/publish) . **A save keeps the file's layout.** A JSON document goes back to disk the way it was written: an object you kept on one line stays on one line while it fits, a blank line you left between two keys stays, and a character you spelt as an escape stays an escape. Studio reads those facts when it opens the file and honours them when it writes, so changing one value changes one line of the file, and a project kept in Prettier's or oxfmt's layout is still in it after a save. Something the edit created, a new element or a new object, is laid out the way the formatter would lay it out: a short array on one line, a new object opened up. A repeater written as an element's whole `children` is saved that way too, even though Studio edits it as the one member of a list, so a save never rewrites a list you did not touch. The Code view shows exactly the bytes a save writes, and a change you make there is saved in the layout you typed. ## Each document remembers its view A document keeps its own view state while it's open. Switch from a Markdown page in **Edit** to a component in **Design** and back, and each returns exactly as you left it: - its [editor and view](/docs/studio/interface/modes), - its canvas position, and the zoom, but only once you have set one yourself; until then Design keeps fitting the canvas to the pane, - its selected element and active Inspector tab. New documents open in their natural editor: Markdown in **Edit**, spreadsheets in **Grid**, the project file in **Variables** the first time, and after that in whichever of **Variables** and **Elements** you were last in. Note **Your project's configuration is one of these documents.**`project.json` opens like any file, in the Styles workspace, with **Elements** , **Variables** and **Code** as its editors: an unsaved dot, ⌘Z to take a change back, ⌘S to write it. **Open Project Settings** is a dialog that writes the same file as you change it, through the same document, so while the tab is open a settings change is a step in its history too. ## Reopening a project **A project comes back the way you left it.** Reopen one and the documents you had open reopen with it: in strip order, in both panes if you were split, with the one you were working on active and the keyboard where you left it. Each document returns in its own editor and view, at the zoom, breakpoint and color scheme you had chosen for it. If a file was renamed, moved or deleted while you were away, that one is skipped and the rest still open. If none of them survive, the project opens on its home page as it always did. Naming a document in the URL still wins: `?file=` opens that file, and Studio leaves the session alone. ## Drilling into a component Opening a component from the canvas, the Outline tree or the Inspector's **Edit component** action opens it **beside the page, in a second pane**, and puts you in it. The page you came from stays open in the first pane, still on the element you had selected, so you can flip between the two with a click or ⌃Tab. The new one carries a small **↳** marker, and hovering it names the document you drilled in from. ## Two panes \[⌘] puts the open document in a **second pane** beside the first. Both are real: each has its own strip of documents, its own context bar and its own editing surface, and either can be a live canvas. Watch the JSON while you edit visually, keep a layout on screen while you edit the page it wraps, or put the same page at two breakpoints side by side. **Any document can be split.** The tab moves across as it is, so a page you were designing arrives still in Design rather than reopening as Code, and the side pane offers every editor and every view the document supports. - **Drag the divider** to change the split. Double-click it to go back to even; the ratio is remembered with the rest of your layout. - **Click into a pane to work in it.** The Inspector, the Outline, the block action bar and every keyboard shortcut follow the pane you last clicked in: its canvas, its bars, its editor, anywhere. ⌘⌥0 focuses the side pane without the mouse, and **Focus Primary Pane** in the palette goes back. - **Drag a document across**, onto the other pane's strip, or onto the right edge of the canvas to create the second pane. \[⌘] is the keyboard form of the same move. - **Open to the Side**, from a file's right-click menu, is the Files tree's own route to a second pane: it opens the file beside whatever you are already looking at, and puts you in it. - **Unsplit** collapses the split. Closing a pane never closes documents. They move back into the pane that remains, and a pane you empty collapses on its own instead of standing there empty. The two panes are independent in everything a document owns: each keeps its own view, breakpoint, colour scheme, zoom and selection, and editing in one leaves the other exactly as it was. ## A pane that follows the other one A second pane does not have to hold a document you picked. The **⟲** button on its context bar offers a short list of things it can be *about* the other pane instead: - **Code of this document**: the JSON or Markdown, live, while you edit visually. - **Diff vs HEAD**: what you have changed, beside the page you changed it in, with its own change stepper and its own choice of Visual or Code. - **Layout of this page**: the layout file the page uses, opened at the element you clicked if you came from **Open Layout →**. - **Component definition of the selection**: the source of whatever component you select, following you as you select others. - **Same page at ⟨breakpoint⟩**: one more size of the page you are already looking at. - **Same page in ⟨language⟩**: the same page's file in another language, on a [multilingual project](/docs/studio/interface/languages). A translation is a different file, so this one *opens* that file rather than redrawing this one; if it doesn't exist yet the pane says so and names the fix. The pane then **follows**: switch documents in the first pane and the Code, the diff and the layout follow along; select a different component and the definition changes with it. Its strip shows what it is about (`Code · /blog`) in place of a filename, with a **✕** that ends the following. **Pin** it (in the ⟲ menu) to stop following and keep what is on screen as an ordinary document, in an ordinary tab, with the strip and history that come with one. A preset that this document cannot supply is not offered, and it says why: **Layout** on a page that declares none, **Diff** on a file with no changes. If a rule stops resolving while you work (you remove the page's layout, or deselect the component), the pane says so and offers to keep what it has. It does not go blank. ## The jump bar In the middle of the status bar, along the foot of the window, a breadcrumb trail names where you are in the focused pane (`file › the elements above your selection › the element you have selected`), and every crumb is a button that selects that step. A crumb whose parent has other children carries a **⌃** listing them, so you can move to a sibling element with a click, without hunting through the Outline. The full behaviour is in **[The workspace](/docs/studio/interface#the-jump-bar)**. ## The pane context bar Under the strip (at the top of the pane, in a workspace without one), a labelled row states three things about the document in that pane, and only those three: - **Editor**, at the left end of the bar, is which editor is open on it: **Canvas**, **Code**, **Grid**, **Entry**, **Home**, **Elements** or **Variables**. It is a row of segments, one per editor this file actually supports, so every choice is on screen and none of them is one that cannot be picked; a document with one editor prints its name as text instead. **Diff** is never offered here. A comparison is opened from [Source control](/docs/studio/publish/source-control), and while you are in one the bar prints **Diff** as text, with **Back to Publish** as the way out. Those are the same names the [status bar](/docs/studio/interface#status-bar) prints, read from one list. - **View**, for the Canvas editor, offers **Edit │ Design** with a **Preview** toggle beside them. See [Modes and views](/docs/studio/interface/modes). - **Context** is what the page is being rendered *with*. The size (**Base** and each breakpoint) and, once the project declares a color scheme, **Auto │ Light │ Dark** are segment groups right on the bar, one click each. The rarer choices sit behind the sliders button at the end: the rendering [language](/docs/studio/interface/languages) on a multilingual project, any feature queries, whether the layout's own elements are shown, and **Manage contexts…**, which takes you to where breakpoints and schemes are defined. The button stays a bare icon until one of those is set away from its default, and then it names it (`français`, `No layout`). Before it, a second popover headed **resolving with** carries the document's own data, stacked one per line: a picker per URL parameter on a dynamic page, a small field per option on a component. Its summary counts the values you have set (`2 set`, or `Defaults` when you have set none). A workspace's home tab (the Content, Media or Publish home) shows only **Editor: Home**. It draws its workspace's own page rather than a document at a breakpoint, so there is no **Context** to choose and no **⟲** menu. Opening a formula or a function body in the Bottom dock's **[Logic](/docs/studio/logic/formula-workspace)** tab changes nothing here. The bar keeps its three controls and the zoom pod, because the document they describe is still on the stage above the dock. The only way out of the editor is the **Close** in its own header. There is one exit and one address. **Zoom floats over the canvas**, bottom-right, rather than sitting in the bar: the zoom buttons, the percentage (click it for 100%), and a **fit** picker (**Fit page**, **Fit width**, **Actual size**, **No fit**), remembered per document, so coming back to a file frames it the way you left it. There is no zoom in **Preview**, which shows the page at its real size in a frame that scrolls itself, or on the **Code** half of a **Diff** editor, which is a code editor with nothing on it to zoom. Editor-specific actions sit at the right of the bar: **Export**, in the **Code** editor. ## Next - Find any file fast with **[Quick Access](/docs/studio/interface/quick-access)** - Browse pages and entries visually in **[the Content workspace](/docs/studio/projects/browse)** ✕ Start here[Overview](/docs/start/)Get started[Install Jx Studio](/docs/start/install/)[Your first project](/docs/start/first-project/)[A tour of Jx Studio](/docs/start/studio-tour/)Tutorials[Tutorial: interactive component](/docs/start/first-component/)[Tutorial: blog with collections](/docs/start/first-collection/)[Video tutorials](/docs/start/videos/)Coming from another tool[Coming from WordPress](/docs/start/coming-from-wordpress/)[Coming from Webflow or Framer](/docs/start/coming-from-webflow/)[Coming from Wix or Squarespace](/docs/start/coming-from-wix/)[Coming from Lovable or Builder.io](/docs/start/coming-from-ai-builders/)Studio[Overview](/docs/studio/)[The desktop app](/docs/studio/desktop/)The workspace[Overview](/docs/studio/interface/)[Welcome screen](/docs/studio/interface/welcome-screen/)[Editors and views](/docs/studio/interface/modes/)[The canvas](/docs/studio/interface/canvas/)[Documents and panes](/docs/studio/interface/tabs/)[Quick Access](/docs/studio/interface/quick-access/)[Keyboard shortcuts](/docs/studio/interface/shortcuts/)[Preferences](/docs/studio/interface/preferences/)[Languages](/docs/studio/interface/languages/)[Problems and progress](/docs/studio/interface/problems-and-progress/)[Commands](/docs/studio/interface/commands/)Projects[Overview](/docs/studio/projects/)[Create a project](/docs/studio/projects/create/)[Pages, layouts, components](/docs/studio/projects/pages-layouts-components/)[The Content workspace](/docs/studio/projects/browse/)[Starter templates](/docs/studio/projects/starters/)[Media](/docs/studio/projects/media/)[Content types](/docs/studio/projects/content-types/)[Project settings](/docs/studio/projects/settings/)[Dependencies and imports](/docs/studio/projects/dependencies/)Edit mode[Overview](/docs/studio/editing/)[Writing and formatting](/docs/studio/editing/writing/)[Slash commands](/docs/studio/editing/slash-commands/)[Frontmatter and metadata](/docs/studio/editing/frontmatter/)[Grid mode](/docs/studio/editing/grid/)Design mode[Overview](/docs/studio/design/)[Outline](/docs/studio/design/layers/)[Insert](/docs/studio/design/elements/)[Content tab](/docs/studio/design/properties/)[Style inspector](/docs/studio/design/style-inspector/)[Breakpoints](/docs/studio/design/breakpoints/)[States and selectors](/docs/studio/design/states-and-selectors/)[Design tokens](/docs/studio/design/tokens/)[Project Styles](/docs/studio/design/stylebook/)[Working with components](/docs/studio/design/components/)[Repeaters](/docs/studio/design/repeaters/)Logic[Overview](/docs/studio/logic/)[Formulas and expressions](/docs/studio/logic/formulas/)[Formula workspace](/docs/studio/logic/formula-workspace/)[Statements](/docs/studio/logic/statements/)[Logic tab](/docs/studio/logic/events/)[Data](/docs/studio/logic/data/)[Data sources](/docs/studio/logic/data-sources/)[Code editing](/docs/studio/logic/code/)Databases[Overview](/docs/studio/data/)[Connections](/docs/studio/data/connections/)[Data tables](/docs/studio/data/tables/)[Data grid](/docs/studio/data/grid/)[Auth and secrets](/docs/studio/data/auth-and-secrets/)AI assistant[Overview](/docs/studio/ai/)[The AI assistant](/docs/studio/ai/chat/)[Document assistant](/docs/studio/ai/document-assistant/)Publish[Overview](/docs/studio/publish/)[Source control](/docs/studio/publish/source-control/)[GitHub](/docs/studio/publish/github/)[Cloudflare Pages](/docs/studio/publish/cloudflare/)[Other hosts](/docs/studio/publish/other-hosts/)[Redirects](/docs/studio/publish/redirects/)[Real-time collaboration](/docs/studio/publish/collaboration/)Framework[Overview](/docs/framework/)Concepts[Documents](/docs/framework/concepts/documents/)[Elements](/docs/framework/concepts/elements/)[Components](/docs/framework/concepts/components/)[Props and scope](/docs/framework/concepts/props-and-scope/)[State](/docs/framework/concepts/state/)[Reactivity](/docs/framework/concepts/reactivity/)[References](/docs/framework/concepts/references/)[Expressions](/docs/framework/concepts/expressions/)[Statements](/docs/framework/concepts/statements/)[Functions and sidecars](/docs/framework/concepts/functions/)[Styling](/docs/framework/concepts/styling/)[Color schemes](/docs/framework/concepts/color-schemes/)[Popovers and overlays](/docs/framework/concepts/overlays/)[Accessibility](/docs/framework/concepts/accessibility/)[Lists and iteration](/docs/framework/concepts/lists/)[Data prototypes](/docs/framework/concepts/data-prototypes/)[Timing](/docs/framework/concepts/timing/)[Dynamic switching](/docs/framework/concepts/switching/)[Security](/docs/framework/concepts/security/)Site architecture[Overview](/docs/framework/site/)[project.json](/docs/framework/site/project-json/)[Routing](/docs/framework/site/routing/)[Layouts](/docs/framework/site/layouts/)[Content collections](/docs/framework/site/content-collections/)[Jx Markdown](/docs/framework/site/jx-markdown/)[Obsidian vault as content](/docs/framework/site/obsidian-vault/)[Relationships](/docs/framework/site/relationships/)[SEO and metadata](/docs/framework/site/seo/)[Locales and languages](/docs/framework/site/i18n/)[Images](/docs/framework/site/images/)[Redirects](/docs/framework/site/redirects/)[Feeds](/docs/framework/site/feeds/)[Site search](/docs/framework/site/search/)[Build output and adapters](/docs/framework/site/deployment/)How compilation works[Overview](/docs/framework/build/)[The dev server](/docs/framework/build/dev-server/)[CLI commands](/docs/framework/build/cli/)Working with agents[Overview](/docs/framework/agents/)[Authoring rules for agents](/docs/framework/agents/authoring-rules/)[Machine-readable docs](/docs/framework/agents/machine-readable/)Reference[Overview](/docs/framework/reference/)[Formula catalog](/docs/framework/reference/formulas/)[Operator reference](/docs/framework/reference/operators/)Extending[Overview](/docs/extending/)Extensions[Extension anatomy](/docs/extending/extensions/anatomy/)[Schema composition](/docs/extending/extensions/schema-composition/)[Custom classes](/docs/extending/extensions/classes/)[Custom formats](/docs/extending/extensions/formats/)[Capability methods](/docs/extending/extensions/capabilities/)[Project sections](/docs/extending/extensions/project-sections/)[Server mounts](/docs/extending/extensions/server/)[Connectors](/docs/extending/extensions/connectors/)[Search indexes](/docs/extending/extensions/search/)[Security and secrets](/docs/extending/extensions/security/)[Tutorial: a TOML format](/docs/extending/extensions/tutorial-toml-format/)[Tutorial: a guestbook](/docs/extending/extensions/tutorial-guestbook/)[First-party extensions](/docs/extending/extensions/first-party/)Embedding[Overview](/docs/extending/embedding/)[Hosting the Studio assets](/docs/extending/embedding/hosting/)[Writing a platform adapter](/docs/extending/embedding/platform-adapter/)[The backend protocol](/docs/extending/embedding/backend-protocol/)[Dev server internals](/docs/extending/embedding/dev-server/)[Embedding the runtime in your app](/docs/extending/embedding/runtime-host/)[Writing assistant tools](/docs/extending/embedding/assistant-harness/)UI kit[The Jx UI kit](/docs/extending/ui-kit/)Reference[Protocol routes](/docs/extending/reference/studio-routes/)[Implementation status](/docs/extending/reference/implementation-status/)[Spec changelog](/docs/extending/reference/spec-changelog/)[Standards alignment](/docs/extending/reference/standards/)Contributing[Working in the monorepo](/docs/extending/contributing/monorepo/)[Contributing to these docs](/docs/extending/contributing/docs/)[AI assistant evals](/docs/extending/contributing/ai-evals/) [![Jx Suite](/favicon.svg) Suite](/)The visual IDE for the web. Build any website, save it as plain files, own it forever. MIT licensed. Product [Studio](/studio)[Download](/download)[Templates](/templates)[Features](/features)[Compare](/compare)[Jx Cloud (soon)](/cloud) Developers [Docs](/docs/start/first-project)[Framework](/framework)[Get Studio](/docs/start/install)[Spec](/docs/framework)[GitHub](https://github.com/jxsuite/jx) Project [MIT License](https://github.com/jxsuite/jx/blob/main/LICENSE)[Releases](https://github.com/jxsuite/jx/releases/latest)[Privacy](/privacy)[Terms](/terms)[Support](/support) Built with Jx Suite. © 2026 Avunu LLC. Open source under the MIT License.