# What Is Editable In Sanity

## What Is Editable In Sanity

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

Run `npm run setup` once, then `npm run dev:all`, and open the Studio at `http://localhost:3333`. [Sanity](../sanity/) explains the setup. In the Studio, open **Content**, then a language. Every entry below exists in English, French, and Arabic, apart from **Site settings**, which is one for the whole site.

### Where Each Page Is Edited
Each row of **Sections on this page** changes one section for that page only. A field you leave empty keeps the section's own content. A page's title and search fields are at the top of its document.

| Address | Studio location | **Sections on this page** |
| ------- | --------------- | ------------------------- |
| `/` | **Homepages** > **Home 1** | None: edit its sections under **Sections** |
| `/home-2/` | **Homepages** > **Home 2** | Hero, Logos, Why, Integrations, Pricing, FAQ |
| `/home-3/` | **Homepages** > **Home 3** | Hero, Feature rows, Testimonials, Integrations |
| `/features/` | **Main pages** > **Features page** | Page header, Features |
| `/pricing/` | **Main pages** > **Pricing page** | Page header, Pricing, Logos, FAQ |
| `/about/` | **Main pages** > **About page** | Page header, Mission, Logos, Stats, Company values, Overview, Team, Testimonials |
| `/testimonials/` | **Main pages** > **Reviews page** | Page header, Testimonials |
| `/contact/` | **Main pages** > **Contact page** | Page header, Contact cards, Contact message |
| `/request-demo/` | **Main pages** > **Request a demo page** | Page header, Demo form, Demo reasons |
| `/faq/` | **Main pages** > **FAQ page** | Page header, FAQ |
| `/help/` | **Main pages** > **Help center** | Page header, Search, Help categories, Popular articles, Contact |
| `/status/` | **Main pages** > **Status page** | Page header, Status, Call to action |
| `/integrations/` | **Main pages** > **Integrations page** | Page header, Integrations catalog |
| `/integrations/` + entry | **Integrations** | None |
| `/solutions/` | **Main pages** > **Solutions page** | Page header, Solutions list, Comparison, Testimonials |
| `/solutions/` + entry | **Solutions** | Page header, Comparison, Feature rows, Steps, Testimonials, FAQ, Call to action |
| `/templates/` | **Main pages** > **Templates page** | Page header, Templates catalog, Call to action |
| `/templates/` + entry | **Templates** | None |
| `/careers/` | **Main pages** > **Careers page** | Page header, Company values, Careers list, Benefits, Call to action |
| `/careers/` + entry | **Jobs** | Salary range only |
| `/blog/` | **Main pages** > **Blog page** | Page header |
| `/blog/` + post | **Blog posts** | None |
| `/changelog/` | **Main pages** > **Changelog page** | Page header |
| `/changelog/` + release | **Releases** | None |
| `/privacy-policy/`, `/terms-conditions/`, `/cookie-policy/` | **Legal or text pages** | Page header, Content page |
| `/login/`, `/signup/`, `/forgot-password/` | **Main pages** > **Log in**, **Sign up**, **Forgot password** | Form, Footer link, Aside |
| `/elements/` | **Main pages** > **Layout gallery labels** | Page header, Labels |
| 404 | **Sections** > **Not found section** | None |

Category, tag, and page lists are built from your posts and releases. Use the **+** button on **Authors**, **Blog posts**, **Releases**, **Integrations**, **Jobs**, **Legal or text pages**, **Solutions**, or **Templates** to add an entry.

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.

<Aside type="note">
  Only the three homepages pick a layout in the Studio: **Home 2** and **Home 3**
  have **Header Layout** and **Footer Layout**, and **Home 1** has **Footer
  Layout**. Other pages use the `default` header and footer.
</Aside>

### Sections
Under your language, **Sections** has one document per section. Its fields are the default on every page that shows the section. **Layout** on the section, or on a page's row, picks its look.

