# 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 1**. The copy is under **Sections** | No                                         |
| `/home-two/`                                             | **Homepages > Home 2**. The copy is under **Sections** | No                                         |
| `/about/`                                                | **Main pages > About page**                           | No                                          |
| `/services/`                                             | **Main pages > Services page**                        | Yes, but the row does nothing. See below    |
| `/services/{slug}/`                                      | **Services**, one document per entry                  | No                                          |
| `/projects/`                                             | **Main pages > Projects page**                        | No                                          |
| `/projects/{slug}/`                                      | **Projects**, one document per entry                  | No                                          |
| `/team/`                                                 | **Main pages > Team page**, with the members in its **List** | Yes, the Team section                |
| `/pricing/`                                              | **Main pages > Pricing page**                         | No                                          |
| `/faq/`                                                  | **Main pages > FAQ page**                             | No                                          |
| `/contact/`                                              | **Main pages > Contact page**                         | No                                          |
| `/blog/`                                                 | **Main pages > Blog page**                            | No                                          |
| `/blog/{slug}/`                                          | **Blog posts**, one document per entry                | No                                          |
| `/privacy-policy/`, `/terms-conditions/`, `/components/` | **Other pages**                                       | No                                          |
| The 404 page                                             | **Interface labels**, under **Not Found**             | No                                          |

**Main pages > Testimonials** holds the reviews, and blog authors are under **Authors**.

The heading of the `/services/` list is **Badge** and **Title** on **Services section two** under **Sections**, and the list itself is your **Services**. So a change on the Services page's **Sections on this page** row has no effect. On any page other than the Team page, a change to a section changes it on every page that shows it.

Techbyte has no **Page options** group. Page documents hold the title, the meta description, and the page's banner text. Some options have no field, 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. Each language has its own copy, so change every language.

| Section                         | Where it appears                                     |
| ------------------------------- | ---------------------------------------------------- |
| About section                   | `/`, `/about/`                                       |
| About section two               | `/home-two/`                                         |
| Blog section                    | `/`                                                  |
| Blog section two                | `/home-two/`                                         |
| Brand logos                     | `/`, `/about/`, `/services/`                         |
| Brand logos two                 | `/home-two/`                                         |
| Contact section                 | Above the footer on `/`, `/projects/`, `/services/{slug}/` |
| Contact section two             | `/contact/`, including the form fields               |
| Cooperation steps section       | `/`                                                  |
| CTA gallery section             | Nearly every page, above the footer                  |
| CTA section                     | `/team/`                                             |
| CTA section two                 | `/faq/`                                              |
| CTA video section               | `/home-two/`                                         |
| CTA video section two           | `/about/`                                            |
| Customized technologies section | `/home-two/`, `/pricing/`, `/services/`              |
| FAQ section                     | `/`                                                  |
| FAQ section two                 | `/faq/`                                              |
| Features grid                   | `/`, `/about/`                                       |
| Features grid two               | `/home-two/`, `/about/`                              |
| Hero section                    | `/`                                                  |
| Hero section two                | `/home-two/`                                         |
| Mission vision section          | `/home-two/`                                         |
| Popular skills section          | `/`                                                  |
| Pricing section                 | `/pricing/`, including the plans                     |
| Projects section                | `/`, and the heading on `/projects/`                 |
| Projects section two            | `/home-two/`                                         |
| Services section                | `/`                                                  |
| Services section two            | `/home-two/`, and the heading on `/services/`        |
| Stats section                   | `/`, `/home-two/`, `/about/`, `/services/{slug}/`    |
| Stats section two               | `/team/`                                             |
| Team section                    | `/home-two/`, `/about/`, `/team/`                    |
| Testimonial section             | `/`, `/about/`                                       |
| Testimonial section two         | `/home-two/`                                         |

**Card styles** are typed by hand in **Card Layout**, and for blogs in **Options > Layout**. A wrong word fails with no message, so use exactly one of these: features, `icon` or `number`; services, `horizontal` or `card`; testimonials, `card` or `cardWithSign`; blogs, `grid`, `horizontal`, `featured`, or `compact`.

