# Jx Suite > Jx Suite is a visual site builder (Jx Studio), a JSON-native component format, and a compiler that prerenders every page — working on plain files you own and publish with git. Projects that need more than pages get a server tier as well: databases, signed-in users, and server functions compile into a small worker alongside the prebuilt output. These docs cover using Studio, the Jx framework format, and extending Jx. ## Start here - [Start here](https://jxsuite.com/docs/start/): What Jx Suite is, how to install Jx Studio, and where to go first — whether you build visually or want the format underneath. - [Install Jx Studio](https://jxsuite.com/docs/start/install/): Download the Jx Studio desktop app for macOS, Windows, or Linux — the only way to run the visual editor. - [Your first project](https://jxsuite.com/docs/start/first-project/): Build and publish a website with Jx Studio — design visually, wire up interactivity, and commit to git, without hand-writing JSON. - [A tour of Jx Studio](https://jxsuite.com/docs/start/studio-tour/): A guided map of the Jx Studio workspace — toolbar, activity bar, panels, canvas, tabs, and status bar, with links to each surface's guide. - [Tutorial: your first interactive component](https://jxsuite.com/docs/start/first-component/): Build a live counter card in Jx Studio, click by click — declare state, bind text to it, wire up a button's click event, and watch the value update. - [Tutorial: a blog with content collections](https://jxsuite.com/docs/start/first-collection/): Give a Jx site a blog in Studio: define a posts content type, create entries, bulk-edit them in Grid mode, and list them on a page with a repeater. - [Coming from WordPress](https://jxsuite.com/docs/start/coming-from-wordpress/): How WordPress concepts map to Jx — themes, blocks, custom post types, media, plugins, publishing — and what's honestly different when content is files. - [Coming from Webflow or Framer](https://jxsuite.com/docs/start/coming-from-webflow/): A translation guide from Webflow or Framer to Jx — classes, symbols, CMS collections, interactions — for a project that's plain files, not a subscription. - [Coming from Wix or Squarespace](https://jxsuite.com/docs/start/coming-from-wix/): Switching from Wix or Squarespace to Jx in practice — the same visual editing, with local files, git, and a host you choose instead of a lock-in. - [Coming from Lovable or Builder.io](https://jxsuite.com/docs/start/coming-from-ai-builders/): How Jx compares to AI site builders — the assistant edits inspectable documents you can see in Layers and State, review in git, and edit by hand. - [Video tutorials](https://jxsuite.com/docs/start/videos/): Video walkthroughs of Jx Studio are planned. Until they arrive, every topic — first project, design, collections, publishing — has a written tutorial. ## Studio - [Studio](https://jxsuite.com/docs/studio/): Jx Studio is the visual builder for Jx projects — edit content inline, design on a live canvas, wire logic, and publish with git. - [The workspace](https://jxsuite.com/docs/studio/interface/): Every region of the Jx Studio window in detail — toolbar, activity bar, left and right panels, canvas, tab strip, and status bar. - [Welcome screen](https://jxsuite.com/docs/studio/interface/welcome-screen/): What Jx Studio shows before a project is open, and every way to start: new project, open, clone, add a repository, and recent projects. - [Modes and the preview toggle](https://jxsuite.com/docs/studio/interface/modes/): Edit, Design, Grid, Code, and Stylebook — what each canvas mode is for, which files offer which modes, and how the Preview toggle fits in. - [The canvas](https://jxsuite.com/docs/studio/interface/canvas/): Working on the Jx Studio canvas — pan, zoom, selection, the block action bar, inserting elements, drag and drop, and the context menu. - [Tabs and files](https://jxsuite.com/docs/studio/interface/tabs/): How tabs work in Jx Studio — opening and switching files, dirty markers, explicit saving, and the per-tab view memory. - [Quick Access](https://jxsuite.com/docs/studio/interface/quick-access/): Open any file in your project by name with the Quick Access palette — how to open it, what it searches, and its keyboard controls. - [Keyboard shortcuts](https://jxsuite.com/docs/studio/interface/shortcuts/): Every keyboard shortcut in Jx Studio, grouped by context, with macOS and Windows/Linux keys. - [Projects](https://jxsuite.com/docs/studio/projects/): What a Jx project is on disk — a folder of plain files — and the three ways to get one in Studio: create new, open a folder, or clone a repository. - [Create a project](https://jxsuite.com/docs/studio/projects/create/): Every field of the New Project modal in Jx Studio — templates, starter sites, import and agent sources, project details, and the design quickstart. - [Pages, layouts, and components](https://jxsuite.com/docs/studio/projects/pages-layouts-components/): When to use a page, a layout, or a component in Jx Studio, how to create each one from Manage, and where each lives in your project folder. - [Browse your project](https://jxsuite.com/docs/studio/projects/browse/): The Manage surface in Jx Studio: browse your project, create pages and content, upload media, and define content models. - [Starter templates](https://jxsuite.com/docs/studio/projects/starters/): The starter templates that ship with Jx Studio — what each includes and who it's for. - [Media](https://jxsuite.com/docs/studio/projects/media/): Upload images, video, audio, and fonts in Jx Studio's Manage view, pick them with the media picker, and let the build optimize every image. - [Content types](https://jxsuite.com/docs/studio/projects/content-types/): Define content types in Jx Studio — a source folder, a format, and a field schema — and create schema-backed entries from the Manage view. - [Project settings](https://jxsuite.com/docs/studio/projects/settings/): A tour of the Settings modal in Jx Studio: general options, head tags, CSS variables, definitions, dependencies, and extension-added sections. - [Dependencies and imports](https://jxsuite.com/docs/studio/projects/dependencies/): The Imports activity in Jx Studio: add npm packages, cherry-pick their components for the site or one document, and keep everything up to date. - [Edit mode](https://jxsuite.com/docs/studio/editing/): Edit mode in Jx Studio: write on the real page with inline formatting, slash commands, and metadata forms — saved as clean Markdown. - [Writing and formatting](https://jxsuite.com/docs/studio/editing/writing/): Write directly on the page in Jx Studio's Edit mode: paragraphs, the inline formatting toolbar, links, clean pasting, and text inside components. - [Slash commands](https://jxsuite.com/docs/studio/editing/slash-commands/): Insert headings, lists, images, tables, and more from the keyboard with Jx Studio's slash menu — the full block list and how inserting works. - [Frontmatter and page metadata](https://jxsuite.com/docs/studio/editing/frontmatter/): Fill in page titles, descriptions, social cards, and content-type fields with Jx Studio's Document panel and Properties bar — no YAML required. - [Grid mode](https://jxsuite.com/docs/studio/editing/grid/): Edit collections, CSV files, and page metadata as a spreadsheet in Jx Studio: typed cells, fill down, find & replace, and one batched Save. - [Design mode](https://jxsuite.com/docs/studio/design/): Design mode in Jx Studio: a live canvas for every breakpoint plus panels for structure, style, tokens, components, and repeaters. - [Layers panel](https://jxsuite.com/docs/studio/design/layers/): The Layers panel in Jx Studio: read your page's structure as a tree, select, rename, reorder by drag and drop, and act on any element. - [Elements panel](https://jxsuite.com/docs/studio/design/elements/): The Elements panel in Jx Studio: insert HTML elements and your project's components by clicking a card or dragging one onto the canvas. - [Properties panel](https://jxsuite.com/docs/studio/design/properties/): The Properties panel in Jx Studio: edit element attributes, link targets, component props, and page settings for the selected element. - [Style inspector](https://jxsuite.com/docs/studio/design/style-inspector/): The Style inspector in Jx Studio: visual CSS controls grouped by section, with set-indicator dots, a property filter, and inherited placeholders. - [Breakpoints](https://jxsuite.com/docs/studio/design/breakpoints/): Breakpoints in Jx Studio: one live canvas per screen size, defining breakpoints in Settings, and how base styles cascade into overrides. - [Hover states and selectors](https://jxsuite.com/docs/studio/design/states-and-selectors/): Style hover, focus, and other states in Jx Studio with the selector menu in the Style inspector — plus custom selectors of your own. - [Design tokens](https://jxsuite.com/docs/studio/design/tokens/): Design tokens in Jx Studio: define colors, fonts, and sizes once under Settings > CSS Variables and reuse them from every picker. - [Stylebook](https://jxsuite.com/docs/studio/design/stylebook/): Stylebook mode in Jx Studio: set the default look of every heading, button, and link in one catalog, live at every breakpoint. - [Working with components](https://jxsuite.com/docs/studio/design/components/): Turn any selection into a reusable component in Jx Studio, wire its props in the Properties panel, add slots, and preview it with test values. - [Repeaters](https://jxsuite.com/docs/studio/design/repeaters/): Repeaters in Jx Studio: turn one element into a repeating list, bind it to your data, and use each item's fields inside the template. - [Logic](https://jxsuite.com/docs/studio/logic/): Make pages interactive in Jx Studio — where the State, Data, Events, and Code surfaces fit together, with a 60-second counter to see it working. - [State panel](https://jxsuite.com/docs/studio/logic/state/): Declare what a page or component knows in the State panel — values, computed entries, data sources, and functions, plus rename, delete, and privacy. - [Formulas and expressions](https://jxsuite.com/docs/studio/logic/formulas/): Build dynamic values without code: the field-mode button on bindable fields, the formula editor, chip pipeline, live value badges, and the formula palette. - [Formula workspace](https://jxsuite.com/docs/studio/logic/formula-workspace/): Edit a formula full-screen in Jx Studio — chip navigation, a live data rail, instant results, and the formula catalog side by side. - [Statements](https://jxsuite.com/docs/studio/logic/statements/): Write function bodies as visual steps — set state, call functions, branch with if and switch, and dispatch events, no JavaScript required. - [Events panel](https://jxsuite.com/docs/studio/logic/events/): Make elements respond to clicks, typing, and form submits with the Events tab — bind functions, formulas, or inline handlers, and read event values. - [Data explorer](https://jxsuite.com/docs/studio/logic/data-explorer/): See the live values behind the open page in the Data activity — expand real data, refresh it, and try test values for component options. - [Data sources](https://jxsuite.com/docs/studio/logic/data-sources/): The reactive data sources in Jx Studio — Request, browser storage, FormData, ContentCollection — plus the database and account sources extensions add. - [Code editing](https://jxsuite.com/docs/studio/logic/code/): Drop down to real code when you need it — Monaco for function bodies, sidecar files, and Code mode for a document's raw source. - [Databases](https://jxsuite.com/docs/studio/data/): Connect a real database to your Jx site: connections, data tables, schema push, and the data grid — from a local SQLite file to D1 or Supabase. - [Connections](https://jxsuite.com/docs/studio/data/connections/): Add a database connection in Jx Studio — SQLite, Cloudflare D1, or Supabase — env-var names in project files, secret values kept out, Test Connection. - [Data tables](https://jxsuite.com/docs/studio/data/tables/): Define database tables in Jx Studio's Data Tables section: the visual field schema, ids, indexes, permissions — and the additive, dry-run Push Schema flow. - [Data grid](https://jxsuite.com/docs/studio/data/grid/): Browse and edit live database rows in Jx Studio's data grid: paging, typed cells, batched Save, add and delete rows — and how it differs from file grids. - [Auth and secrets](https://jxsuite.com/docs/studio/data/auth-and-secrets/): How Jx keeps secret values out of your project — names on the wire, values in .dev.vars — and how the auth extension adds accounts, sessions, and sign-in. - [AI assistant](https://jxsuite.com/docs/studio/ai/): What the Studio AI assistant can do with a project or page open, how to connect an AI provider, and exactly what leaves your machine when you chat. - [The AI sidebar](https://jxsuite.com/docs/studio/ai/chat/): The persistent chat sidebar — open it, attach context, watch the assistant's edits land, manage chat history, and review or undo its changes. - [Document assistant](https://jxsuite.com/docs/studio/ai/document-assistant/): How the assistant edits the page open on the canvas — live, validated changes in one undo step per request — and when to work project-wide instead. - [Publish](https://jxsuite.com/docs/studio/publish/): How a Jx site goes live: Studio commits and pushes your files, then your host builds the site — prebuilt pages, plus a worker if the project has one. - [Source control](https://jxsuite.com/docs/studio/publish/source-control/): The Source Control panel in Jx Studio: review and stage changes, commit and sync, switch branches, pull safely, and browse your project's history. - [GitHub](https://jxsuite.com/docs/studio/publish/github/): Connect Jx Studio to GitHub — authorize with a one-time code, then publish your project as a new repository and push it in one flow. - [Publish to Cloudflare Pages](https://jxsuite.com/docs/studio/publish/cloudflare/): Connect Jx Studio to Cloudflare Pages: sign in or paste a token, create and connect a Pages project, and watch deployments ride every commit. - [Other hosts](https://jxsuite.com/docs/studio/publish/other-hosts/): Publish a Jx site anywhere: pick an adapter, have your host run the build, and serve the output — with Netlify and GitHub Pages sketches. - [Real-time collaboration](https://jxsuite.com/docs/studio/publish/collaboration/): Co-edit Jx files live: presence chips, shared cursors on canvas and in code, merged edits and shared saves — and how Studio falls back to solo editing. - [The desktop app](https://jxsuite.com/docs/studio/desktop/): Jx Studio as a native app — open projects with native dialogs, one window per project, automatic background updates, and no dev server to run. ## Framework - [Framework](https://jxsuite.com/docs/framework/): The Jx specification: a declarative DOM format using plain JSON with reactive state, web components, and standards alignment. - [Documents](https://jxsuite.com/docs/framework/concepts/documents/): The root structure of a Jx file — $schema, $id, $defs, state, tagName, children — and why the format is plain JSON. - [Elements](https://jxsuite.com/docs/framework/concepts/elements/): How element objects map to the DOM: direct property names, the attributes object, children arrays, text nodes, and protected properties. - [Components](https://jxsuite.com/docs/framework/concepts/components/): How Jx components work: self-describing JSON, state management, external sidecars, and custom elements. - [Props and scope](https://jxsuite.com/docs/framework/concepts/props-and-scope/): How state crosses component boundaries in Jx: explicit $props, signal forwarding, scope isolation, and the resolution order. - [State](https://jxsuite.com/docs/framework/concepts/state/): The four shapes of a Jx state entry — naked value, typed value, computed template, and $prototype — plus naming rules and private entries. - [Reactivity](https://jxsuite.com/docs/framework/concepts/reactivity/): Template strings, signals, computed values, and reactive bindings in Jx. - [References](https://jxsuite.com/docs/framework/concepts/references/): $ref bindings in Jx: JSON Pointer syntax, the reference schemes, reactive bindings, the event# scheme, and resolution order. - [Expressions](https://jxsuite.com/docs/framework/concepts/expressions/): Declarative $expression trees in Jx: the blessed operator set, aggregates, conditionals, named formulas, and where expressions may appear. - [Statements](https://jxsuite.com/docs/framework/concepts/statements/): Structured function bodies in Jx: the statement kinds, how they lower to JavaScript, and when to use statements over expressions or raw code. - [Functions and sidecars](https://jxsuite.com/docs/framework/concepts/functions/): Function prototype entries in Jx: inline handlers, computed bodies, external .js sidecars, and how JavaScript reads and writes state. - [Styling](https://jxsuite.com/docs/framework/concepts/styling/): Inline styles, nested CSS selectors, and named media breakpoints in Jx. - [Color schemes](https://jxsuite.com/docs/framework/concepts/color-schemes/): Declare light and dark variants of a design and let visitors force either scheme with the auto/light/dark contract. - [Lists and iteration](https://jxsuite.com/docs/framework/concepts/lists/): Repeating elements from data in Jx: the Array pseudo-element, its items and map, the $map iteration context, and filtering and sorting. - [Data prototypes](https://jxsuite.com/docs/framework/concepts/data-prototypes/): The $prototype model in Jx: built-in Web-API data sources, content collections, external classes with .class.json, and import maps. - [Timing: client, server, compiler](https://jxsuite.com/docs/framework/concepts/timing/): Where Jx data entries resolve: in the browser, on the server across the RPC boundary, or at build time with values baked into the HTML. - [Dynamic switching](https://jxsuite.com/docs/framework/concepts/switching/): Swap whole components in and out of the page from state with $switch and cases — client-side views, wizards, and routing in pure JSON. - [Security](https://jxsuite.com/docs/framework/concepts/security/): Where Jx runs document code, why compiled sites need no unsafe-eval, and how table permissions, sessions, and secrets are enforced on the server. - [Site architecture](https://jxsuite.com/docs/framework/site/): How a Jx site is laid out on disk: pages, layouts, components, content collections, public assets, and the project.json that ties them together. - [project.json](https://jxsuite.com/docs/framework/site/project-json/): Every key in a Jx site's project.json — identity, defaults, head entries, style tokens, content types, redirects, build — and what cascades into pages. - [Routing](https://jxsuite.com/docs/framework/site/routing/): File-based routing in Jx sites: static routes, [param] dynamic routes, [...path] catch-alls, $paths expansion, priority, and route params at runtime. - [Layouts](https://jxsuite.com/docs/framework/site/layouts/): Shared page shells in Jx sites: $layout, slot injection, named slots, layout nesting, and how layout and page state merge. - [Content collections](https://jxsuite.com/docs/framework/site/content-collections/): The content section of project.json: sources, formats, entry ids, ContentCollection queries, ContentEntry lookups, and schema validation. - [Jx Markdown](https://jxsuite.com/docs/framework/site/jx-markdown/): Author Jx components and pages in Markdown: YAML frontmatter, directive syntax, attribute conventions, and when to choose Markdown over JSON. - [Relationships](https://jxsuite.com/docs/framework/site/relationships/): Link content entries to each other with #/content references: to-one and to-many fields, stored ids, and build-time resolution. - [SEO and metadata](https://jxsuite.com/docs/framework/site/seo/): Declare page metadata with $head, template it from state, and let the build merge heads and emit sitemap.xml and robots.txt. - [Images](https://jxsuite.com/docs/framework/site/images/): The build-time image pipeline: responsive srcset variants in WebP and AVIF, lazy-loading attributes, per-image overrides, and caching. - [Redirects](https://jxsuite.com/docs/framework/site/redirects/): Map old URLs to new ones in project.json: the redirects map, status codes, and the meta-refresh HTML and _redirects files the build emits. - [Site search](https://jxsuite.com/docs/framework/site/search/): Enable the search section to index content collections at build time, then wire a search UI with the Search prototype or the headless client. - [Build output and adapters](https://jxsuite.com/docs/framework/site/deployment/): What bunx jx build writes to dist/, how trailingSlash shapes URLs, and the deployment adapters for static hosts, Cloudflare, Node, and Bun. - [How compilation works](https://jxsuite.com/docs/framework/build/): What jx build does — route discovery, static detection, and the output tiers — and why most Jx pages ship zero JavaScript. - [The dev server](https://jxsuite.com/docs/framework/build/dev-server/): The @jxsuite/server development server: live reload over SSE, the Studio API, and the proxies that run server-side code while you develop. - [CLI commands](https://jxsuite.com/docs/framework/build/cli/): Reference for bun create @jxsuite and the jx CLI — build, schema, validate, and db push — with every flag as implemented. - [Working with agents](https://jxsuite.com/docs/framework/agents/): Why a Jx project is tractable for a language model, the three places an agent meets one, and the generate-validate-fix loop that keeps its work honest. - [Authoring rules for agents](https://jxsuite.com/docs/framework/agents/authoring-rules/): A briefing to paste into a coding agent: the three schemas, the five state shapes, $ref forms, style and attribute rules, and how it checks its own work. - [Machine-readable docs](https://jxsuite.com/docs/framework/agents/machine-readable/): Public endpoints an agent can fetch: llms.txt, full-docs.json, the site search index, and the canonical Jx JSON Schemas served from jxsuite.com. - [Reference](https://jxsuite.com/docs/framework/reference/): Generated reference pages — the formula catalog and the blessed operator set, produced from the packages that ship them. - [Formula catalog](https://jxsuite.com/docs/framework/reference/formulas/): Every composite formula that ships with Jx — name, parameters, and the pure expression it expands to. - [Operator reference](https://jxsuite.com/docs/framework/reference/operators/): The blessed operator set for declarative $expression trees — every operator and method token the schema admits. ## Extending - [Extending](https://jxsuite.com/docs/extending/): Extend Jx with custom formats, classes, project sections, and server mounts — or embed Studio on your own backend. - [Extension anatomy](https://jxsuite.com/docs/extending/extensions/anatomy/): What an extension package contains: layout and dependency rules, the project.json declaration model, section keys, and the jx-extension.json manifest. - [Schema composition](https://jxsuite.com/docs/extending/extensions/schema-composition/): How a project's effective JSON Schema is composed from core and extension fragments: entry documents, the two union resources, validation, and jx schema. - [Custom classes](https://jxsuite.com/docs/extending/extensions/classes/): Writing .class.json descriptors: the external class contract, $implementation, admission blocks, host introspection, and capability methods. - [Custom formats](https://jxsuite.com/docs/extending/extensions/formats/): Claiming file extensions with the format block: parse, serialize, discover, and load capabilities, remote sources, and Studio mode hints. - [Capability methods](https://jxsuite.com/docs/extending/extensions/capabilities/): The static method contract behind every extension integration point: well-known roles, timing, options as parameters, and the lower compile-away hook. - [Project sections and settings](https://jxsuite.com/docs/extending/extensions/project-sections/): Owning a project.json section: the project block, projectData and resolvePaths capabilities, and contributing a settings section to Studio. - [Server mounts](https://jxsuite.com/docs/extending/extensions/server/): How an extension class mounts routes under /_jx/ in the deployed-site worker and the dev server: the server block, mount order, and the shared context. - [Connectors](https://jxsuite.com/docs/extending/extensions/connectors/): The connector block that makes a class a database connection provider, and how @jxsuite/connector implements it for D1, Supabase, and SQLite. - [Search indexes](https://jxsuite.com/docs/extending/extensions/search/): How @jxsuite/search owns the search section, emits a build-time index with the emit capability, and lowers Search defs to client code. - [Security and secrets](https://jxsuite.com/docs/extending/extensions/security/): The extension security model: secret names ride the wire, values never do — plus the permission boundaries extensions and hosts must respect. - [Tutorial: a TOML format extension](https://jxsuite.com/docs/extending/extensions/tutorial-toml-format/): Build a third-party format extension end to end: package, manifest, class descriptor, parse and content capabilities, and .toml content in a project. - [Tutorial: a guestbook extension](https://jxsuite.com/docs/extending/extensions/tutorial-guestbook/): Assemble a moderated, auth-gated guestbook from extension parts: a project section, a dynamic table, a /_jx/ server mount, and lowered page actions. - [First-party extensions](https://jxsuite.com/docs/extending/extensions/first-party/): What @jxsuite/parser, @jxsuite/connector, @jxsuite/auth, and @jxsuite/search each contribute: sections, formats, classes, mounts, and settings. - [Embedding overview](https://jxsuite.com/docs/extending/embedding/): How Jx Studio runs on any backend: the platform-adapter layer, the wire protocol behind it, and how to choose an integration path for your host. - [Writing a platform adapter](https://jxsuite.com/docs/extending/embedding/platform-adapter/): Implement the StudioPlatform interface for your host: core and optional members, registration before Studio boots, and the project-open flow. - [The backend protocol](https://jxsuite.com/docs/extending/embedding/backend-protocol/): The Studio Backend Protocol contract — core vs optional routes, transport freedom, versioning, the error shape, and behaviors implementers must match. - [Dev server internals](https://jxsuite.com/docs/extending/embedding/dev-server/): Inside @jxsuite/server, the protocol's reference implementation: the route chain, the Studio API mount, the resolve proxies, and the security model. - [Protocol route reference](https://jxsuite.com/docs/extending/reference/studio-routes/): Every route in the Studio Backend Protocol — method, path, contract summary, and how Studio degrades when an optional route is absent. - [Implementation status](https://jxsuite.com/docs/extending/reference/implementation-status/): Generated from the specs' status markers: which spec sections are implemented, partial, pending, future, or removed. - [Spec changelog](https://jxsuite.com/docs/extending/reference/spec-changelog/): Release history for every specification, generated from each spec's changelog section: version, date, and what changed. - [Working in the monorepo](https://jxsuite.com/docs/extending/contributing/monorepo/): Repo layout, running Studio from source, tests, and the conventions the Jx monorepo enforces in CI. - [Contributing to these docs](https://jxsuite.com/docs/extending/contributing/docs/): How the Jx documentation is written, structured, screenshotted, and checked — the style guide for every page in /docs. - [AI assistant evals](https://jxsuite.com/docs/extending/contributing/ai-evals/): Run the AI assistant eval suite, read its transcripts, and use the render critic and regression gate when you change the assistant's scaffolding.