| Section | Where it appears |
| ------- | ---------------- |
| Hero, Integrations | `/`, `/home-2/`, `/home-3/` |
| Logos | `/`, `/home-2/`, `/about/`, `/pricing/`, and inside the sign-up hero on `/home-3/` |
| Why | `/`, `/home-2/` |
| Features | `/`, `/features/` |
| Overview | `/`, `/about/` |
| Testimonials | `/`, `/home-3/`, `/about/`, `/testimonials/`, `/solutions/`, solution pages |
| Pricing | `/`, `/home-2/`, `/pricing/` |
| FAQ | The three homepages, `/features/`, `/pricing/`, `/faq/`, solution pages |
| Stats panel, Solution tabs, Latest posts | `/home-2/` |
| Proof | `/home-2/`, `/pricing/` |
| Feature rows | `/home-2/`, `/home-3/`, solution pages |
| Intro, Bento, Control panel | `/home-3/` |
| Steps | `/home-3/`, solution pages |
| Comparison | `/home-3/`, `/solutions/`, solution pages |
| Feature collage, Feature summary, Numbers | `/features/` |
| Benefits | `/features/`, `/careers/` |
| Plan compare | `/pricing/` |
| Mission, Stats, Team | `/about/` |
| Company values | `/about/`, `/careers/` |
| Contact cards, Contact message | `/contact/` |
| Demo form, Demo reasons | `/request-demo/` |
| Integrations catalog, Integration detail | `/integrations/`, each integration page |
| Templates catalog, Template detail | `/templates/`, each template page |
| Solutions list | `/solutions/` |
| Careers list, Career detail | `/careers/`, each job page |
| Blog posts, Related articles | `/blog/`, under each post |
| Release notes | `/changelog/` |
| Help categories, Popular articles | `/help/` |
| Status | `/status/` |
| Call to action | Every page except the log-in, sign-up, and password screens |
| Not found | The 404 page |

### Site-Wide Content
- **Menus** (under your language): **Header menu** and **Footer menu**. Turn on **Has a dropdown** and add **Dropdown items**, or turn on **Is a mega menu** and add **Mega menu columns**, **Mega menu card**, and **Mega menu bottom bar**. **Show** hides an item without deleting it.
- **Interface labels** (under your language): buttons, labels, form messages, and footer copy.
- **Main pages** (under your language): the announcement bar, the cookie banner, and the dashboard's sample data.
- **Site settings** (below the languages): **Site** (title, Base URL, logo), **SEO**, **Settings** (forms, search, smooth scroll, cookie banner, announcement bar, page action links, copyright, theme credit, contact info, newsletter, the header button and text link), **Opengraph**, **Head** (analytics tags), and **Social**.

**Site settings** apply when the site builds. While `npm run dev:all` runs, they apply when you publish them, and the page reloads. They don't change as you type, and click-to-edit doesn't reach them.

### Plans And Attributes
At the time of writing, Sanity's free plan allows 2,000 attributes per dataset. This theme's demo content, with its images, measured 1,803 of them on a real project, after opening Live preview, which leaves 197. That is close to the limit, so watch it. New text in fields the demo content already fills uses no more. Filling a field it leaves empty, or adding a new field, can use more. [Sanity's pricing page](https://www.sanity.io/pricing) has the current limits.

### Online Preview
Click-to-edit and draft preview run on your own computer, with `npm run dev:all`. To use them online, your editors need a second copy of the site running as a small Node.js server, because a static host can't show drafts. See [Sanity](../sanity/). Without a preview server, an online Studio still edits and publishes everything: only Live preview needs one.

### What We Tested
**With a real Sanity project, on `localhost`:**

- `npm run setup` creating the project, and importing the sample content: all 379 documents matched it field by field, and the schema check passes.
- A static build from the project: all 438 pages and text files match the build from the sample content, apart from image addresses and random IDs. Every image address answered from Sanity's CDN. A blog post whose image is an SVG uses that image from the CDN as its social image. With sample content, it uses a generated card or the shared image.
- `npm run dev:all` starting the site and the Studio, with an editor token standing in for the Studio login. On the About page, in English and in Arabic, clicking the heading in Live preview opened its field, right to left in Arabic. The change showed in the preview as a draft and not to a visitor, and reached a visitor after **Publish**. We then put the text back.
- Clicking the first word of a heading or statement opened its field on 13 pages in the three languages. With draft preview on, all 263 pages kept the invisible edit markers out of links, including share links, and out of `<head>`.

**Not tested:** Sanity's own login screen, publishing an edit in French, clicking every kind of text and image, editing menus, labels, or Site settings in the Studio, a site rebuilt after an edit, `npm run build:preview` and `npm run start:preview` with a project, any online host, a deployed Studio, a webhook, and Netlify or Vercel functions, which this edition doesn't support.

### What Stays In Code
- The page routes and the order of sections on a page: `src/pages/[...lang]/`
- Section and component design, colors, type scale, and fonts
- The list of languages: `src/config/language.json`
- Favicons, and the language settings, layout switcher, and blog folder name in `config.toml`
- The lists of AI crawlers: `src/lib/utils/aiCrawlers.ts`. The 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 use the Sanity edition of Taskly. I want to change [WHAT] on [PAGE]. Tell me where to find it in
the Studio: the language, the group, the document, and the field. Say whether it belongs under
Sections on this page or in the section's own document, and whether I need to rebuild the site after
I publish. If it can't be done in the Studio, say which file to change. Don't change any files or
print anything from .env.
```