> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devias.io/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> The docs are served at https://docs.devias.io. Every path in these docs is relative to that root: /llms.txt is https://docs.devias.io/llms.txt.
> Devias is an open-source platform that works as an operating system for a business: a core (records, views, workflows, agents, permissions) with installable modules.
> Pages are typed by folder. concepts/ explains what things are, guides/ gives procedures, reference/ is exhaustive (SDK, CLI, HTTP API), operate/ covers hosting. Use /start/glossary for exact terms.
> Every id in a module (module, object, field, view, action, workflow, step, connection, variable, event, policy) is a uuid. Generate them with `devias id <count>`. Never invent dotted or readable ids.
> Run `devias plan` and read its output before `devias apply`. Apply only what the plan says.
> The OpenAPI document, including the routes of the modules in the reference setup, is at /reference/api/openapi.json.
> Devias is young and changes quickly. If a page and the source repository (github.com/devias-io/devias) disagree, the repository is right.

# Customize the studio

> The Devias studio is a React app configured in apps/studio/src/studio.config.tsx with defineStudio. Lists every setting (title, modules, structure, defaultPage, contact, agentImages) and the kinds of parts that can be added: sidebar structure, field and view types, blocks, pages, commands and theme.

The studio is the app a team works in. Most of what it shows comes from modules and from data, and the app itself is configured in one small file, `apps/studio/src/studio.config.tsx`, with `defineStudio`.

```tsx theme={"dark"}
export const studioConfig = defineStudio({
  title: 'Acme',
  modules,
  structure: (S) => S.list().items([S.navItems()]),
});
```

`defineStudio` takes a handful of settings:

| Setting | What it does |
| - | - |
| `title` | What the studio is called, for example on the sign-in pages. |
| `modules` | The modules to load, in order. They come from `devias.config.ts`. A later module wins when two contribute the same thing. |
| `structure` | The sidebar. See [Sidebar structure](https://docs.devias.io/guides/customize-studio/structure.md). |
| `defaultPage` | Where people land after signing in. |
| `contact` | A link in the sidebar for reaching you, such as an email address. |
| `agentImages` | Pictures for agents, by icon name. |

## Parts that can be added

* [Sidebar structure](https://docs.devias.io/guides/customize-studio/structure.md): what appears in the sidebar, and in what order.
* [Field and view types](https://docs.devias.io/guides/customize-studio/field-and-view-types.md): new kinds of field and new ways to look at records.
* [Blocks](https://docs.devias.io/guides/customize-studio/blocks.md): pieces for Home, record pages and the side panel.
* [Pages and commands](https://docs.devias.io/guides/customize-studio/pages-commands.md): whole screens and palette commands.
* [Theming](https://docs.devias.io/guides/customize-studio/theming.md): colours, fonts and corners.

## Where the code lives

A part can come from the app itself, in `studio.config.tsx`, or from a module's `./studio` export. A part that belongs with a module's data should live in the module, so that it travels with it.

To work on the studio without a server, run `VITE_MOCK=1 pnpm dev:studio`. It starts the studio on an in-memory fake backend.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.