Hypergraph (#1022)

* adding hypergraph

* Add Hypergraph logo to sidebar

* fixing names

* Update website/src/pages/en/hypergraph/_meta.js

Co-authored-by: Benoît Rouleau <[email protected]>

* Update website/src/pages/en/hypergraph/overview.mdx

Co-authored-by: Benoît Rouleau <[email protected]>

* Delete website/src/pages/en/hypergraph/_meta-titles.json

* Update website/src/pages/en/hypergraph/faq.mdx

---------

Co-authored-by: benface <[email protected]>

Author: idalithb

website/next.config.js

@@ -73,18 +73,25 @@ const withNextra = nextra({
       '---4': {
         type: 'separator',
       },
+      hypergraph: {
+        type: 'children',
+        title: t('global.navigation.hypergraph'),
+      },
+      '---5': {
+        type: 'separator',
+      },
       'ai-suite': {
         type: 'children',
         title: t('global.navigation.ai-suite'),
       },
-      '---5': {
+      '---6': {
         type: 'separator',
       },
       indexing: {
         type: 'children',
         title: t('global.navigation.indexing'),
       },
-      '---6': {
+      '---7': {
         type: 'separator',
       },
       resources: {

website/src/layout/Layout.tsx

@@ -36,6 +36,7 @@ import {
   BookOpenText,
   Files,
   House,
+  Hypergraph,
   MagnifyingGlass,
   RoleIndexer,
   SidebarSimple,
@@ -199,6 +200,9 @@ export default function Layout({ pageOpts, children }: NextraThemeLayoutProps<Fr
         if (routeWithoutLocale === '/token-api' || routeWithoutLocale.startsWith('/token-api/')) {
           return <APIToken alt="" />
         }
+        if (routeWithoutLocale === '/hypergraph' || routeWithoutLocale.startsWith('/hypergraph/')) {
+          return <Hypergraph alt="" />
+        }
         if (routeWithoutLocale === '/ai-suite' || routeWithoutLocale.startsWith('/ai-suite/')) {
           return <Sparkle alt="" variant={selected ? 'fill' : 'regular'} />
         }

website/src/pages/en/global.json

@@ -6,6 +6,7 @@
     "subgraphs": "Subgraphs",
     "substreams": "Substreams",
     "sps": "Substreams-Powered Subgraphs",
+    "hypergraph": "Hypergraph",
     "ai-suite": "AI Suite",
     "tokenApi": "Token API",
     "indexing": "Indexing",

website/src/pages/en/hypergraph/_meta.js

@@ -0,0 +1,4 @@
+export default {
+  overview: '',
+  faq: '',
+}

website/src/pages/en/hypergraph/faq.mdx

@@ -0,0 +1,76 @@
+---
+title: Hypergraph FAQ
+sidebarTitle: FAQ
+---
+
+## General Questions
+
+### What is Hypergraph?
+
+Hypergraph is a TypeScript-first framework for building local-first apps that syncs encrypted data to a shared knowledge graph.
+
+### Does it replace my backend?
+
+Yes. Hypergraph is your data layer. You still host a thin sync server, but your business logic lives entirely on the client.
+
+### Who is Hypergraph for?
+
+Developers building collaborative, consumer-facing apps that require real-time data sync, end-to-end encryption, and public knowledge graph interoperability. Ideal for those who want to focus on client-side logic without managing backend infrastructure.
+
+### What problems does Hypergraph solve?
+
+- Real-time sync of private data across users and devices with E2EE
+- No traditional backend or database required (framework handles storage and sync)
+- Publishing and consuming public data in an interoperable knowledge graph
+- Built-in user authentication and access control
+- Enables network effects by reusing existing data across apps
+
+### What should developers know?
+
+You should be comfortable writing React applications in TypeScript and familiar with common UI patterns (e.g., inboxes).
+
+## Implementation Questions
+
+### How can I integrate Hypergraph into an existing application?
+
+You can add Hypergraph as a collaboration and privacy layer to an existing app, enabling real-time sync and end-to-end encryption while keeping your current stack for other functionality.
+
+### What are Spaces?
+
+Spaces are the primary grouping for users and content in Hypergraph: they represent collaboration contexts and topics. Only members of a space can access its private data.
+
+### How do I get started?
+
+Check out the [Quickstart](https://docs.hypergraph.thegraph.com/docs/quickstart).
+
+### Where can I find the API reference?
+
+Refer to the [API Reference](https://docs.hypergraph.thegraph.com/docs/api-reference/hypergraph/).
+
+### How do I troubleshoot common errors?
+
+Find solutions in the [Troubleshooting Guide](https://docs.hypergraph.thegraph.com/docs/troubleshooting).
+
+## Support and Community
+
+### Where can I find more examples or support?
+
+Browse our GitHub repository for sample apps and open issues. Join the community through our issue tracker and discussion forums.
+
+### How can I share feedback?
+
+Provide feedback via GitHub issues or our upcoming feedback form linked in the docs.
+
+### Is Hypergraph open-source?
+
+100%. Apache-2.0 license. Contributions are welcomed.
+
+## Security and Privacy
+
+### Can the server read my private data?
+
+No. All private content is encrypted client-side with a per-Space symmetric key.
+
+### What happens if I lose my keys?
+
+Today you're out of luck (similar to Signal). A social recovery scheme is on the roadmap. Follow [#51](https://github.com/graphprotocol/hypergraph/issues/51).

website/src/pages/en/hypergraph/overview.mdx

@@ -0,0 +1,100 @@
+---
+title: Hypergraph
+sidebarTitle: Overview
+---
+
+## Overview
+
+[Hypergraph](https://docs.hypergraph.thegraph.com/) is a TypeScript-first framework for building local-first applications that sync encrypted data to a shared knowledge graph. Instead of relying on traditional backend infrastructure, it shifts control to the client and puts data where it belongs: with the user.
+
+At its core, Hypergraph is powered by two innovations:
+
+1. Client-side architecture that keeps users in control of their data while apps remain real-time, private, and interoperable by default.
+2. The [GRC-20](https://thegraph.com/blog/grc20-knowledge-graph/) standard which enables truly composable knowledge graphs.
+
+With Hypergraph, developers can build collaborative apps that feel seamless, secure, and user-owned while focusing purely on client-side logic.
+
+It offers end-to-end encryption, a GRC-20 Knowledge Graph SDK, JSON-LD storage, conflict-free sync with CRDTs, and Spaces for organizing people and data with fine-grained access.
+
+For more specifics check out, [key features](https://docs.hypergraph.thegraph.com/docs/key-features).
+
+## Core Concepts
+
+### Knowledge Graphs
+
+Unlike traditional databases that store data in rows and columns, knowledge graphs represent information as connected networks. This structure makes complex queries natural and efficient, while allowing the data model to evolve organically without schema migrations.
+
+#### Example Use Case
+
+In a social app, a traditional database might require complex joins to answer a query like: `"Posts by photographers that my friends liked"`
+
+In a knowledge graph, relationships are the data:
+
+```
+Teresa --> profession --> Photography
+Teresa --> owns --> Fujifilm X100
+Teresa --> posted --> Street Photo
+Alex --> friend_of --> Teresa
+Alex --> liked --> Street Photo
+```
+
+This model makes queries natural and efficient, while allowing the schema to evolve organically.
+
+### The Hypergraph Advantage
+
+- **Private by default**: Personal data is encrypted on the device.
+- **Peer-to-peer**: No central server required. Collaboration is direct.
+- **Real-time**: Changes synchronize instantly across devices.
+- **Interoperable**: Data is usable across applications that support the protocol.
+
+Hypergraph serializes all data using the [GRC-20 standard](https://thegraph.com/blog/grc20-knowledge-graph/). Hypergraph handles serialization, encryption, and networking behind the scenes, while developers interact with simple SDK calls.
+
+### Spaces
+
+A Space is the fundamental unit of collaboration. It groups people and data, similar to a folder, Slack channel, or shared document. Each Space maps one-to-one with an Automerge document, enabling conflict-free offline editing.
+
+Membership and roles are tracked in an append-only Space Event Log, supporting common operations like creating a Space, updating roles, inviting members, or removing members.
+
+### Identities
+
+Each user controls a cryptographic **Identity** used for authentication, encryption, and signing events. Identities are stored locally, enabling multi-device logins without a backend.
+
+### Inboxes
+
+An Inbox is a lightweight queue for delivering updates or direct messages.
+
+- **Account Inboxes**: Belong to a single user.
+- **Space Inboxes**: Broadcast messages to all members.
+
+Inboxes can be public or private, with authentication policies controlling who can send messages.
+
+### Events and CRDTs
+
+Hypergraph uses CRDTs (Conflict-Free Replicated Data Types) to manage updates across peers.
+
+- Updates are signed, encrypted, and broadcast to peers.
+- Conflicts resolve automatically without manual intervention.
+- Large logs are periodically compacted into snapshots for efficiency.
+
+### Security Model
+
+Hypergraph is designed with security as a core principle:
+
+- End-to-end encryption ensures data privacy.
+- Digital signatures verify the authenticity of events.
+- Outdated or invalid updates are automatically rejected.
+- Keys are rotated when membership changes to prevent unauthorized access.
+
+## Exploring Spaces
+
+Spaces can be browsed using [Geo Browser's Testnet](https://testnet.geobrowser.io/root) by entering a Space ID. Access is restricted by each Space's privacy rules.
+
+## Getting Started
+
+- [Quickstart Guide](https://docs.hypergraph.thegraph.com/docs/quickstart)
+- [Core Concepts](https://docs.hypergraph.thegraph.com/docs/core-concepts#why-does-grc-20-exist)
+- [AI Usage](https://docs.hypergraph.thegraph.com/docs/ai-usage)
+- [API Reference](https://docs.hypergraph.thegraph.com/docs/api-reference/hypergraph/)
+- [Troubleshooting Guide](https://docs.hypergraph.thegraph.com/docs/troubleshooting)
+
+For all Hypergraph documentation check out the [Hypergraph Docs](https://docs.hypergraph.thegraph.com/docs/quickstart) and the [Hypergraph GitHub Repo](https://github.com/graphprotocol/hypergraph).