Remix is a modern React-based web framework focused on developer experience and performance. When integrated with Hygraph, Remix leverages server-side rendering, efficient data loading, and seamless backend integration to build fast, scalable, and interactive web applications. For more details, see the Remix + Hygraph Overview.
How do I create a new Remix app for use with Hygraph?
To create a new Remix app, use the following command in your terminal: npx create-remix@latest --template remix-run/remix/templates/remix-javascript for JavaScript, or npx create-remix@latest for TypeScript. This initializes your project structure for Remix development. For step-by-step instructions, visit the official guide.
How do I add Tailwind CSS to my Remix app?
Install Tailwind CSS, PostCSS, and Autoprefixer by running npm install tailwindcss postcss autoprefixer -D && npx tailwindcss init. Update your tailwind.config.js and postcss.config.cjs files as described in the documentation, and import app/tailwind.css in your app/root.jsx. For full instructions, see Add Tailwind CSS to your Remix app.
How do I connect my Remix app to Hygraph and fetch data?
First, clone the Hygraph demo project. Then, configure Content API access permissions in your Hygraph project settings. Copy the High Performance Content API endpoint and save it as VITE_HYGRAPH_URL in your .env file. Use a GraphQL client like graphql-request to fetch data from Hygraph. For a detailed walkthrough, see Connecting Remix to Hygraph.
How do I create dynamic page routes in Remix using Hygraph data?
Create a file called page.$slug.jsx or page.$slug.tsx in your app/routes directory. Use the GraphQL client to fetch page data from Hygraph and render it dynamically based on the slug. This enables you to display content for each page entry from Hygraph. For code examples, see Creating dynamic page routes with Remix.
Where can I find starter projects and code examples for Remix + Hygraph?
You can clone a starter project directly from Hygraph or explore code examples in the documentation. Visit Remix Documentation Starter and Remix Starters for ready-to-use templates.
Features & Capabilities
What are the key features of Hygraph?
Hygraph offers a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. It supports integrations with platforms like Netlify, Vercel, Shopify, BigCommerce, and more. Hygraph also provides enterprise-grade security, audit logs, SSO, and compliance certifications. For a full list of features, visit Hygraph Features.
Does Hygraph provide a GraphQL API?
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. Learn more at the Hygraph API Reference.
What integrations are available with Hygraph?
Hygraph integrates with hosting platforms (Netlify, Vercel), eCommerce solutions (Shopify, BigCommerce, commercetools), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization (Ninetailed), AI (AltText.ai), and more. See the full list at Hygraph Integrations.
Pricing & Plans
What is Hygraph's pricing model?
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For details, visit the Hygraph Pricing Page.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more, visit Hygraph Security Features.
Use Cases & Benefits
Who can benefit from using Hygraph?
Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. It serves modern software companies, enterprises modernizing their tech stack, and brands scaling across geographies. For more, see Hygraph Case Studies.
What business impact can customers expect from Hygraph?
Customers can expect time savings, faster speed-to-market, improved operational efficiency, and enhanced customer experience through scalable and consistent content delivery. For example, Komax achieved 3X faster time to market, and Autoweb saw a 20% increase in website monetization. See more success stories here.
Support & Implementation
What support and training does Hygraph offer?
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, and a community Slack channel. For more, visit Hygraph Contact Page.
How easy is it to get started with Hygraph?
Hygraph is designed for quick onboarding. Non-technical users can start immediately, and resources like documentation and onboarding guides are available. For example, Top Villas launched a new project in just 2 months. Sign up for a free account at Hygraph Platform.
Customer Proof & Case Studies
Who are some of Hygraph's customers?
Hygraph is trusted by brands such as Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. Explore more at Hygraph Case Studies.
What industries are represented in Hygraph's case studies?
Industries include food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. See all case studies here.
Technical Documentation & Resources
Where can I find technical documentation for Hygraph?
Comprehensive technical documentation is available at Hygraph Documentation, including implementation guides for different frameworks and API references.
Where can I find implementation guides for different frameworks?
Implementation guides for frameworks like Remix, Next.js, Nuxt, Astro, and more are available in the Implementations section of the Hygraph documentation.
Remix is a modern web framework that focuses on developer experience and performance by leveraging a React-based approach to build web applications and UIs. It emphasizes server-side rendering, efficient data loading, and seamless integration with various backends and cloud environments to create fast, scalable, and interactive web experiences.
After cloning, you will have a simple project that contains one content model called Page that contains fields for Title, Slug, and Body; and one content entry.
If you navigate to the Schema builder and click on the Page model, you will see this:
Demo project - Page model
And if you navigate to the Content editor and view the sample entry details, you'll see this:
Before you can connect Remix to Hygraph, you will need to configure Content API access permissions for unauthenticated requests.
To do this, go Project settings > Access > API Access > Content API in your Hygraph project, scroll to find the Content Permissions box that reads Would you like us to initialize some defaults?, and click Yes, initialize defaults:
Content API permissions
Finally, copy the High Performance Content API endpoint from Project settings > Access > API Access > Endpoints. You use it to connect Remix to Hygraph later on.
Next, you should test if you can fetch the information in the sample content entry that we showed you earlier. To do this, navigate to the API Playground in your project and use the following query:
Query
Response
If you execute the query, the response should fetch the sample query in the demo project you cloned.
GraphQL clients make communication easier by abstracting away small details and implementing additional features such as static typing of our query results.
We will use the npm package graphql-request because it is lightweight, has excellent TypeScript support, and supports both Node.js and browsers.
Use the terminal to go back to your Remix app, and type the following command:
After installing the GraphQL client, go to the app/routes directory and modify or create a file called _index.jsx or _index.jsx if you are using TypeScript, and add the following code:
JavaScript
TypeScript
Code overview for the homepage
The code you just added creates a query function that fetches a list of pages from Hygraph and renders them on the homepage as a bulleted list of links.
When you run your Remix app by using the command npm run dev, you should get a list of pages on the homepage.
Now, that we have a list of pages in our homepage, we need to create a dynamic route for each page. To do this, create a new file in the app/routes directory called page.$slug.jsx or page.$slug.tsx. When finished, your source directory should resemble the following structure:
// Remix app directory structure
app/
┣ routes/
┃ ┣ _index.tsx
┃ ┗ page.$slug.tsx
┣ entry.client.tsx
┣ entry.server.tsx
┣ root.tsx
┗ tailwind.css
Add the following code to your page.$slug.jsx or page.$slug.tsx file:
JavaScript
TypeScript
Code overview for dynamic page route
The code you just added will create a dynamic route for each page. It will fetch the page content from Hygraph and render it on the page.
When you run your Remix app by using the command npm run dev, you should be able to see the page content when you click on a page link.
Dynamic page
Congratulations! You have a homepage and a dynamic page route to render all pages and their content.
Pro Tip
This was a simple and quick example of how to fetch and render content from Hygraph using Remix.