Tina Edition

Files: tina/, .env, src/content/, src/config/, src/i18n/ · Skill level: Beginner

The Tina edition adds a visual editor to the theme. Click text on the page, type, and save. Tina reads and writes the same content files the site is built from, so there is no database, and the live site is still static files.

Edit On Your Computer

You don’t need a Tina account or a password for this.

Unzip the theme and open a terminal in its folder.
Run npm ci, then npm run dev.
Open http://localhost:4321/admin/. If Tina asks, click Enter Edit Mode.
Open the menu at the top left, pick an entry, a language folder, and a file. The page opens beside a live preview.
Click text in the preview, and its field opens. The preview updates as you type.
Click Save. Tina writes the change to the file on your computer.

The menu covers all content in every language, including menus, the footer, site settings, and interface labels. Arabic fields read right to left.

What Is Editable In Tina lists each entry for this theme, and what stays in code.

Section Defaults And Page Forms

A section’s content comes from Section defaults, and every page that shows the section uses it. To change a section on one page only, open that page’s form and fill in the section’s block there.

Clearing A Field Hides That Text

In a page’s form, a field you never filled uses the section default. A field you clear is different: Tina saves it empty, and that hides the text or image on that page.

Tina can’t bring the default back by itself. To restore the text, do either of these:

Copy the text from Section defaults into the field.
Open the page’s content file in a code editor and remove the empty line for that field, such as title: "".

Use the Enable field to hide a whole section.

Publish Your Changes

Saving on your computer changes files on your computer. To publish, send them to your own Git repository, and your host rebuilds the site, or run npm run build and upload the dist/ folder. If you are deploying for the first time, see Deployment.

Edit Online With Tina Cloud

This is optional. It lets you or a client edit from any browser, using your own Tina Cloud project. You need a GitHub account and a host that builds from GitHub, such as Netlify, Vercel, or Cloudflare Pages. See Tina’s pricing for current plans and limits.

Run the guided setup:

npm run setup:tina

Put the unzipped folder on GitHub as your own repository.
Create an account at app.tina.io, then create a project and pick your repository.
Add your site’s address and http://localhost:4321 to the project’s Site URLs.
Copy the Client ID and a read-only content token into the setup. It saves them in .env.
Add the same two values to your host as environment variables, and deploy again.
Open /admin/ on your live site and log in.

To see what is still missing, run npm run setup:tina -- --check.

Saving online: Tina Cloud commits the change to your GitHub repository, and your host rebuilds the site. This usually takes a minute or two.
Online there are forms only. The live preview and click-to-edit need npm run dev on your computer.
If you skip this, your site still builds and works normally, and /admin/ on it says that online editing is off.
Keep tina/tina-lock.json committed. Tina Cloud reads your content structure from it. Run npm run dev once after you change the forms, then commit it.

Environment Variables

.env.example lists every variable. All are optional: without them the site builds, and editing on your computer works.

Variable	Secret?	What it does
`PUBLIC_TINA_CLIENT_ID`	No	Your Tina Cloud project
`TINA_TOKEN`	Yes	The read-only content token, used at build time. Never put it in a tracked file
`TINA_BRANCH`	No	The Git branch your host builds from, if it isn’t detected
`PUBLIC_TINA_ADMIN_ORIGIN`	No	Only if `/admin/` is served from another address than the site
`SITE_URL`	No	Your site’s address. It wins over `baseUrl` in `config.toml`
`PORT`	No	The website’s port. The default is 4321
`TINA_GRAPHQL_PORT`	No	Tina’s local content API port. The default is 4001
`TINA_DATALAYER_PORT`	No	Tina’s local data layer port. The default is 9000

.env is ignored by Git. Set the values you need in your host’s settings.

Keep Your Content Safe

When Tina saves a file, it removes comments and rewrites Markdown in its own style, such as * in place of -. Your words and values stay. Comment text usually stays as the description under its field.

After you change content files by hand, run:

npm run tina:audit

It tells you if a save would lose anything.

Troubleshooting

What you see	What to do
Text has gone from one page after an edit	The field was cleared. Copy the text back from Section defaults
`/admin/` on the live site says online editing is off	Add `PUBLIC_TINA_CLIENT_ID` and `TINA_TOKEN` to your host, then deploy again
The build fails after adding the variables	Check both values come from the same project, and that `tina/tina-lock.json` is in your repository
Login fails or loops	Add your site’s exact address, with `https://`, to Site URLs
A change is saved but isn’t live	Wait for the rebuild, and check the deploy log on your host

Do It With AI

I added a new field called [FIELD] to [CONTENT FILE]. Run npm run tina:generate so the editor
offers it, and give it a plain-language comment in every language. Don't change any other field.
Then run npm run tina:audit and npm run astro-check and tell me the results.