Source: https://learn.nodegx.io/ways/studio
Summary: The editor for people who think in pages, elements and workflows. Inside your chat with Claude, or on its own on your computer.

# NodeGX Studio

NodeGX Studio is an open-source editor for pages, elements, workflows and data. It is the day-to-day place to change your app yourself. Change a heading, a font, a button colour or a translation. It works without Claude. Nobody charges you for it or can take it away.

::: warning Coming soon as a download
Studio opens inside the chat with the [Claude desktop add-on](https://learn.nodegx.io/ways/in-the-chat). It will also be a download for Mac, Windows and Linux. Both are being finished. Join the list at [nodegx.io/start](https://nodegx.io/start/). Until then, [the NodeGX editor](https://learn.nodegx.io/ways/the-editor) opens the same project.
:::

## Who it is for

Studio is for people who think in pages, elements and workflows, the way Bubble and n8n users do. You see the real app on the screen. What you click on in **Design** is your running app, not a picture of it.

## What you see

Three tabs over one app.

- **Design.** The screen is the real app. Select a thing, drag it, resize it, change its settings in a panel.
- **Workflow.** What happens when someone clicks or something changes. Workflows sit on the element they belong to. A section called **On the backend** shows the jobs that run out of sight.
- **Data.** The types of thing your app stores, the rows, who can see what, and fixed lists such as a set of statuses. A map shows how the data connects. There is a development database for trying things and a live one for real use.

There is also a replay of what the app did, step by step. It shows you why something happened. And a **Publish** button that puts the pages on a static site and sends the backend jobs to your backend.

## Studio and Claude together

In the Claude desktop app, Studio opens inside the conversation. Every change Claude makes redraws it. The **HOLD** button stops Claude. The steps are on [In the chat with Claude](https://learn.nodegx.io/ways/in-the-chat).

On its own, Studio has a **Connect Claude Code** button in the header. It registers NodeGX for the project folder. Then it shows you the command that starts a Claude session on that folder.

When you change something in Studio while Claude is working, Claude sees it. It carries on from your change rather than putting back the old version.

## What Studio does not edit

<!-- canon: The wiring underneath -->
Some of what the AI builds is a part Studio does not edit: a script, a logic node with its own states, a function's insides. Studio does not hide them. It shows you the value such a part produces and names the part, and from there you can look at the wiring underneath: the page as it really is, every node and wire, read only. If you want to change what you see there, download the NodeGX editor. It is the unrestricted version, and it has a learning curve: the lessons inside it take you through the canvas step by step.

Or ask Claude. It can build you a small editor for that one part, or walk you through the NodeGX editor step by step.

## Coming from Bubble

Studio can import an app built on the Bubble platform: pages, elements, styles, workflows, option sets, data types, privacy rules and backend workflows. Anything it cannot bring across is listed in a report inside the new project, so every page still opens. The steps are at [nodegx.io/start#bubble](https://nodegx.io/start/#bubble).

::: everything Run it from source today
Studio is open source. With Node.js 22 installed, in a terminal:

```bash
git clone https://github.com/The-Low-Code-Foundation/nodegx-studio
cd nodegx-studio
npm install
npm start
```

It opens on a welcome screen: reopen the last project, pick a recent one, start from a NodeGX template, or import an app. A project is any folder holding `nodegx.project.json`. A project made in the NodeGX editor opens here as well.
:::

## Quick reference

- Design, Workflow, Data. The screen is the real app.
- It opens inside the Claude chat or in its own window. Coming soon as a download.
- Changes you make yourself. Claude carries on from them.
- Scripts and logic with states: shown, not edited. The NodeGX editor changes those.