# Edit your first schema

<PageBadges />

import { Callout } from "zudoku/ui/Callout"
import { Stepper } from "zudoku/ui/Stepper"

## Live editing workflow

This page assumes you already ran `serve` and have the live preview open at `http://localhost:3030`.

<Stepper>

1. Enter form schema edit mode:

   ```ansi
   form0(server)> schema edit
   ```

   {/* prettier-ignore */}
   <Callout type="caution" title="Editor required">

   Schema edit mode launches your editor. Make sure `EDITOR` or `VISUAL` is set:

   - **Linux/macOS**: Add `export EDITOR=nano` to `~/.bashrc`, `~/.zshrc`, or `~/.profile`, then restart your terminal or run `source ~/.bashrc`.
   - **Windows (PowerShell)**: Run `$env:EDITOR = "notepad"` for the current session, or add it to your PowerShell profile (`$PROFILE`).
   - **Windows (CMD)**: Use `set EDITOR=notepad` for the session, or set it permanently via _System Properties → Environment Variables_.

   To use VS Code, set `EDITOR` to `code --wait`, not `code`. Without `--wait`, the CLI continues before you save and your changes are lost. Other GUI editors need the same flag (e.g., `subl -w`, `zed --wait`).

   </Callout>

1. Preview form schema:

   ```ansi
   form0(server,schema)> preview
   ```

1. Add a _NumericField_ after a field of your choice, using the row number shown at the beginning of each line (e.g., `2` in `2 | TextField ...`) in the form schema preview:

   ```ansi
   form0(server,schema)> add NumericField after <id>
   ```

   The CLI opens a JSON template in your editor. Keep the defaults and update a few fields, for example:

   ```json
   {
     "data_name": "quantity",
     "label": "Quantity",
     "min": 1,
     "max": 100,
     "format": "integer"
   }
   ```

1. Add a _CalculatedField_ after the `quantity` field you have just created:

   ```ansi
   form0(server,schema)> add CalculatedField after <new-id>
   ```

   Update the display style and calculation expression:

   ```json
   {
     "data_name": "total",
     "label": "Total",
     "display": { "style": "numeric" },
     "calculate": "$quantity * 2"
   }
   ```

1. Save and close your editor.

   The form schema is saved and validated. Any warnings will be printed in the CLI.

1. Check the live preview.

   Your new fields should appear immediately in the browser.

1. Exit form schema edit mode:

   ```ansi
   form0(server,schema)> q
   ```

   And stop the dev server:

   ```ansi
   form0(server)> serve stop
   ```

</Stepper>