wedding-invite-starter-kit

A single page wedding invite in a black tie style: a cover with a monogram, your story, a countdown, the day’s schedule with Google Maps buttons, a photo gallery, and an RSVP form. It is plain HTML, CSS and JavaScript, MIT licensed, with no database, no backend and no build step. The audience is a couple who wants their invite online and has no intention of learning web development to get there. The placeholder content in the repository belongs to a fictional couple, Emma and James, and every part of it is there to be replaced.

The kit splits the work in two. An AI assistant, Claude Code or Codex, does the technical steps: installing what is missing, publishing the site, fixing whatever breaks later. A visual editor running on your own computer does the design. Two guides in the repository cover them in that order, AI-SETUP.md then HOW-TO-USE-THE-EDITOR.md.

What it does not do

It cannot collect an RSVP by itself. The site is static, so by default the form opens the guest’s email app with the message already written, to the address set as COUPLE_EMAIL in js/main.js. That works everywhere and costs the guest one extra step. Automatic collection means a third party: the README documents Formspree, free up to 50 submissions a month, and Google Forms or Tally, and it names the exact block in js/main.js to delete when you switch.

It is not private. index.html ships with <meta name="robots" content="noindex">, so it stays off Google, and anyone holding the link can still read the page. The README says to keep home addresses and phone numbers off it.

It ships no photos. assets/img/ is empty. The six gallery images are Unsplash placeholders under a free licence, meant to be swapped for yours before anyone sees the page.

Nothing checks your invite for you. There is no test suite and no validator. What the kit ships instead is a manual checklist, which is listed below.

Install

Signed into GitHub, use the green Use this template button on the repository page rather than Fork, which gives you a clean independent copy. Then hand the project to your assistant using the first message in AI-SETUP.md.

To run it by hand:

python3 -m http.server 8000     # preview the site at localhost:8000

cd editor && npm install && cd ..   # once
python3 editor/server.py            # the visual editor at 127.0.0.1:8767/editor/

Requirements are a GitHub account, git, Python 3 and Node.js v20 or higher. Python 3 is already on every Mac. On Windows, the “Add python.exe to PATH” box during setup is easy to miss and is the usual reason a command is not found afterwards.

How it works

index.html holds all the content: names, text, times, venues, photo sources. css/style.css holds the design, with the palette and the fonts at the top in :root. js/main.js holds the countdown, the animations and the RSVP behaviour, including WEDDING_DATE. Every file carries CUSTOMIZE comments marking the spots meant to be changed. css/edited.css is written by the editor and is not for hand editing.

The editor in editor/ is GrapesJS, open source, served by a local Python script that writes to your real files. No account, no subscription, nothing stored on somebody else’s server. GrapesJS was chosen because it edits an existing site in place; the README explains why Webstudio, Framer and Webflow were passed over, which comes down to either rebuilding the design from a blank page or being tied to that company’s hosting.

Hosting is Cloudflare Pages, by dragging the project folder into the dashboard, or GitHub Pages, from Settings, Pages, branch main, folder root. After that:

./scripts/publish.sh "Updated the schedule"

commits and pushes, showing what changed and asking before it does anything. The site redeploys in about a minute. One trap the README calls out: if the published site loads with no styling at all, add an empty .nojekyll file at the root, because GitHub Pages silently drops folders whose name starts with an underscore.

Before you send it to guests

The checklist in the README, run by hand:

• Opened on a phone, not only on a laptop
• Every Maps button goes to the right place
• The RSVP actually reaches you, tested by sending yourself one
• Names, dates and times checked twice
• Link sent to someone outside the wedding, to see if it reads with zero context
• No home address or private phone number on the page
• noindex still in place, unless you want the site findable

A finished example

beatrice-e-edoardo is a completed invite built with this kit, published at nerln.github.io/beatrice-e-edoardo.

Repository

github.com/nerln/wedding-invite-starter-kit