feat(site): add templates

[NathanFlurry]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-site	Error			Dec 3, 2025 8:10am
rivetkit-serverless	Error			Dec 3, 2025 8:10am

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Dec 3, 2025 8:10am
rivet-inspector	Ignored	Preview		Dec 3, 2025 8:10am

[NathanFlurry]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(site): add templates #3567 👈 (View in Graphite)
• feat(examples): add user-generated-actors example #3560
• feat(frontend): create api key #3556
• fix(frontend): do not show tokens button if not on namespace page #3558
• fix(frontend): update env vars for dev #3557
• docs: clean up last few missing pieces of content #3538
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

PR Review: Templates Feature

Overview

This PR adds a comprehensive templates page to the Rivet website, showcasing RivetKit templates and examples. The implementation demonstrates solid architecture and good practices. Here's my detailed analysis:

✅ Strengths

1. Clean Architecture: Excellent separation between client and server components following Next.js 13+ App Router patterns
2. Type Safety: Well-defined TypeScript types for Technology, Tag, and Template interfaces
3. User Experience:
   • Fuzzy search with Fuse.js for flexible template discovery
   • Multi-filter functionality with tags and technologies
   • Related templates section on detail pages
4. SEO Optimized: Proper metadata generation and canonical URLs
5. Static Generation: Uses generateStaticParams for all template pages - excellent performance
6. Responsive Design: Mobile-first approach with proper breakpoints

🐛 Issues Found

High Priority

1. File Path Resolution Issue (templates/[slug]/page.tsx:38-46)

const readmePath = path.join(
    process.cwd(),
    "..",
    "examples",
    templateName,
    "README.md",
);

• Using process.cwd() + ".." is fragile and may break in different deployment environments
• In Next.js, process.cwd() points to the project root, but navigating up with ".." assumes a specific directory structure
• Recommendation: Use an absolute path from project root or configure a base path constant

2. Error Handling for Missing READMEs (templates/[slug]/page.tsx:47-49)

console.error(`Failed to read README for templateName:`, error);

• Console errors are invisible in production
• Recommendation: Use proper error tracking (e.g., Sentry) or at least log to a monitoring service

Medium Priority

3. Filter Logic - OR vs AND Behavior (TemplatesPageClient.tsx:57-69)

const matchesTags =
    selectedTags.length === 0 ||
    selectedTags.some((tag) => template.tags.includes(tag));

• Current implementation: Shows templates with ANY selected tag (OR logic)
• Users might expect AND logic (must have ALL selected tags)
• Recommendation: Consider if this is the desired UX or add a toggle for OR/AND modes

4. Inline Styles Instead of Tailwind (TemplatesPageClient.tsx:93, 99)

style={{ color: "#FAFAFA" }}
style={{ color: "#A0A0A0" }}

• Bypasses Tailwind's design system
• Recommendation: Use Tailwind classes like text-zinc-50 and text-zinc-400

5. Hardcoded Brand Color

• #FF4500 appears multiple times throughout the code
• Recommendation: Define in tailwind.config.ts as a theme color (e.g., brand or rivet-orange)

Low Priority

6. Package.json Reordering (website/package.json:68-69)

• Appears to be unintentional alphabetical reordering
• Minor: Adds noise to the diff but not a functional issue

7. Empty Tags Arrays

• Many templates have tags: [] (background-jobs, cloudflare-workers, etc.)
• Recommendation: Add at least one tag to improve discoverability and filtering UX

8. Clear Filters Button Logic (TemplatesSidebar.tsx:68-71)

onClick={() => {
    selectedTags.forEach((tag) => onTagToggle(tag));
    selectedTechnologies.forEach((tech) => onTechnologyToggle(tech));
}}

• Inefficient: Calls toggle handlers for each selected item
• Recommendation: Add dedicated clearFilters handlers that reset state directly

⚡ Performance

Excellent:

• Static generation for all pages ✅
• Memoized filter computation ✅
• Current scale (40+ templates) performs well ✅

Future Consideration: If template count grows to hundreds, consider virtualizing the grid with react-window or similar

🔒 Security

1. Markdown XSS Risk (TemplateDetailClient.tsx:78)

<Markdown>{readmeContent}</Markdown>

• Critical: Verify that the Markdown component sanitizes HTML
• If READMEs contain malicious HTML/scripts, this could lead to XSS
• Recommendation: Review the Markdown component implementation or add explicit sanitization

2. External Links ✅

• Proper use of rel="noopener noreferrer" on GitHub links

♿ Accessibility

Good:

• Proper aria-hidden on search icon ✅
• Semantic HTML structure ✅

Could Improve:

• Add aria-label to filter checkboxes for better screen reader support
• Add role="search" to search form wrapper
• Consider adding skip links for keyboard navigation

🧪 Test Coverage

Missing: No tests found for this feature

• Unit tests for filter logic (search + tag/tech filters)
• Integration tests for Fuse.js search behavior
• E2E tests for template navigation

📋 Additional Suggestions

1. User Feedback: Show template count (e.g., "Showing 12 of 40 templates")
2. Loading States: Consider skeleton screens while README content loads
3. Template Images: Currently using placeholder SVGs - plan for actual template screenshots?
4. Empty State: The "No templates found" message could include a "Clear filters" button
5. URL State: Consider syncing filters to URL query params for shareable filtered views

🎯 Action Items

Must Fix Before Merge

1. ✅ Review Markdown component for XSS protection
2. ⚠️ Fix file path resolution to be deployment-safe

Should Fix

3. Replace inline styles with Tailwind classes
4. Add brand color to theme config
5. Improve error handling/logging

Nice to Have

6. Add test coverage
7. Document filter OR/AND behavior
8. Accessibility improvements
9. Add template count display

📊 Code Quality Score: 8/10

Breakdown:

• Architecture: 9/10
• Type Safety: 9/10
• User Experience: 8/10
• Performance: 9/10
• Security: 7/10 (needs Markdown sanitization verification)
• Accessibility: 7/10
• Test Coverage: 3/10
• Documentation: 6/10

Conclusion

This is a well-architected feature with good UX and performance. The main concerns are file path resolution reliability and ensuring Markdown content is properly sanitized. The code is clean, type-safe, and follows React/Next.js best practices.

Great work on the fuzzy search integration and responsive layout! Once the high-priority items are addressed, this will be production-ready. 🚀

[pkg-pr-new]

More templates

• example-ai-agent
• chat-room
• example-cloudflare-workers
• example-cloudflare-workers-hono
• example-cloudflare-workers-inline-client
• example-counter
• example-counter-next-js
• example-counter-serverless
• example-cursors
• example-cursors-raw-websocket
• example-deno
• example-sqlite
• example-elysia
• example-express
• example-hono
• example-hono-bun
• example-hono-react
• example-kitchen-sink
• example-next-js
• quickstart-actions
• quickstart-cross-actor-actions
• quickstart-multi-region
• quickstart-raw-websockets
• quickstart-realtime
• quickstart-scheduling
• quickstart-state
• example-raw-fetch-handler
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-react
• starter
• example-stream
• example-trpc
• example-user-generated-actors-freestyle

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@3567

@rivetkit/db

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/db@3567

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@3567

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@3567

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@3567

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@3567

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@3567

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@3567

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@3567

commit: d7f4e0d