What Is Editable In Sanity

What Is Editable In Sanity

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

Run npm run dev:all, open the Studio at http://localhost:3333, and log in with your Sanity account. Content has one entry per language, then Site settings. Sanity has the full guide, including npm run setup for your first project. Everything below exists in English, French, and Arabic, and each language has its own documents.

Without a Sanity project, the site runs from the bundled demo content, and you can try the theme with npm run dev before you set anything up.

Where Each Page Is Edited

All locations are under Content, then your language. The last column lists the rows you can add under Sections on this page, such as Hero Section or CTA Section. Each row changes one section for this page only, and a field you leave empty keeps the section’s own content.

Each document’s page fields sit with its other fields. Meta Description is on most pages, Meta Title on some, and Draft on most documents (not the homepages). Header Layout, Footer Layout, and Contact Dock are fields only on Home 2: Studio and Home 3: Photographer. The site-wide header and footer layouts are in Site settings > Settings > Layout. Robots, Exclude From Sitemap, Exclude From Search, and Exclude From AI are only on Other pages.

Body text works like a document editor. It also holds the theme’s components as blocks: buttons, callouts, notices, steps, tabs, code tabs, file trees, accordions, cards, image lists, testimonials, and videos. Keyboard key is a text mark.

New Entries

Use the + button in Authors, Journal posts, Other pages, Projects, Services, and Team members. The header menu doesn’t pick up a new project or service, so add its link in Menus. See Menus.

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.

Sections

Each section is one document per language, under Sections. Open it and edit its fields. Every page that shows it uses this content, unless the page changes it under Sections on this page.

To hide a section, use its Enable field. To change its look, use Options > Layout, on the section or on a page’s row. /elements/ previews every layout. The hero and the CTA also have Options > Webgl (dots, flow, or none) for an animated background.

Site-Wide Content

Settings holds the header and footer layouts (Layout), Color Mode, Search, Smooth Scroll, Animation, Cookie Consent, Theme Credit, Page Actions, Contact Dock, Contact Info, Navigation Button, Copyright, Subscription, Contact Form Action, and Contact Form Provider.

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, so change them in their form. Click-to-edit also doesn’t reach option values, links, classes, icon names, or images set as a CSS background.

The Menus Document

In Header menu, turn on Has a dropdown and add Dropdown items for a dropdown. A dropdown item with its own items opens a flyout, as deep as you need. Turn on Is a mega menu for a mega menu, then add Mega menu columns, a Mega menu card, and a Mega menu bottom bar:

• In the card, Project is the file name of a project, such as ceramic-forms. Empty uses the first featured project.
• In the bottom bar, each of the Quick links can have an Action: search turns it into the site search button, and Key hint is shown beside it.

Some fields do nothing in Margo. They are kept so the menus have the same shape as in other themes:

• Order doesn’t move an item. Items show in the order of the list, so drag them to reorder.
• Icon on mega menu links doesn’t show. No menu link has an icon.
• Description and Items on the card don’t show. The card shows the project’s cover, title, and year.

Turn off Show to hide an item without deleting it. Footer menu is in the same document: each column has a Column heading and its Column links.

Numbers In Arabic Text

Body text has a Left to right mark, next to Strong and Emphasis in the editor’s toolbar. Select a number with its unit inside Arabic text, such as -3 °C, and apply the mark, so it keeps its order.

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. Margo’s demo content, with its images, measured 1,367 in our test project, read from Sanity’s own count after importing it and using Live preview. It fits, with 633 left. You can see your own number in Sanity’s project settings, under Usage.

Translating into another language uses none of it, and neither does adding more posts, projects, or pages. Live preview adds a few, and so does cropping images. New fields in the schema add more. Sanity’s pricing page has the current limits.

Online Preview

Click-to-edit and draft preview work 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 drafts can’t be shown from static files. A static host can’t do this, and Netlify and Vercel functions aren’t supported. See Sanity for the steps. Without a preview server, editors online can still edit in the Studio’s forms and publish.

What We Tested

On this theme: the site built from the bundled demo content, checked page by page against the Astro edition in the three languages, the demo content imported into a real Sanity project and the site built from it, editing in Live preview in English and Arabic, and the Studio schema checked with npm run sanity:validate.

Not tested on this theme:

• npm run setup all the way through.
• Any online host, a deployed Studio, a preview server online, or a webhook from end to end.

Try these on your own project before you rely on them.

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.
• The list of languages: src/config/language.json.
• Favicons, the language settings, the collection folder names, and the layout switcher in config.toml.
• The list of sections and layouts shown on /elements/. Its labels and notes are editable.
• The AI crawler lists. The on and off switches are in Site settings.
• Which sections and fields exist. To add one, see SKILLS.md.

Do It With AI

I use the Sanity edition of Margo. Tell me where to edit [TEXT OR SETTING] in the Studio: the
language entry, the document, and the field. If it comes from a section document, say which pages
will change, and how to change it on one page only. Don't change any files, and don't print
anything from .env.