diff --git a/docs/pages/guides/_meta.js b/docs/pages/guides/_meta.js index 70fcd21bcc..5e98c55f70 100644 --- a/docs/pages/guides/_meta.js +++ b/docs/pages/guides/_meta.js @@ -1,9 +1,9 @@ export default { - "replicating-onchain-state": "Replicating onchain state", "hello-world": "Hello World", "extending-a-world": "Extending a World", "adding-delegation": "Adding Delegation", "modules": "Writing MUD Modules", emojimon: "Emojimon", testing: "Testing", + "replicating-onchain-state": "Replicating onchain state", }; diff --git a/docs/pages/guides/replicating-onchain-state.mdx b/docs/pages/guides/replicating-onchain-state.mdx index fa554d1fc1..7c890b14d6 100644 --- a/docs/pages/guides/replicating-onchain-state.mdx +++ b/docs/pages/guides/replicating-onchain-state.mdx @@ -2,6 +2,8 @@ This guide walks through how you might recreate onchain state from MUD's Store events. We use this pattern in our sync stack to hydrate a client or indexer from blockchain logs fetched from an RPC. +If you are using a MUD template, one of our sync packages, or indexers, all of this is already done for you. This guide is meant to demonstrate how the Store protocol works and show how you might implement a sync strategy or indexer of your own. + ## Store: MUD's onchain storage Before we get started, it's helpful to understand [how MUD stores its data on chain](/store/introduction). MUD introduces [a few new concepts](/store/data-model): tables, records, key tuples, and fields. diff --git a/docs/pages/introduction.mdx b/docs/pages/introduction.mdx index eea0810e2c..ec772564f1 100644 --- a/docs/pages/introduction.mdx +++ b/docs/pages/introduction.mdx @@ -8,7 +8,7 @@ MUD is a framework for ambitious onchain applications. It reduces the complexity Writing smart contracts is only a small part of building user-friendly EVM apps. Your frontend needs get data from the chain. You've kept your onchain logic simple to save users gas, but now getting data from the RPC is tricky and slow. So you spin up an indexer, write event handlers, and teach your frontend how to talk to another backend. Complicated, right? -MUD provides much of this out of the box. It uses a [familiar data model](/store/data-model) with tables and fields, built on a standardized storage protocol. This lets us provide you with an [automatic indexer](/services/indexer), no code is necessary to use it. And because it's all standardized, our client libraries already know how to get your app's onchain state and keep your frontend [in sync with the chain](/guides/replicating-onchain-state). +MUD provides much of this out of the box. It uses a [familiar data model](/store/data-model) with tables and fields, built on a standardized storage protocol. This lets us provide you with an [automatic indexer](/services/indexer), no code is necessary to use it. And because it's all standardized, our client libraries already know how to get your app's onchain state and keep your frontend in sync with the chain. MUD apps are [autonomous worlds](https://0xparc.org/blog/autonomous-worlds), infinitely extendable by default. They come with access control, upgradability, hooks, plugins, and a suite of great developer tools. diff --git a/docs/pages/templates.mdx b/docs/pages/templates.mdx new file mode 100644 index 0000000000..e1c24d83f7 --- /dev/null +++ b/docs/pages/templates.mdx @@ -0,0 +1,27 @@ +# Templates + +MUD templates include client code as well as an onchain MUD `World`. +These integrations include data synchronization, which gives the client a read-only copy of the data in the [MUD tables](/store/tables). + +## Official templates + +We wrote a number of integrations between TypeScript and MUD. + +- [Vanilla](/templates/typescript/vanilla) +- [React using RECS](/templates/typescript/react-ecs) +- React using Zustand +- [Three.js](/templates/typescript/threejs) + +## Community templates + +There are a number of other templates written by developers who wanted to use different frameworks with MUD. + +**Disclaimer:** We appreciate the people who created these integrations, but as we did not verify them ourselves, we cannot guarantee their functionality or security. + +- [Vue](/templates/typescript/vue) +- [Godot](/templates/godot) +- [Progressive Web App (mobile)](/templates/pwa) +- [Swift](/templates/swift) +- [Svelte](/templates/svelte) +- [Unity](/templates/unity) +- [Nethereum](/templates/nethereum)