# Tina Edition
## 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.
1. Unzip the theme and open a terminal in its folder.
2. Run `npm ci`, then `npm run dev`.
3. Open `http://localhost:4321/admin/`. If Tina asks, click **Enter Edit Mode**.
4. Open the menu at the top left, pick an entry, a language folder, and a file. The page opens beside a live preview.
5. Click text in the preview, and its field opens. The preview updates as you type.
6. 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](../what-is-editable-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](../../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](https://tina.io/pricing) for current plans and limits.
Run the guided setup:
```bash
npm run setup:tina
```
1. Put the unzipped folder on GitHub as your own repository.
2. Create an account at [app.tina.io](https://app.tina.io), then create a project and pick your repository.
3. Add your site's address and `http://localhost:4321` to the project's **Site URLs**.
4. Copy the **Client ID** and a read-only content token into the setup. It saves them in `.env`.
5. Add the same two values to your host as environment variables, and deploy again.
6. 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:
```bash
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
```text
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.
```