[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/) # Authoring rules for agents An external coding agent (Claude Code, Cursor, a script against an API) needs no Jx-specific tooling to work on a project. It reads and writes files like any repository. What it does need is a briefing, because a model that has never seen Jx will reach for the conventions of frameworks it has seen: a CSS string where the format wants an object, an `attributes` bag where the property belongs on the element. Everything below is the briefing. Paste it into a system prompt, drop it in the agent's project instructions file, or point the agent at this page. The monorepo keeps a version of it as a `/jx` slash command at [`.claude/commands/jx.md`](https://github.com/jxsuite/jx/blob/main/.claude/commands/jx.md), which you can copy into your own project's `.claude/commands/`. Tip Whatever form you use, include the **check your work** section at the end. A briefing without a verification step tells the agent what good looks like but gives it no way to find out whether it got there. ## Two ways valid JSON still loses your work Both of these parse without complaint in any JSON tool, and both are **build errors** in Jx: ```json shiki ``` A repeated key. `JSON.parse` keeps the last one and discards the first without a word, so the first `state` object is gone, and nothing downstream can tell it ever existed. ```json shiki ``` An integer larger than a double can hold. It parses as `9007199254740992`, and the next save writes that wrong number back to your file. These are errors rather than warnings because a Jx document doesn't stay JSON. It round-trips through markdown frontmatter and through the collaborative editing layer, and each crossing rebuilds the object from the parsed value. Whatever was dropped at the boundary is dropped for good. Fractions are never flagged. `0.1` isn't exactly representable in binary floating point either, so complaining about it would mean complaining about most real documents while telling you nothing about whether your value survived. ### Names are normalized, so an accent means one thing A state name is an identifier: declared as a key in `state`, referenced as ${state.été} in a template and as `#/state/été` in a `$ref`. Typed on macOS an accented letter arrives decomposed (`e` plus a combining acute); typed on Windows, or pasted from most of the web, it arrives precomposed as a single character. Those are two different property names. A document whose declaration and reference came from different machines used to build cleanly, emit a valid bundle, and render nothing at all: no error, and no way to see the difference in any editor. Every key and every string value is now put into Unicode Normalization Form C when the file is read, so both spellings become the same name. Values are normalized too: canonically equivalent text is the *same text* by definition, so nothing about your content changes. NFC composes and never folds or strips, so CJK, emoji, and scripts with no composed forms survive exactly as written. ## The three schemas Every Jx file validates against one of three JSON Schema 2020-12 documents, published at stable URLs: | File | Schema | | ------------------------------------- | --------------------------------------- | | Components, pages, layouts (`*.json`) | `https://jxsuite.com/schema/v1` | | `project.json` | `https://jxsuite.com/schema/project/v1` | | Class definitions (`*.class.json`) | `https://jxsuite.com/schema/class/v1` | Inside a project, prefer the generated local copies over the network: `jx schema` writes `project.schema.json` and `document.schema.json` into the project root, composed from the core schemas plus the fragments each enabled extension ships. Each is a self-contained single-resource schema, with every `$ref` a root-relative JSON Pointer into the same file, so an editor resolves it offline with no `node_modules`, no network, and no configuration (see [Machine-readable docs](/docs/framework/agents/machine-readable) and [Schema composition](/docs/extending/extensions/schema-composition)). `project.json` binds itself with `"$schema": "./project.schema.json"`. Documents carry no `$schema` key in the shipped starters (`jx validate` checks them against `document.schema.json` either way), so add one only if you want editor autocomplete. It resolves relative to the file that carries it, so count the folder levels: `"../document.schema.json"` from `pages/index.json`, `"../../document.schema.json"` from `pages/blog/post.json`. A pointer with too few `../` names a file that does not exist, and validators report the unresolvable schema instead of checking the document at all. ## Project structure ```text my-site/ project.json # Required. Site config, global styles, collections, build settings pages/ # File-based routing. Each file = a route. [slug].json = dynamic layouts/ # Shared page shells. Use { "tagName": "slot" } for content insertion components/ # Reusable custom elements content/ # Markdown/JSON/CSV content collections public/ # Static assets copied verbatim to dist/ ``` Files and folders prefixed with `_` inside `pages/` are excluded from routing, so a page's private components can sit beside it. ## The document A Jx document is a JSON object describing a reactive web component: ```json shiki ``` Only `tagName` is required. A `tagName` containing a hyphen makes the document a custom element. ### State: five shapes, detected by structure **1. Naked value**: a scalar, array, or plain object with no reserved keys: ```json shiki ``` **2. Typed value**: has `default`, optionally `type`: ```json shiki ``` **3. Computed**: a string containing ${}: ```json shiki ``` **4. Function**: `$prototype: "Function"`, with an inline `body` or an external `.js` sidecar: ```json shiki ``` **5. Data source**: `$prototype: `: ```json shiki ``` See [State](/docs/framework/concepts/state) and [Data prototypes](/docs/framework/concepts/data-prototypes). ### `$ref` bindings | Pattern | Example | Meaning | | --------- | -------------------------------- | ------------------------------------- | | State | `{ "$ref": "#/state/count" }` | Reactive binding to state | | `$defs` | `{ "$ref": "#/$defs/TodoItem" }` | Type definition reference | | Parent | `{ "$ref": "parent#/theme" }` | A value passed in via `$props` | | Map item | `{ "$ref": "$map/item" }` | Current item in an iteration | | Map index | `{ "$ref": "$map/index" }` | Current zero-based index | | External | `{ "$ref": "./card.json" }` | Another Jx document | | Window | `{ "$ref": "window#/Math/max" }` | A path resolved off the global object | Use ${} templates for inline one-off bindings, `$ref` objects for named or reused signals. See [References](/docs/framework/concepts/references). ### Children Static children are an array of element objects and text strings, mixed freely: ```json shiki ``` A dynamic list uses `$prototype: "Array"`: ```json shiki ``` See [Lists and iteration](/docs/framework/concepts/lists). ### `$switch` and `cases` ```json shiki ``` See [Dynamic switching](/docs/framework/concepts/switching). ### Style An object of camelCase CSS properties. Nested selectors are keys prefixed with `:`, `.`, `&`, or `[`; breakpoints are `@--name` (a named breakpoint from `$media`) or `@(query)` (a literal media query): ```json shiki ``` See [Styling](/docs/framework/concepts/styling). ### Properties and attributes IDL properties go directly on the element object: `href`, `src`, `textContent`, `className`, `hidden`, `disabled`, `value`, `checked`. Everything else (`aria-*`, `data-*`, `role`, `slot`) goes in `attributes`: ```json shiki ``` ### Event handlers Reference a function from state: ```json shiki ``` ### Components and props `$elements` is an **array** of `$ref` objects (paths relative to the current file) and bare npm specifiers for web-component libraries. The registered tag is the referenced document's own `tagName`. Instantiate it by tag and pass data with `$props`. A bare `{ "$ref": "./card.json" }` in `children` is not a component instance: ```json shiki ``` `props.*` attributes (`"attributes": { "props.name": "Ada" }`) are an equivalent shorthand for **string** values only, and the key must be lowercase because HTML lowercases attribute names. Anything bound or non-string belongs in `$props`. See [Props and scope](/docs/framework/concepts/props-and-scope). ## Pages Pages are documents with a few extra top-level fields: ```json shiki ``` - `$layout`: a path resolved from the **project root**, or `false` for no layout. Omit it to use `defaults.layout` from `project.json`. - `$head`: merges with the layout's and the project's entries; the page wins on conflicts. - `$paths`: the concrete routes a `[param]` page generates. One source shape, checked strictly by the generated document schema: `{ contentType, param, field }` (needs `@jxsuite/parser`), `{ values, param }`, `{ "$ref": "./data.json", param, field }`, or a bare array of parameter objects. A key that is not part of one of these is an error, not a silently empty build. - `tagName` is optional on a page that uses a layout. Dynamic route (`pages/blog/[slug].json`): ```json shiki ``` See [Routing](/docs/framework/site/routing) and [Content collections](/docs/framework/site/content-collections). ## Layouts Ordinary documents with `` elements marking where page content lands. Name a slot to define more than one region: ```json shiki ``` See [Layouts](/docs/framework/site/layouts). ## project.json ```json shiki ``` `extensions` is the enablement list, and no Studio panel edits it: turning on the connector, auth, or search extension means adding its package name to this array by hand (a good job for the agent), then re-running `jx schema`. Studio picks up the change once it is on disk. See [project.json](/docs/framework/site/project-json) and [First-party extensions](/docs/extending/extensions/first-party). ## `.class.json` ```json shiki ``` See [Custom classes](/docs/extending/extensions/classes). ## The server tier A brochure site is not the ceiling. Three additions turn a Jx project into an application, and an agent should know they exist: - **Server functions.** A state entry with `timing: "server"` names an async export via `$src` and `$export`, with no `$prototype`. It compiles to `POST /_jx/server/`, and the function receives `(args, env)` where `env` carries the platform's bindings. Secrets stay in that process. See [Timing](/docs/framework/concepts/timing). - **Databases.** Add `@jxsuite/connector` to `extensions`, then declare `connections` (D1, Supabase, or SQLite) and `data` tables in `project.json`. `jx db push` applies the schema additively. Form actions and table queries read and write over `/_jx/data`. See [Databases](/docs/studio/data). - **Accounts.** Add `@jxsuite/auth` and an `auth` section for sign-in, sessions, roles, and per-table permissions. See [Auth and secrets](/docs/studio/data/auth-and-secrets). Two rules bind all three. **Secrets are never values in `project.json`**: the file records environment-variable *names* only, and the values live in `.dev.vars` locally and in your host's environment when deployed. And any of this needs a server-capable `build.adapter` (`cloudflare-workers`, `cloudflare-pages`, `node`, or `bun`), which packages the server tier into a deployable worker; with connection-backed data tables it is not optional, because the build **fails** on static. See [Build output and adapters](/docs/framework/site/deployment). ## Hard rules 1. `style` is always an **object** of camelCase properties, never a CSS string. 2. Use `"textContent"` for leaf elements; use `"children": ["text", …]` for mixed content. 3. IDL properties go on the element; everything else goes in `attributes`. 4. Prefer CSS `clamp()` over media queries for simple responsive values. 5. A component's `tagName` must contain a hyphen (Web Components requires it). 6. `$defs` holds JSON Schema type definitions only: no functions, no defaults, no runtime artifacts. 7. Template strings (${}) are pure expressions, with no statements and no assignments. 8. Function `body` strings are raw JavaScript where `state` is in scope; a sidecar export takes `state` as its first parameter. 9. `"$lazy": true` on a `$src` Function loads the module on first call instead of importing it with the page. The function then returns a promise, so only use it for entries you **call** from a handler or lifecycle hook, never for one bound as a value; the compiler rejects the latter. Reach for it when the module is large and most visitors never trigger it. 10. `$head` entries are `{ tagName, attributes }` objects, never HTML strings. 11. Layouts inject content with `{ "tagName": "slot" }`. There is no `$slot` or `$content`. 12. All state entries are reactive by default; no `signal: true` flag exists. 13. `timing` (`"compiler"`, `"server"`, `"client"`) decides where a data source resolves. `"client"` is the default. ## Check your work Never report a task complete on the strength of the output looking right. Run the loop: ```bash shiki ``` `jx validate` prints one block per failing file: ```text pages/about.json: - /children/0: must NOT have additional properties ``` Each line names the file, the JSON pointer, and the violation, which is enough to fix without guessing. Repeat until it prints `Project is valid`. The same command gates CI, so nothing is gained by skipping it. See [CLI commands](/docs/framework/build/cli). ## Related - [Working with agents](/docs/framework/agents): where this briefing fits in the wider workflow - [Machine-readable docs](/docs/framework/agents/machine-readable): the schema and documentation URLs an agent can fetch - [Documents](/docs/framework/concepts/documents): the long-form version of the document model - [Site architecture](/docs/framework/site): the project layout these rules describe ✕ 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.