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 Framework .)

1. Get Studio

Download the desktop app for macOS, Windows, or Linux . It runs on your machine, against your files. (Jx Cloud, the hosted version you sign in to with GitHub, is in development.) Full details are in Install Jx Studio .

2. Create a project

In Studio, choose New Project . The wizard opens on the starter gallery : a restaurant, a shop, a portfolio, a SaaS landing page, a blog, and more. Each one is a complete, themed site (pages, components, content, and images) you can reshape into your own, and Studio copies it in as plain files. The last card, Start from scratch , gives you an empty site with one page instead.

Click Next , give the project a name, and choose the Location to create it in. Browse… opens your system's folder picker. Studio derives the folder name from the name as you type and shows you the exact path before you commit to it. That's the whole form: it writes the files, starts a git repository for them, and opens the project on the canvas.

Everything else about the site lives in its configuration, which you can change as often as you like: its description and production URL in project settings , and the deployment adapter that packages it for your host, set under How it is built in Publish › Hosting . 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, because those hosts can run the small worker Jx builds for them.

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, described in CLI commands , then open the result in Studio.)

3. Browse, edit, design

Studio gives you a surface for each part of the job. The Site panel on the left lists your pages by address, with the templates, components and media they are made of: click a page to open it, or drag a component or an image straight onto the canvas. Its + opens Add new (also ⌘N ), the one dialog that makes a page, a template, a component, a collection or an upload: type a name and Studio works out the file. Every image, video and document lives in the Media workspace ( ⌘3 ), where you upload, replace and delete them; an upload lands in public/media/ . Your pages and the entries of every collection are browsed in the Content workspace ( ⌘2 ), as a table or as cards with live previews, and an entry is written there too, on the canvas inside its template.

Open a content page and switch to Edit mode to write inline: click any text and type, use slash commands for blocks, fill in frontmatter in the Inspector's Page tab. 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 surfaces working together, with no separate "code mode" required:

• The Data panel declares a value or a computed one: a counter, a total, a fetched list.

• The Inspector's Logic view (on its Element tab) binds a handler to a click, input, or submit with the structured expression editor.

• The Code editor is where you drop into Monaco when a handler needs JavaScript.

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

5. Commit and publish

When you're happy, switch to the Publish workspace ( ⌘5 , or the last tab in the Command Bar). Review changes lists what you changed: check the files to include, write a summary, and click the button under it, which commits and pushes. If the project has no remote yet, Create GitHub repository makes one and pushes to it for you.

There is one boundary to know about: Studio publishes code; it doesn't build or deploy the site. It commits and pushes, and it records the deploy adapter set in project.json . Your host takes it from there, building the site ( bunx jx build ) on every push and serving the dist/ output from a CDN. With one of the server-capable adapters, the build emits a small worker beside those files as well, and that worker is the piece that runs a database, sign-ins, or server functions. See Publish for the full flow.

What's next

• Using Studio: The Content workspace · Edit mode · Design mode · Logic · Publish

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