# What Is Editable In Sanity

## What Is Editable In Sanity

**Files:** `sanity/`, `sanity.config.ts`, `src/config/` · **Skill level:** Beginner

To open the Studio, run `npm run setup`, then `npm run dev:all`, and open `http://localhost:3333`. See [Sanity](../sanity/) for the full guide.

<Aside type="caution">
  No Sanity project was connected when this page was written. It describes how
  the Studio is built to work. See **What We Tested** below.
</Aside>

### Where Each Page Is Edited
In the Studio, open **Content**, then your language. Each language has its own set of documents.

| Address                                                  | Studio location                       | **Sections on this page**       |
| -------------------------------------------------------- | ------------------------------------- | ------------------------------- |
| `/`                                                      | **Homepages > Home page**. The copy is under **Sections** | No          |
| `/pricing/`                                              | **Main pages > Pricing page**         | No                              |
| `/contact/`                                              | **Main pages > Contact page**         | No                              |
| `/faq/`                                                  | **Main pages > FAQ page**, with the questions in its **List** | No      |
| `/testimonial/`                                          | **Main pages > Testimonials page**, with the quotes in its **List** | Yes, the testimonials block |
| `/changelog/`                                            | **Main pages > Changelog page**, with the releases in its **List** | No |
| `/integration/`                                          | **Main pages > Integrations page**, with the integration groups | No    |
| `/integration/{slug}/`                                   | **Integrations**, one document per entry | No                           |
| `/career/`                                               | **Main pages > Careers page**, with the title of the job list | Yes, the job list |
| `/career/{slug}/`                                        | **Jobs**, one document per entry      | No                              |
| `/blog/`                                                 | **Main pages > Blog page**            | No                              |
| `/blog/{slug}/`                                          | **Blog posts**, one document per entry | No                             |
| `/privacy-policy/`, `/terms-conditions/`, `/components/` | **Other pages**                       | No                              |
| `/company/`, `/features/`                                | No document of their own: **Sections**. Their description comes from the **Home page** document | No |
| The 404 page                                             | **Interface labels**. Its image stays in code | No                      |

Blog authors are under **Authors**. Use the + button to add a post, job, integration, or other page.

A new entry with only a title won't break the site, and it builds. Its card or page shows what you filled in, and images and other fields stay empty until you add them, so fill them in before you publish. We tested this in the bundled demo content, not on a real project.

Page documents hold the title and meta description. Some page options have no field yet, such as a separate SEO title, a canonical link, or leaving a page out of the AI files. To add one, see `SKILLS.md`.

### Sections
Each section is its own document under **Sections**, shared by every page that uses it. Most have an **Enable** switch that hides the section.

| Section              | Where it appears                                                       |
| -------------------- | ---------------------------------------------------------------------- |
| About us             | `/company/`                                                            |
| Blog section         | `/`, `/blog/`                                                          |
| Call to action       | Nearly every page, at the bottom                                       |
| Career benefits      | `/career/`                                                             |
| Career hero          | `/career/`                                                             |
| Contact section      | `/contact/`, including the form fields                                 |
| Customers            | `/`, inside the hero, and `/pricing/`                                  |
| Features section     | `/`, `/features/`                                                      |
| Features section two | `/features/`                                                           |
| Home hero            | `/`                                                                    |
| How it works         | `/`, `/features/`                                                      |
| Integration section  | `/`, `/integration/`                                                   |
| Location             | `/`, `/company/`                                                       |
| Office locations     | `/contact/`                                                            |
| Our values           | `/company/`                                                            |
| Pricing section      | `/`, `/pricing/`, including the plans and the **Comparison** table     |
| Team                 | `/`, `/company/`                                                       |
| Why us               | `/`, `/features/`                                                      |
| Why us two           | No page shows it                                                       |

The FAQ and testimonials on other pages, such as `/pricing/`, come from the **FAQ page** and **Testimonials page** documents.

### Site-Wide Content
- **Menus:** one document per language. **Header menu** has the dropdowns and mega menus. **Footer column one** and **Footer column two** are the footer columns. **Footer bottom links** is also there, but this theme's footer doesn't show it.
- **Interface labels:** one document per language, with buttons, labels, form messages, your address, email, and phone (**Contact Info**), and footer copy (**Footer**).
- **Site settings:** below the languages, one for the whole site. It holds the site title, URL, logo, SEO, forms, the header button, the sticky header, the newsletter, smooth scroll, the Ask AI links, the theme credit, social links, and analytics tags. A value here wins over the same value in `config.toml`.

Site settings apply when the site builds, so they don't change as you type, and click-to-edit doesn't reach them. Stella has one header and one footer, so there are no layout options to choose.

### Plans And Attributes
At the time of writing, Sanity's free plan allows 2,000 attributes, one for each distinct field path in your content.

Stella's demo content, with its images, measured 780 on a real project, so it fits well inside the limit. See [Sanity's pricing](https://www.sanity.io/pricing) for current plan limits.

### Online Preview
Click-to-edit and draft preview are built to run on your own computer, with `npm run dev:all`. To use them online, you need a second copy of the site running as a small Node.js server. A static host can't do this. Without one, editors online can still edit in the Studio's forms and publish. See [Sanity](../sanity/).

### What We Tested
**With no Sanity project:**

- The site built from the demo content, in all three languages, against the Astro edition's pages.
- The dev server.
- `npm run setup -- --dry-run`, which shows the steps and changes nothing.
- The schema check and a build of the Studio.
- The preview server on our own computer, where every page matched the built site's text.
- A fresh unzip, installed, checked, and built.
- Adding and removing a language in the demo content.

**With a real Sanity project, in Chromium, on `localhost`:**

- Importing all the demo content and images: every document matched the demo content, and the schema check passes.
- A static build from the project: all 159 pages matched the build from the demo content, apart from the images themselves. Every image answered from Sanity's CDN.
- The Studio and Live preview, with `npm run dev:all`, logged in with a test token and not a person's login. Clicking a heading on an inner page opens its field. A title was changed in English and in Arabic, where the field runs right to left. It showed as a draft in the preview only and went live on **Publish**. Both titles were then restored the same way.

**Not tested:**

- `npm run setup` itself. The test project was made with the same Sanity commands.
- A person's own login to the Studio.
- Clicking an image, editing menus, labels, or Site settings, and adding a document in the Studio. A sample of titles was edited, not every field.
- Adding or removing a language in a real project.
- The preview server with a real project, so drafts and the draft cookie there.
- A Studio on `*.sanity.studio`.
- A webhook.
- Any online host.

### What Stays In Code
These change how the site is built, not what it says:

- The page routes and the order of sections on a page: `src/pages/[...lang]/`.
- Section and component design, colors, type scale, and fonts.
- Decorative images named in components, such as `hero-bg.png`, `about/image-shape.png`, and `404.svg`. Replace the file in `src/assets/images/`.
- The list of languages: `src/config/language.json`.
- Favicons, and the language settings and collection folder names in `config.toml`.
- Which sections and fields exist. To add a field, see `SKILLS.md`.

### Do It With AI
```text
I want to change [WHAT] on [PAGE ADDRESS] in the Stella Sanity edition. Tell me which Studio document
and field holds it, and whether other pages share it. If it needs a new field, follow the "Add a field"
skill in SKILLS.md. Don't print or change anything in .env. Then run npm run sanity:validate and
npm run astro-check and tell me the results.
```