Your first project

In about ten minutes you'll create a site in Jx Studio, design a page, add a bit of interactivity, and publish it to git — all without hand-writing a line of JSON. (If you do want to see the underlying format, every page here has a counterpart under Format & Reference .)

1. Get Studio

Download the desktop app for macOS, Windows, or Linux — there's no hosted Studio to sign into, it runs on your machine, against your files. Full details are in Install Jx Studio .

2. Create a project

In Studio, choose New Project . Give it a name, choose the Location to create it in — Browse… opens your system's folder picker — name the folder, set your production URL, and pick a deployment adapter — Static, Cloudflare Pages, Node, or Bun. Static suits a site that's purely pages and content; if it will have a database, sign-ins, or server functions, pick one of the others — those hosts can run the small worker Jx builds for them. You can change this later in project settings .

Then pick a template . Start from Blank for an empty project, or clone one of the starter sites — a restaurant, shop, portfolio, SaaS landing, blog, and more. Each one is a complete, themed site (pages, components, content, and images) you can reshape into your own. Studio copies it in as plain files and opens it on the canvas.

Already have a Jx project? Use Open Project to point Studio at a folder on disk, or Clone to pull one from git. (Developers who'd rather scaffold from a terminal can use bun create @jxsuite instead — see CLI commands — then open the result in Studio.)

3. Manage, edit, design

Studio gives you a surface for each part of the job. Start in Manage to see your project — pages, components, content, and media — with live previews.

Open a content page and switch to Edit to write inline — click any text and type, use slash commands for blocks, fill in frontmatter on the side. Open a component and switch to Design for the visual canvas: a live preview at every breakpoint, and a full CSS inspector for spacing, type, color, and hover states.

4. Add an interaction

Websites do things. In Studio, interactivity comes from three panels working together — no separate "code mode" required:

• State — declare a value or a computed one (a counter, a total, a fetched list).

• Events — bind a handler to a click, input, or submit with the structured expression editor.

• Code — drop into the Monaco editor when a handler needs real JavaScript.

Add a count to state, a button, and an onclick that increments it — you've built a reactive component. See Script & logic for the full toolkit.

5. Commit and publish

When you're happy, open Source Control . Review your changes, write a message, and commit and sync — or, for a brand-new project, Publish to GitHub and Studio creates the repository for you.

Here's the one boundary worth knowing: Studio publishes code; it doesn't build or deploy the site. It commits and pushes, and it sets the deploy adapter you chose in step 2. Your host takes it from there — building the site ( bunx jx build ) on every push and serving the dist/ output from a CDN. If you picked one of the server-capable adapters in step 2, the build emits a small worker beside those files as well — that's the piece that runs a database, sign-ins, or server functions. See Git & publish for the full flow.

What's next

• Using Studio: Manage · Edit · Design · Script & logic · Git & publish

• For developers: Site architecture · Component model · Spec overview