/** * rNotes demo page — server-rendered HTML body. * * Returns the static HTML skeleton for the interactive notes demo. * The client-side notes-demo.ts populates note cards, packing list, * sidebar, and notebook header via WebSocket snapshots. */ export function renderDemo(): string { return `
Interactive Demo

See how rNotes works

A collaborative knowledge base for your team

Live transcription Audio & video Organized notebooks Canvas sync Real-time collaboration
...

This demo shows a Trip Planning Notebook scenario with notes, a packing list, tags, and canvas sync — all powered by the r* ecosystem with live data from rSpace.

📓 Loading...
Open in rNotes

Loading notebook data...

Notebook 0 notes
📓 Loading...
Notes 0
Packing List 1
Search notes...
Browse tags
Recent edits

Notes

0 notes
Sort: Recently edited
${[1, 2, 3] .map( () => `
`, ) .join("")}

Everything you need to capture knowledge

${[ { icon: ``, title: "Live Transcription", desc: "Record and transcribe in real time. Stream audio via WebSocket or transcribe offline with Parakeet.js.", }, { icon: ``, title: "Rich Editing", desc: "Headings, lists, code blocks, highlights, images, and file attachments in every note.", }, { icon: ``, title: "Notebooks", desc: "Organize notes into notebooks with sections. Nest as deep as you need.", }, { icon: ``, title: "Flexible Tags", desc: "Cross-cutting tags let you find notes across all notebooks instantly.", }, { icon: ``, title: "Canvas Sync", desc: "Pin any note to your rSpace canvas for visual collaboration with your team.", }, ] .map( (f) => `
${f.icon}

${f.title}

${f.desc}

`, ) .join("")}

Ready to capture everything?

rNotes gives your team a shared knowledge base with rich editing, flexible organization, and deep integration with the r* ecosystem — all on a collaborative canvas.

Start Taking Notes
`; }