[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/) # Jx Markdown > **Studio writes this format for you.** The [writing surface](/docs/studio/editing/writing) and [frontmatter panel](/docs/studio/editing/frontmatter) edit `.md` files visually, and this page documents the syntax for when you hand-edit one or read a diff. A Jx Markdown file is a Markdown document that transpiles to the same JSON structure the compiler and runtime consume everywhere else. It combines three layers: 1. **YAML frontmatter** carries top-level document properties (`tagName`, `state`, `style`, …) 2. **Directives** are explicit elements using [remark-directive](https://github.com/remarkjs/remark-directive) syntax 3. **Standard Markdown** maps headings, paragraphs, lists, and links to HTML elements Markdown support is opt-in: the project must enable the parser extension in `project.json` (`"extensions": ["@jxsuite/parser"]`). There is no implicit `.md` handling without it. ## A minimal component ```markdown shiki ``` The frontmatter declares the document schema; the body declares the element tree. A `.md` file whose frontmatter has a `tagName` containing a hyphen is a component; a file without one is a content document (a blog post, a docs page) that produces a plain element tree. Any content file can add component schema later without changing how it's processed. ## Frontmatter All top-level Jx document keys go in the YAML frontmatter, `$` prefixes included: `tagName`, `$id`, `state`, `$media`, `$defs`, `$elements`, `$layout`, `$paths`, `$handlers`, `imports`, `observedAttributes`. Any other keys pass through to the document unchanged, which is how pages set `title` or `$head`. ## Directives Three directive forms cover the element tree: **Container directives** wrap children. Outer containers use *more* colons than inner ones (minimum three), and the closing fence matches the opening count: ```markdown shiki ``` **Leaf directives** (two colons) are self-closing: ```markdown shiki ``` **Text directives** (one colon) sit inline within prose: ```markdown shiki ``` The directive name is the element's `tagName`: any HTML tag or any registered custom element. ## Attributes Attributes use the HTML-like `{key="value"}` syntax. Three characters can't start a directive attribute key (`$`, `:`, and `@`), so Jx defines drop-the-prefix conventions that the transpiler reverses: | You write | The document gets | | -------------------------------------------------------------- | ------------------------------------------------------------------------ | | `prototype`, `ref`, `component`, `props`, `switch`, `elements` | `$prototype`, `$ref`, `$component`, `$props`, `$switch`, `$elements` | | `--title`, `--description` | `$title`, `$description` (element annotations, dropped from HTML output) | | `style.hover.color` (see below) | `style[":hover"].color` | DOM properties like `src`, `id`, and `export` are not mapped; they pass through as-is. Attributes matching `aria-*`, `data-*`, or `slot` route into the element's `attributes` object; everything else becomes a top-level DOM property. Nested objects are written as dot-separated keys. Props on a component instance use `props.*`: ```markdown shiki ``` which expands to: ```json shiki ``` ## Style attributes Element styles are `style.*` dot-path attributes. CSS pseudo-classes drop their `:` prefix and named media queries drop their `@` prefix, and the transpiler restores both. Pseudo-*elements* get two colons back: `backdrop` becomes `::backdrop`, while `before` and `after` keep the one-colon spelling CSS has always accepted. Only recognised names are restored. An unrecognised one stays bare and is then read as a descendant type selector, which matches nothing and says nothing about it, so [popover](/docs/framework/concepts/overlays) states are on the list: `popover-open`, `open` and `modal` alongside `hover`, `focus` and the rest. ```markdown shiki ``` ```json shiki ``` Root-level styles go in frontmatter under `style`, where YAML allows `:hover` and `@--dark` keys to be written directly. ## Repeaters An [array repeater](/docs/studio/design/repeaters) has no `tagName`, so it serializes as a directive named after its `$prototype`, with the nested block as the `map` template: ```markdown shiki ``` ## Heading anchors Every heading gets an `id` built from its own text, so `## Getting started` becomes `#getting-started` and repeats get `-2`, `-3` in document order. Two things about that are worth knowing outside English: letters in any script are kept, so a Japanese or Cyrillic heading gets a real anchor rather than an empty one, and an accented heading produces one anchor whichever way the accent was typed, since `é` can be a single character or an `e` plus a combining mark, which look identical and used to produce two different links. Plain-ASCII headings are unaffected, so existing links keep working. ## Standard Markdown Plain Markdown maps to the elements you'd expect: headings to `h1`–`h6`, paragraphs to `p`, emphasis to `em`/`strong`, links to `a`, images to `img`, lists to `ul`/`ol` + `li`, fenced code to `pre` > `code`, tables to `table` structures. Mixing prose and directives in one file is the normal case, not a special one. When Studio saves a file it writes each element back in the form that keeps all of it. An element is written as plain Markdown only when Markdown can say everything it carries: an image with a `width` and `height` stays `::img{src="…" alt="…" width="1600" height="1067"}`, because `![alt](src)` has nowhere to put them, and a table without a header row stays the directive table it was written as, because a pipe table always has one. The frontmatter keeps long values on one line and keeps a value like `date: "2024-07-26T17:39:36Z"` quoted, so a date you wrote as text is still text for every tool that reads the file. Saving a file you have not edited changes none of its values. Fenced code with a recognized language tag is syntax-highlighted at build time. The set is `json`, `jsonc`, `ts`, `js`, `bash`, `html`, `xml`, `css`, `yaml`, `toml`, `ini`, `md`, `sql`, `php`, `python`, `ruby`, `nix`, `nginx`, `caddyfile`, `diff` and `dockerfile`, with their usual aliases (`sh`, `py`, `rb`, `yml`): each token becomes a `span` carrying its light and dark colors as `--shiki-light`/`--shiki-dark` CSS variables, so highlighting follows the site's [color scheme](/docs/framework/concepts/color-schemes) automatically. Unknown languages fall back to plain text, and no fence ever breaks. Note These docs are themselves Jx Markdown: every aside like this one is a container directive ( `:::doc-note` , `:::doc-tip` , `:::doc-warning` ) rendered by a component the docs site registers via `$elements` on its content collection. ## Code that looks like a template Jx treats any string containing ${ as a template, which is right for documents you write and wrong for the content of a Markdown entry. A fence that shows a JavaScript template literal (${name}), a shell variable (${HOME}) or a GitHub Actions expression (${{ secrets.TOKEN }}) is showing text, and the content loader keeps it that way: the page prints exactly what you wrote, in fences, inline code, headings, paragraphs, lists and tables. Nothing in a Markdown body is evaluated by the build. The one exception is a ${ inside an attribute value, such as a link's `href`, which is still read as a template. ## Callouts A blockquote that starts with `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]` or `[!CAUTION]` is a callout, the notation GitHub and Obsidian share: ```markdown shiki ``` Text after the marker on the same line is the callout's title (Obsidian's form; GitHub shows it as plain text), and with none the title is the type's name. Callouts nest inside lists and inside each other, and the marker is matched without regard to case. A file saved with Windows line endings reads the same as one with Unix endings. An ordinary blockquote stays a blockquote, and so does one whose type nobody has enabled: the load prints a warning that names the file and the type, because the literal `[!info]` on the page is otherwise the only clue. Without configuration a callout renders as a `div` with `role="note"` and the classes `jx-alert` and `jx-alert-note` (or `-tip`, and so on), whose first child is a visible `p.jx-alert-title`. It carries no styles, so your stylesheet decides what it looks like. The title is a paragraph rather than a heading, so a callout never appears in the table of contents or the search index's section list. A content type's `alerts` option swaps in your own components, the same ones `:::doc-note` uses: ```json shiki ``` A mapped type renders as that element with the alert type at `data-alert` and any author title at `data-title`; types you leave out keep the built-in markup. Map a type to `null` or `false` to leave it a plain blockquote, or to `true` to switch on a type beyond GitHub's five (`"INFO": true`) with the built-in markup, which is how Obsidian's extra types (`info`, `example`, `faq`) are enabled. `"alerts": false` turns callouts off for the whole content type. The element still has to be registered where the pages render, as it is for a directive. The built-in titles are English (`Note`, `Warning`). A localized site gives a callout its own title (`> [!WARNING] Attention`) or maps the types onto components that translate them. Note Callouts are a content-loading feature. Studio's canvas opens a `.md` file through the component parser, which keeps the blockquote exactly as you wrote it, so the callout appears on the built site and in previews that build, not in the canvas. The file on disk is never changed. ## Markdown or JSON? Both formats produce the same document, and Studio edits both transparently, so choose by what the file mostly contains: | Prefer Markdown | Prefer JSON | | -------------------------------------- | ------------------------------------------ | | Content-heavy pages (blog posts, docs) | Complex interactive components | | Components with significant prose | Components with many state functions | | Landing pages, marketing content | Deeply nested element hierarchies | | Quick prototyping | Components with complex `$prototype` usage | Two hard limits to know: there is no runtime `.md` format (files always transpile to JSON first), and event-handler bodies or computed expressions live in frontmatter `state` definitions, never inline in the directive body. ## Related - [Content collections](/docs/framework/site/content-collections): Markdown entries with validated frontmatter - [Obsidian vault as content](/docs/framework/site/obsidian-vault): publishing notes with callouts and relative links as they are - [Components](/docs/framework/concepts/components): the JSON document model both formats produce - [Writing](/docs/studio/editing/writing): editing Markdown visually in Studio ✕ 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.