{"id":22951299,"url":"https://github.com/simeongriggs/sanity-react-router-template","last_synced_at":"2025-04-04T20:09:55.687Z","repository":{"id":62175989,"uuid":"537186289","full_name":"SimeonGriggs/sanity-react-router-template","owner":"SimeonGriggs","description":"Sanity Studio v3 embedded into a React Router 7 application configured for Vercel hosting with visual editing","archived":false,"fork":false,"pushed_at":"2025-03-10T09:01:51.000Z","size":13880,"stargazers_count":172,"open_issues_count":5,"forks_count":35,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-04T20:09:49.829Z","etag":null,"topics":["react","remix","sanity","tailwindcss","template"],"latest_commit_sha":null,"homepage":"https://hello-sanity-react-router-template.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimeonGriggs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-15T19:56:12.000Z","updated_at":"2025-04-03T21:34:09.000Z","dependencies_parsed_at":"2023-11-17T12:30:52.538Z","dependency_job_id":"68351813-e7c2-44dc-b76a-43d2322c3bb2","html_url":"https://github.com/SimeonGriggs/sanity-react-router-template","commit_stats":null,"previous_names":["simeongriggs/sanity-react-router-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimeonGriggs%2Fsanity-react-router-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimeonGriggs%2Fsanity-react-router-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimeonGriggs%2Fsanity-react-router-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimeonGriggs%2Fsanity-react-router-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimeonGriggs","download_url":"https://codeload.github.com/SimeonGriggs/sanity-react-router-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242678,"owners_count":20907134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","remix","sanity","tailwindcss","template"],"created_at":"2024-12-14T15:06:01.782Z","updated_at":"2025-04-04T20:09:55.659Z","avatar_url":"https://github.com/SimeonGriggs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Full-featured Sanity Studio + React Router Template\n\nBatteries-included [React Router 7](https://reactrouter.com) website using Vite with [Vercel's deployment preset](https://vercel.com/docs/frameworks/react-router) with [Visual Editing](https://www.sanity.io/docs/visual-editing) for interactive live-preview inside [Presentation](https://www.sanity.io/docs/presentation) powered by an embedded [Sanity Studio](https://www.sanity.io/studio).\n\n![Presentation tool in Sanity Studio](./img/sanity-remix-presentation.png)\n\n[Sanity Docs](https://sanity.io/docs) | [React Router Docs](https://reactrouter.com/home)\n\n- [Full-featured Sanity Studio + React Router Template](#full-featured-sanity-studio--react-router-template)\n  - [Installation: As a Sanity project template](#installation-as-a-sanity-project-template)\n  - [Installation: As a React Router template](#installation-as-a-react-router-template)\n    - [Seed the Studio with fake content](#seed-the-studio-with-fake-content)\n  - [Includes](#includes)\n    - [Embedded Studio](#embedded-studio)\n    - [Visual Editing for interactive live preview inside Presentation](#visual-editing-for-interactive-live-preview-inside-presentation)\n    - [Pre-configured Studio](#pre-configured-studio)\n    - [Portable Text component](#portable-text-component)\n    - [Image URL builder](#image-url-builder)\n    - [Example decorated input](#example-decorated-input)\n    - [Sanity Client mutation](#sanity-client-mutation)\n    - [Typed and validated responses](#typed-and-validated-responses)\n    - [Dynamic OG Image](#dynamic-og-image)\n    - [Other development choices](#other-development-choices)\n  - [Sanity Studio](#sanity-studio)\n  - [Deployment](#deployment)\n\n## Installation: As a Sanity project template\n\nFrom the command line, install this project as a Sanity project template:\n\n```sh\nnpm create sanity@latest -- --template https://github.com/SimeonGriggs/sanity-react-router-template\n```\n\nYou can create a new Sanity project or choose an existing one during the setup process. It will write these settings to a `.env` file and setup CORS origins and tokens as required.\n\n## Installation: As a React Router template\n\nFrom the command line, install this project as a React Router template:\n\n```sh\nnpx create-react-router@latest --template SimeonGriggs/sanity-react-router-template\n```\n\nThis template comes with an init script, if you choose not to run it, you can run it later with:\n\n```sh\nnpx react-router init\n```\n\nThis script should populate your `.env` file with the details of a new or existing Sanity project's ID and dataset name, as well as create a session secret and an API Token with Viewer permissions. If the init script has already been deleted, you can easily reset your `.env` file by running the following command:\n\n```sh\nnpx sanity@latest init --env\n```\n\nThen, start the development server:\n\n```sh\nnpm run dev\n```\n\nNow open the Studio at [localhost:5173/studio](http://localhost:5173/studio) and start authoring content!\n\n### Seed the Studio with fake content\n\nYour new Sanity project starts with no content. A script is included in this repo [using Faker to generate content](https://www.sanity.io/guides/create-fake-demo-content-with-sanity-cli) to start with.\n\n\u003e [!WARNING]  \n\u003e This script will **delete** existing content in the dataset every time it is run. It is intended for use in a new dataset only.\n\n```sh\nnpx sanity@latest exec ./scripts/createData.ts --with-user-token\n```\n\n## Includes\n\nUseful Sanity examples with a light sprinkling of opinionated patterns\n\n### Embedded Studio\n\nAccess to Sanity Studio v3 from within the React Router application itself. Now the whole Studio is a component, it lives at the `/studio` route.\n\n### Visual Editing for interactive live preview inside Presentation\n\nPowered by [Presentation](https://www.sanity.io/docs/presentation) and [@sanity/react-loader](https://www.sanity.io/docs/react-loader)\n\nAuthenticated users inside Sanity Studio can use the Presentation tool to browse through the website and target specific fields to edit - and see changes in real time.\n\nThe resource route (`/resource/preview`) used by Presentation will set a session token so that overlays will be visible even outside of Presentation.\n\n### Pre-configured Studio\n\nThe Studio has been pre-configured with a basic \"Record Collection\" schema, as well as a basic Desk Structure to include live preview within a view pane.\n\n### Portable Text component\n\nPowered by [@portabletext/react](https://github.com/portabletext/react-portabletext)\n\nThis component allows for the customization and extension of how Portable Text is rendered within your app. The Rich Text field in Sanity is an array of objects. Content as data!\n\n### Image URL builder\n\nPowered by [@sanity/image-url](https://github.com/sanity-io/image-url)\n\nThe `\u003cRecordCover /\u003e` component has an example of how to generate a full Sanity CDN asset URL based on just the asset's ID. This is useful as we do not need to resolve the full image document in the query.\n\n### Example decorated input\n\nPowered by [@sanity/ui](https://www.sanity.io/ui)\n\nCreating \"decorated\" inputs has never been easier than in Sanity Studio v3. `./app/sanity/components/Duration.tsx` is a 13-line example where a `number` field type to store duration as seconds can also be visualized in minutes. Minimal developer effort, maximum author impact.\n\n### Sanity Client mutation\n\nPowered by [@sanity/client](https://github.com/sanity-io/client)\n\nRequires a token with **editor** permissions in `.env`. Clicking the like/dislike buttons on a Record's page will trigger a React Router action which will send a mutation to the document. This is an example of how user actions on the site may trigger changes on your Sanity dataset.\n\n### Typed and validated responses\n\nPowered by [Zod](https://zod.dev/)\n\nThe results of the Sanity query in `./app/routes/$slug.tsx` are parsed with a Zod validator. This ensures that content is always returned in the expected shape at **run time**, and auto-generates Types which are fed from the `loader` into `useLoaderData()`.\n\n### Dynamic OG Image\n\nThe `record` type generates dynamic open graph images using the `~/routes/resource.og` resource route.\n\n### Other development choices\n\n- eslint and Prettier\n- Tailwind CSS with presets by [@sanity/demo](https://github.com/sanity-io/demo)\n- Tailwind Prose and Prettier plugins\n\n## Sanity Studio\n\nVisit `https://localhost:5173/studio` in your React Router app. You will need to:\n\n1. Rename `.env.template` to `.env`\n2. Set the correct Project ID, Dataset Name and preferred API Version from a project in your [Sanity Manage](https://sanity.io/manage)\n3. Add `http://localhost:5173` to the CORS settings on that project, with Allow Credentials privileges\n\n## Deployment\n\nThis React Router template is specifically configured for hosting on Vercel.\n\n1. Check this repository into your own source control (like GitHub) and deploy to Vercel.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimeongriggs%2Fsanity-react-router-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimeongriggs%2Fsanity-react-router-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimeongriggs%2Fsanity-react-router-template/lists"}