- Experience the power of PostgreSQL with the safety and convenience of TypeScript.
-
-
+ {/* Bottom CTA Section */}
+
+
+
+
+
+ Ready to build the next generation of database APIs?
+
+
+ Experience the power of composable, capability-first database queries with full type safety and
+ AI-native architecture.
+
+
+
+
-
+
+
+
+ {/* FAQ Section */}
+
+
+
+ Frequently Asked Questions
+
+
+ {/* Comparison Table 1: API Frameworks */}
+
+
+ API Frameworks: Typegres vs Hasura vs PostgREST
+
+
+
+
+
+ |
+ Typegres |
+ Hasura |
+ PostgREST |
+
+
+
+
+ | Schema coupling |
+
+
+
+ Decoupled
+
+ |
+
+
+
+ Tightly coupled
+
+ |
+
+
+
+ Tightly coupled
+
+ |
+
+
+ | Client composition |
+
+
+
+ Full composable queries
+
+ |
+
+
+ |
+
+
+
+ REST endpoints
+
+ |
+
+
+ | Authorization |
+
+
+
+ Capability-based
+
+ |
+
+
+ |
+
+
+ |
+
+
+ | Refactor safety |
+
+
+
+ Safe schema evolution
+
+ |
+
+
+
+ Breaking changes
+
+ |
+
+
+
+ Breaking changes
+
+ |
+
+
+ | Maturity/Ecosystem |
+
+
+ |
+
+
+
+ Mature
+
+ |
+
+
+
+ Mature
+
+ |
+
+
+
+
+
+
+ {/* Comparison Table 2: Typegres vs ORMs */}
+
+
+ Typegres vs ORMs (Prisma, Drizzle, etc.)
+
+
+ Unlike ORMs (which are local dev tools), Typegres is designed for exposing your database over RPC. You
+ can use it alongside your ORM, or as a standalone API layer.
+
+
+
+
+
+ |
+ Typegres |
+
+ ORMs (Prisma, Drizzle, etc.)
+ |
+
+
+
+
+ | Purpose |
+
+
+
+ API framework
+
+ |
+
+
+ |
+
+
+ | Security model |
+
+
+
+ Capability-based
+
+ |
+
+
+ |
+
+
+ | Refactor safety |
+
+
+
+ Safe schema evolution
+
+ |
+
+
+
+ Breaking changes
+
+ |
+
+
+ | Maturity/Ecosystem |
+
+
+ |
+
+
+
+ Mature
+
+ |
+
+
+
+
+
+
+ {/* Other FAQs */}
+
+
+
+ Q: What about raw SQL + Row Level Security (RLS)?
+
+
+ tl;dr Raw SQL + RLS has existed for almost a decade. Still, no one lets untrusted
+ SQL run against their database.
+
+
+ A raw SQL approach has many drawbacks, but the most fundamental is applications need application
+ code, not just SQL (e.g., calling external APIs, JSON validation).
+
+
+
+
+ Q: What about query performance?
+
+
+ Every query maps directly 1:1 to the single Postgres query you'd expect.
+
+
+ Note that relations are expressed as correlated subqueries, not raw joins, which modern versions of
+ Postgres should optimize. This idea may be revisited later.
+
+
+
+
+ Q: How does the RPC layer actually work?
+
+
+ Using the amazing{" "}
+
+ Cap'n Web
+ {" "}
+ project. It enables an RPC layer that naturally allows composing over a set of classes/methods
+ safely in a single RPC call.
+
+
+
+
+ Q: What's the actual security model under the hood?
+
+
+ The model is capability-based security. Instead of reactive security (a blacklist)
+ the framework explicitly guides you to define your allowed surface area (your classes and methods)
+ and enforces that all queries go through it.
+
+
+
+
Q: What about DoS?
+
+ Currently we recommend query timeouts. (Other options include cost calculations and limiting number
+ of tables allowed per query).
+
+
+
+
+ Q: What's the project status?
+
+
+ This is a research preview and not ready for production use. Try the{" "}
+
+ playground
+ {" "}
+ to see the latest features and open a discussion or issue on{" "}
+
+ GitHub
+ {" "}
+ if you have questions.
+
+
+
+
diff --git a/site/src/components/SyntaxHighlight.tsx b/site/src/components/SyntaxHighlight.tsx
index 86ffb393..20bff064 100644
--- a/site/src/components/SyntaxHighlight.tsx
+++ b/site/src/components/SyntaxHighlight.tsx
@@ -4,11 +4,73 @@ import { Highlight, themes } from "prism-react-renderer";
interface SyntaxHighlightProps {
code: string;
- language: "typescript" | "sql";
+ language: "typescript" | "sql" | "tsx" | "javascript";
className?: string;
+ diff?: boolean;
}
-export function SyntaxHighlight({ code, language, className = "" }: SyntaxHighlightProps) {
+export function SyntaxHighlight({ code, language, className = "", diff = false }: SyntaxHighlightProps) {
+ if (diff) {
+ const lines = code.split('\n');
+ const processedLines = lines.map(line => {
+ if (line.trim().startsWith('// -')) {
+ return { type: 'removed' as const, content: line.replace(/^(\s*)\/\/\s*-\s*/, '$1') };
+ } else if (line.trim().startsWith('// +')) {
+ return { type: 'added' as const, content: line.replace(/^(\s*)\/\/\s*\+\s*/, '$1') };
+ }
+ return { type: 'normal' as const, content: line };
+ });
+
+ const processedCode = processedLines.map(l => l.content).join('\n');
+
+ return (
+
+ {({ className: highlightClassName, style, tokens, getLineProps, getTokenProps }) => (
+
+ {tokens.map((line, i) => {
+ const lineType = processedLines[i]?.type || 'normal';
+ const lineProps = getLineProps({ line });
+
+ let bgColor = 'transparent';
+ if (lineType === 'removed') {
+ bgColor = 'rgba(239, 68, 68, 0.3)'; // red-500 with higher opacity
+ } else if (lineType === 'added') {
+ bgColor = 'rgba(34, 197, 94, 0.3)'; // green-500 with higher opacity
+ }
+
+ return (
+
+ {line.map((token, key) => (
+
+ ))}
+
+ );
+ })}
+
+ )}
+
+ );
+ }
+
return (