Everything the CMS can do, on one page.
Two audiences read this page. Prospects exploring the demo: keep it open in a second tab as you click around, so nothing feels like a mystery. BPD clients after go-live: this is your reference — bookmark it, come back when you need to remember a shortcut or a trick. Everything below is a live feature, not a screenshot.
What this demo is
BPD Academy is a fictional K-12 school site built by Bright Presence Digital to show what the platform delivers. When a real school signs with BPD, their site starts as a copy of this one — same design quality, same CMS, same legal scaffolding — and we swap in their logo, colors, copy, and photos. The handoff is days, not quarters.
Log in as Guest / Guest and you’ll see exactly what your team would see on day one of being a BPD client. Every field you click is editable. Every change you make is acknowledged by the server and rendered live. Then it resets when you refresh — because this demo has to stay clean for the next prospect.
Your first five minutes
-
1
Sign in
Open /admin/login. Enter
Guestin both fields. Hit Sign In. -
2
Read the sandbox banner
A tan ribbon appears at the top of every page: “You’re signed in as Guest. Every field is editable — type, rewrite, delete. Changes won’t persist; refresh to restore.” Nothing you do will affect real content.
-
3
Open any page in edit mode
From the admin dashboard, pick any of the page cards: Home, Academics, Faculty, Alumni, Athletics …. Clicking a card opens that page in edit mode — you’ll see gold dashed outlines around every field your team can edit.
-
4
Click a headline. Type. Click away.
The change saves automatically (watch for the small “Saved” toast in the bottom-right). No save button. No publish step. What you see is what a reader sees.
-
5
Toggle edit mode off
Bottom-right corner: the glowing EDITING button. Click it to switch back to reader view. Or press ⌘E / Ctrl+E from anywhere on the site.
Heads-up: on your first visit a brief coach tour appears in the bottom-right, walking you through click-to-edit, slash commands, and the brand kit. Esc or Skip tour dismisses it; it won’t show again in this tab.
Editing any text on a page
Inline editing is the heart of the platform. It replaces the admin-panel-with-text-fields experience of a typical commercial CMS.
How it feels
- Gold dashed outlines show what’s editable when edit mode is on.
- Click a field — it becomes a text cursor. Type.
- The save happens automatically, about a second after you stop typing (debounced). A small toast confirms.
- Press Esc to leave a field. Press Enter to commit a single-line field.
- Rich-text fields (paragraph bodies) accept ⌘B bold, ⌘I italic, and ⌘K to insert a link.
What’s NOT editable
Anything that’s structural on this demo — the global nav bar, the three-schools grid layout, the “Try the CMS” ribbon at the top — stays out of the editable surface by design. Real client sites ship with the same guardrails: a school can edit every headline, paragraph, staff bio, and news post without being able to break their own layout by accident.
Try it now
- Home page — in edit mode — try rewriting the hero headline.
- About page — in edit mode — rewrite the school’s mission.
- Upper School — in edit mode — change the principal’s name.
Rich text — bold, italics, headings, links
Paragraph and body fields accept formatting. Highlight any text in an editable paragraph (news body, Head of School letter, any content area) and a floating toolbar appears above your selection. It looks and behaves exactly like the toolbar in Google Docs.
Toolbar buttons
- B — bold the selection, or press ⌘B / Ctrl+B
- I — italic, or ⌘I / Ctrl+I
- U — underline, or ⌘U / Ctrl+U
- H2, H3, ¶ — turn the surrounding block into a section heading, subheading, or back to a regular paragraph
- 🔗 — insert a link (also ⌘K). Opens a link picker with two tabs: a searchable list of pages on your own site, and an External URL field.
- ⇤ — clear formatting from the selection
Why this beats a typical CMS
Most commercial school CMS tools put you in a separate “edit this post” screen with a WYSIWYG iframe that doesn’t look like the real site. Here, the formatting is applied on the actual page, in the actual font, with the actual styling. What you see is what the reader sees.
Try it
Open any news article in edit mode, highlight a sentence, and watch the toolbar appear.
The slash menu — adding blocks of content
Inside a rich-text field, type / on a new line and a command palette opens (Notion-style). Arrow keys to navigate, Enter to insert, Esc to cancel.
What the slash menu can insert
- /image — opens the image picker (library or upload), inserts at cursor
- /link — opens the link picker (same as the toolbar’s link button)
- /pullquote — inserts an editorial pullquote block, pre-styled
- /callout — highlighted note box with a gold left border; good for “important” asides
- /divider — horizontal rule between sections
- /h2, /h3 — quick section and subsection headings
- /bullet, /numbered — bulleted or numbered list
Why this matters
Long-form content like the Head of School letter, admissions writeups, or Capstone profiles needs structure. The slash menu is how you add that structure without leaving the flow of writing. No layout-builder, no drag-drop widget tray — just type / and the option is there.
Adding images (library + upload)
Two ways to get an image into a page: typing /image inside a rich-text block, or clicking an avatar placeholder on a staff or trustee card. Either opens an image picker with two tabs.
Library tab
Thumbnails of every image already uploaded to your site. Click one to insert it where your cursor was. Good for reusing hero photos, event shots, or stock campus imagery across multiple posts.
Upload new tab
Drag and drop a file onto the drop zone, or click to browse. Accepts JPG, PNG, WebP, up to 10 MB per image.
- Alt text — the picker prompts for a short description. Screen readers read this to visually impaired visitors; search engines use it for image search. Skip it and the a11y hints will nudge you.
- Real admin vs. Guest — real BPD admins: your uploads persist to the server and are served to every visitor. Guest: uploads are accepted visually but never land on disk, so the next prospect starts clean.
Avatars on staff / trustee / alumni cards
Click an avatar circle in edit mode. A popover opens with a drop zone, alt-text field, and a “Use initials” fallback for placeholder-first setups.
Make it yours (brand kit)
The fastest way to see Academy as your school: open the 🎨 Brand kit button in the amber sandbox banner at the top of every page. A drawer opens on the right with three controls.
- Primary color. Click the color swatch, pick your school’s primary (the navy-equivalent). The entire site recolors live. Headers, buttons, links, footer, admin chrome. Same click, whole cascade.
- Accent color. Same idea for your gold or highlight color. Hover states, link underlines, editable outlines.
- School logo. Drop a PNG, JPG, WebP, or SVG. It swaps into the header and footer instantly (via a session-scoped data URL; nothing uploaded).
Six preset pairings are included if you want to sanity-check what a different palette feels like before picking your own. Click any preset and both primary and accent swap together.
On Chrome, an Eye-dropper button lets you pick a color from anywhere on the page, including a screenshot you have open in another tab. On other browsers, the native color picker is the path.
Everything you set sticks for the current tab session and survives navigation. Hit Reset to defaults in the drawer to wipe back to the Academy navy + gold.
Why this matters for pitches: real schools look at Academy and want to know “will it look like us?” The brand kit answers that in ten seconds. What you’d be seeing on day one of a BPD build.
Preview on phone or tablet
Bottom-left corner of every page has a three-button switcher: 💻 Desktop / 📱 Tablet / 📲 Phone. Click any to snap the current page into that device frame (a CSS-only bezel, not a fake screenshot). The site re-layouts in real time; your cursor and clicks still work inside.
Useful for confirming how a news story, a faculty card, or the admissions flow looks on the device your families actually use (most school site traffic is mobile).
Undo anything
Press ⌘Z (or Ctrl+Z) to walk back your last action.
- Inside a text field, it undoes your last keystrokes the way any text editor does.
- Outside a text field, it reverses structural changes: adding a staff member, deleting a news card, reordering a section. The last 40 actions are queued.
- ⌘Shift+Z redoes.
The intent is simple: poke around without fear. Rewrite a heading, delete a faculty card, add three trustees, then Cmd+Z your way home.
Accessibility hints while you edit
The CMS watches your edits for the common accessibility issues that expose schools to ADA lawsuits, and flags them in real time. No separate “accessibility audit” tool to run — the hints just appear.
What gets flagged automatically
- Missing alt text — any image you insert without a description. A small warning pill appears next to the image.
- Vague link text — links that say only “click here,” “read more,” or “learn more.” Screen-reader users can’t tell what they lead to; the pill reminds you to use the actual destination.
- Empty headings — if you delete the text but leave the H2/H3 block, the CMS flags it.
Why this matters
Independent schools increasingly get RFP questions about WCAG 2.1 AA compliance. Most commercial school CMS tools assume your content team is also an accessibility expert. This system bakes the basics into the editor itself, so accidental noncompliance gets caught as you write, not six months later when legal asks.
What does NOT get flagged
This is an edit-time safety net, not a full audit. Color contrast, keyboard traps, and form labels are checked at the template level when BPD builds the site, not on every save.
All the keyboard shortcuts
Power users and anyone who edits daily will want these. All work from anywhere on the site when edit mode is on.
Toggling edit mode
- ⌘E / Ctrl+E — turn editor mode on or off (the gold button in the bottom right)
Inside an editable field
- ⌘B / Ctrl+B — bold
- ⌘I / Ctrl+I — italic
- ⌘U / Ctrl+U — underline
- ⌘K / Ctrl+K — insert a link (opens the link picker)
- ⌘S / Ctrl+S — force-save the current field (usually unnecessary; saves happen automatically on blur)
- / — open the slash menu (rich-text fields only)
- Enter — commit a single-line field and exit
- Esc — leave the current field without committing the last keystrokes
Undo / redo
- ⌘Z / Ctrl+Z — undo; works inside text fields (text-level undo) and outside them (structural undo: last added staff card, last deleted news article, etc.)
- ⌘⇧Z / Ctrl+Shift+Z — redo
Navigation
- ⌘K or click the “Search ⌘K” button in the top-right — open the site-wide search
Publishing a news article
The news module drives the home-page stories grid and the News archive.
Add one
- Sign in, visit the admin dashboard, click the News tab in the left rail.
- Fill the form: title, excerpt, optional tag (“Admissions,” “Athletics,” …), optional image URL, and the body (rich text).
- Click Add News. It appears on the home page and the news archive immediately.
Guest behavior: the form accepts your post and returns success, but the server discards it (sandboxed). Try the same flow as a real admin, and the article is persisted and served to every visitor.
Edit an existing article
Open any news article while in edit mode. Every field on the page — title, excerpt, tag, body — is live-editable inline. No separate “edit this post” screen.
Turning on the emergency alert banner
Every BPD-built school site carries a site-wide alert banner. One admin toggle, every page, every visitor. Works for weather closures, lockdowns, or a last-minute schedule change.
- Admin dashboard → Emergency Alert tab.
- Pick a level (Notice, Watch, Critical). Type the message. Optional: a link (“Full statement here”).
- Click Preview to see what it looks like without showing it publicly, or Publish to turn it on live.
- Click Turn off when the situation clears.
Guest behavior: the UI acts as if the banner toggled, but the server refuses to touch the live row. This means you can safely click around without accidentally broadcasting a test message to every other prospect viewing the demo.
Adding an event to the calendar
The calendar and the home-page “Upcoming” strip share one data source: the Events table. Admins manage it through a simple form.
- Admin dashboard → Events tab.
- Enter title, date & time, location, and a type (academy, athletics, arts, admissions, board, holiday).
- Click Add Event. It appears in the calendar view, the “Upcoming” strip on the home page, and the public
.icsfeed (for people who subscribe in their calendar app).
For bulk imports, real admin sessions also support CSV upload — not exposed to Guest sessions to keep the sandbox clean.
Adding a staff member
The faculty directory at /staff is fully inline-editable. There’s no separate “add staff” form — open the page in edit mode and work directly.
- Open the Faculty directory in edit mode.
- Each faculty card’s name, title, department, email, and bio have gold outlines — click and type to change them.
- To add a new person: use the + Add Faculty Member button at the top of the directory (real admins only; Guest sees the button but the add is sandboxed).
- Photo updates: click the avatar in edit mode — file picker opens. Real admin uploads are saved to
/img/staff/and the directory regenerates.
Seeing where a page is linked
On every page in edit mode there’s a small floating panel top-left: “Linked from N · Links out M.” Click it to expand.
It tells you:
- Linked from: which other pages point at the page you’re on (so you know what will break if you rename or remove it).
- Links out: where this page sends readers.
The graph rebuilds automatically whenever news or events change, and you can force a rebuild from the admin dashboard. It’s the closest thing a school CMS has to a “find usages” tool in a code editor.
About the sandbox — your edits don’t persist
Signed in as Guest, every change you make is accepted by the UI and rendered live on your screen. The server acknowledges the save with a sandbox: true flag and then discards it. Refresh the page or open another browser — everything is back to the original.
Edits persist across page navigation within the same tab. Type a new hero headline on Home, click over to About, click back to Home. Your edit is still there, mirrored into sessionStorage. That lets you demo the full site without losing your work mid-walkthrough. Close the tab and the slate wipes clean for the next prospect.
This is deliberate. The demo is a shared pitch artifact: the school evaluating it tomorrow deserves to see the same content today’s prospect saw. So Guest sessions look real but never mutate anything. The actual safety nets:
- All inline-edit PATCHes from Guest return
{ ok: true, sandbox: true }without writing to SQLite. - Legacy admin form submissions (alert banner, news form, events form) are also sandbox-gated — the redirect fires so the UI feels responsive, but no DB write happens.
- File uploads from Guest return a mocked URL and never land on disk.
When a real school is onboarded, their account gets a non-Guest role. All of the above writes hit the real database and are served to every visitor.
Guest vs. a real school admin
Guest (you, right now)
- Sees the entire admin dashboard
- Can click every button, fill every form, type in every field
- Every save returns
sandbox: true - Changes visible in your browser only; refresh clears them
- Can’t upload files to the real server
- Can’t affect another visitor’s view of the demo
Real school admin
- Same exact UI — no separate “production admin” view
- Every edit persists to the school’s own SQLite database
- Uploads go to the school’s own filesystem + are backed up
- Changes are visible immediately to every visitor on the public site
- Can invite additional admins with granular roles (admin, editor, contributor)
- Gets an audit log of who edited what, when
What happens when a school becomes a client
Three phases, typically eight to twelve weeks end-to-end on a full rebuild.
- Discovery + scope. We work with your team to inventory the current site, identify which specialist vendors you already use (Blackbaud, Veracross, Ravenna, FACTS, Classy, …), and agree on the pages and programs that matter most.
- Design + build. We start from this Academy as a reference and design a new site that looks like your school — not a template family. Photography pass, color + typography system, custom illustrations where they help.
- Launch + handoff. Your team gets a short walk-through of the same CMS you’re clicking right now. We cut DNS over. You’re live. From there, content is yours; platform upkeep is ours.
After launch, edits through this CMS take seconds. Escalations and structural questions come to us by email or Slack. Typical response window is same-day.
FAQ
- Does the Guest account leave traces on the server?
- Session cookies, standard HTTP access logs, and whatever our web analytics (aggregate, first-party) records. No edits from Guest touch the content database. No personal information is requested by Guest usage.
- Is this the actual CMS you ship to clients?
- Yes. The same Express + EJS + SQLite stack, the same inline-editor JavaScript, the same admin dashboard. The only difference on client deployments is that the Guest account is disabled and each school gets its own authenticated admin users.
- What about student records, grades, billing?
- Not on this site. BPD builds the marketing / communication site. Student information, grades, transcripts, tuition billing, and financial aid all live with specialist vendors (Blackbaud, FACTS, SSS, Parchment, …). We link out; we don’t hold that data. That’s the platform’s explicit boundary.
- What does the hosting & care plan cover?
- School sites ship as a managed engagement: private-server hosting, SSL & backups, accessibility re-audits, security patching, uptime monitoring, and content updates on request. Your hosting & care plan is how we keep the site working the week after you sign, the year after, and the year after that — not a one-time build that goes stale. Scope & starting monthly tiers live at brightpresencedigital.com; every school is quoted individually.
- Accessibility?
- Every page is built to WCAG 2.1 AA at launch, with ongoing quarterly re-audits. See our accessibility statement for specifics.
- Can we see pricing?
- Published starting tiers live on brightpresencedigital.com. Every deal is scoped to the school, so we’d rather show you a tailored number than quote from a table. Ask.
Ask a question
If you got to the end of this page, you’re probably the kind of school administrator we’d enjoy working with. Real conversations go further than decks.