A browser-based graphical editor for recipes that follow the Open Recipe Standard. The public site is planned at food-for-eating.com. On load it fetches the JSON Schema and the minimal example from GitHub (tag v1.0.0 by default, with a fallback to main if the tag is not available yet).
npm install
npm run devOpen the URL printed in the terminal (usually http://localhost:5173).
npm run build
npm run previewEnvironment variables (Vite: prefix with VITE_):
| Variable | Purpose |
|---|---|
VITE_ORS_GITHUB_REF |
Git ref for raw GitHub URLs (default: v1.0.0). |
VITE_ORS_SCHEMA_URL |
Override schema URL entirely. |
VITE_ORS_EXAMPLE_MINIMAL_URL |
Override minimal example URL. |
VITE_ORS_EXAMPLE_COMPLETE_URL |
Override complete example URL. |
Example .env.local:
VITE_ORS_GITHUB_REF=main- Loads
schemas/open-recipe.schema.jsonandexamples/minimal-recipe.jsonfrom the published repository. - Simplified editing: the form is limited to name, notes, ingredients (including substitutions), and steps. Other keys from a loaded file (yields, oven, source, extensions, etc.) are kept in the background and round-trip on save; you are not asked to edit them.
- Auto on save: if
recipe_uuidis missing, one is generated;$schemais set from the schema’s$idwhen available; emptynotesarrays are omitted. - Validates the merged document with JSON Schema (draft 2020-12) via Ajv.
- Save JSON (native save dialog when supported, otherwise download) and load from disk.
- Optional samples: minimal and complete recipes from the same Git ref / fallbacks.
Recipes you export from this editor can be shared in the Open Recipe Library — a community-maintained collection of Open Recipe Standard JSON.
- Use Save here to write a valid
.jsonfile. - Add one recipe per file under
recipes/in a fork of OpenRecipeLibrary (nested folders are fine). - Open a pull request against the default branch.
For full steps and conventions, see the library README / contributing section. For how files are organized on the generated library branch and normalization rules, see FILESYSTEM-LAYOUT.md.
The layout uses a restrained palette, IBM Plex Sans, and a subtle grid background with light motion—aligned with a calm editorial tool rather than a generic “AI product” look. Chamaac-style components are represented by the same stack (Tailwind, motion, shadcn-style primitives) and a minimal grid treatment instead of heavy shader chrome.