A few fields do nothing, because no page reads them: **Badge** on CTA section and CTA section two; **Badge** and **Description** on CTA video section; **Description** on CTA video section two and Customized technologies section; **Image List**, **Video**, **Decorative Shape**, **Decorative Shape Alt**, and **Sub Title** on Faq section two; **Enable** on the two Features grids; **Card Layout** on the two Projects sections; and **Decorative Image** and **Decorative Image Alt** on Testimonial section two.

### Site-Wide Content
- **Menus:** one document per language. **Header menu** has the dropdowns and the mega menu. **Footer 1 links** is the first footer, **Footer 2 links** the second, and **Legal links** the copyright row in both. In the footer, **Show** doesn't hide a link, so delete the row instead.
- **Interface labels:** one document per language, with buttons, labels, form messages, and footer copy (**Footer**).
- **Site settings:** below the languages, one for the whole site. It holds the site title, URL, logo, SEO, the AI files, forms, the Mailchimp form, the announcement, contact details, the header button, 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. Techbyte has two headers and two footers, and each page sets which one it uses in its file, so there is no field for it in the Studio.

### New Entries
Open **Authors**, **Blog posts**, **Other pages**, **Projects**, or **Services** under your language, and use the + button. Fill in **Title** and **File name**.

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, and on a real project with 15 test documents, which built with no broken pages.

### 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.

Techbyte's demo content, with its images, measured 920 on a real project, so it fits. New fields and uploaded images add to it. See [Sanity's pricing](https://www.sanity.io/pricing) for current plan limits.

### Online Preview
Click-to-edit and draft preview are made for 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 a real Sanity project:** `npm run setup` creating the project and importing the demo content, with all 211 documents then matching the bundled content field by field; the Studio's schema check; a real edit in Live preview with an editor token standing in for the Studio login, in English on `/about/` and in Arabic on `/ar/about/` with a right-to-left field: click the heading, its field opens, type, the draft shows in the preview and not to a visitor, press **Publish**, the visitor sees it, then put it back the same way; a click on the first word of the page heading on 23 pages in all three languages opening its field; 158 pages read in draft mode, with no click-to-edit markers in any link, share links included; a static build from the project, whose 159 pages and text files match the bundled build in all three languages once image addresses are set aside; all 370 image addresses in that build answering from Sanity's CDN; the preview refusing a bad or missing secret and a forged cookie, and a valid link setting a signed draft cookie; and the attribute count above.

**With no Sanity project:** installing from a clean copy of the folder; the site running and building from the bundled demo content, in all three languages, with the same 159 pages as the Astro edition; the 41 unit tests; the Studio's schema check and its build; the steps `npm run setup -- --dry-run` would take; adding and removing a language in the bundled demo content; a new entry with only a title, in every collection of the bundled demo content; `npm run dev:all` starting and stopping both servers; and every document's form in the Studio, in all three languages, opened in a browser against a local stand-in for Sanity's service, not Sanity itself, including typing in an Arabic field.

**Not yet tested on Techbyte, with a real project:** signing in through the Studio's login screen, saving an edit in French or in any field other than the two page titles above, click-to-edit on anything but page headings (images, menus, labels, the footer), the deep menu form in the Studio, changing Site settings in a project, and the language scripts on a project.

**Not tested at all:** `npm run build:preview` and `npm run start:preview` with a project, any online host for the preview server, a deployed Studio, webhooks, and a build on Netlify, Vercel, or Cloudflare Pages.

### 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]/`.
- Which header and footer a page uses, set in its file, such as `<Base headerLayout="header-2" footerLayout="footer-1">`. Without them, a page gets `header-1` and `footer-2`.
- Which version of a section a page shows, such as `HeroSection` or `HeroSectionTwo`.
- Section and component design, colors, type scale, and fonts.
- The list of languages: `src/config/language.json`.
- Favicons, the language settings, and the collection folder names in `config.toml`.
- The lists of AI crawlers: `src/lib/utils/aiCrawlers.ts`. Their on and off switches are in Site settings.
- Which sections and fields exist. To add one, see `SKILLS.md`.

### Do It With AI
```text
I want to change [WHAT] on [PAGE ADDRESS] in the Techbyte 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.
```