Issue Form Generator

Design GitHub issue forms with a graphical editor and get the YAML as you type. Runs entirely in the browser as a static site on GitHub Pages.

Features

• Split view: guided editor on the left, live YAML and a GitHub-style preview on the right (resizable).
• Several templates at once: switch between them with tabs, set custom file names to control their order, and download everything as a zip with the .github/ISSUE_TEMPLATE/ folder structure.
• Template chooser (config.yml): allow or disable blank issues, add contact links, preview the chooser page.
• Guided element creation: click Add element, pick a type, then configure it step by step (Basics → Defaults / Options / File types → Validation).
• All element types: markdown, input, textarea, dropdown, checkboxes, upload, plus all top-level keys (name, description, title, labels, assignees, projects, type).
• Drag & drop reordering, duplicate, delete with undo.
• Validation against GitHub's form schema (duplicate ids, missing labels, dropdown defaults with "None", …).
• Import existing templates and config.yml (paste or upload several files).
• Starter templates: bug report, feature request, documentation.
• Auto-save in the browser (localStorage). Nothing is sent to a server.
• Light, dark and system color scheme.
• Copy or download a single file, or all files as a zip.

Tech stack

React · TypeScript · Vite · Mantine · Zustand · dnd-kit · yaml · JSZip · Vitest

Development

Requires Node.js (version in .nvmrc).

npm install
npm run dev          # start dev server
npm test             # unit tests
npm run lint         # ESLint
npm run typecheck    # TypeScript
npm run format       # Prettier
npm run build        # production build in dist/

Commit messages must follow Conventional Commits (checked by a git hook and in CI), because they determine the next version. See CONTRIBUTING.md.

Project structure

src/
├── lib/              # framework-free logic: model, YAML generation/import, validation, files & zip
├── store/            # workspace store (persisted to localStorage) and hooks
├── components/
│   ├── editor/       # template tabs, form settings, elements, step-by-step dialog, config.yml editor
│   └── output/       # YAML view, form and template chooser previews, validation summary
├── App.tsx           # layout (split view / mobile tabs)
└── main.tsx          # providers (Mantine, modals, notifications, code highlighting)

Documentation

Detailed developer documentation lives in docs/: architecture, data model, YAML generation and validation, state, UI components, development guide, releasing and deployment.

Versioning

The project uses Semantic Versioning. Releases are automated with release-please: it derives the next version from Conventional Commits, maintains a release pull request with the updated CHANGELOG.md, and creates the tag and GitHub release when that pull request is merged. Details: docs/releasing.md.

Deployment (GitHub Pages)

The workflow in .github/workflows/deploy.yml builds and deploys on every push to main.

One-time setup in the repository settings:

1. Settings → Pages → Build and deployment → Source: GitHub Actions.
2. On the GitHub Free plan, Pages is only available for public repositories.
3. Settings → Actions → General → Allow GitHub Actions to create and approve pull requests (for release-please).

The build uses relative asset paths, so it works for both <user>.github.io and <user>.github.io/<repo>.

Security & dependency updates

• .github/dependabot.yml opens weekly, grouped update PRs for npm packages and GitHub Actions.
• Enable Dependabot alerts and Dependabot security updates in Settings → Advanced Security (free for public repositories).
• Optional: enable CodeQL → Default setup in the same place for code scanning (free for public repositories).
• Pull requests run CI (format, lint, typecheck, tests, build), a commit message check and a dependency review.

See docs/deployment.md for the full settings checklist.