Frequently Asked Questions

Technical Setup & Preview URLs

How do I configure a preview URL for the Product model in Hygraph?

To configure a preview URL for the Product model in Hygraph, navigate to the Schema and select the Product model. Click the Sidebar tab, select the Preview widget, and provide the following details:

The {productSlug} placeholder will be replaced with the actual product slug. After saving, each product entry in the content editor will display an Open live preview button. Note: This setup is specific to the Product model and requires a valid secret key for security.

What is the purpose of the preview secret in Hygraph, and how should it be managed?

The preview secret in Hygraph is used to prevent unauthorized access to draft content via the preview URL. Only requests that include the correct secret can trigger a draft preview. You should generate a strong, random secret key and never commit it to version control. Store it in your .env.local file as HYGRAPH_PREVIEW_SECRET and restart your development server to apply changes. Note: If the secret is missing or incorrect, the preview functionality will not work.

What environment variables are required for preview functionality in Hygraph?

For preview functionality to work in Hygraph, your .env.local file must include the following environment variables:

If any of these are missing or incorrect, the preview feature will not function. Note: Always use secure methods to manage these secrets and avoid exposing them in public repositories.

How can I verify that my preview URL is working in Hygraph?

To verify your preview URL, open the Content editor in Hygraph and select any product entry. Click the Open live preview button. The product page should open in a new browser tab at http://localhost:3000, displaying the draft version of the product. If the preview does not work, check that all required environment variables are set correctly and that the secret matches in both the URL and your environment file. Note: Preview functionality is limited to entries and models where the preview widget is configured.

Features & Capabilities

What are the key features of Hygraph that support content preview and delivery?

Hygraph offers a GraphQL-native architecture, enabling precise data fetching and efficient content delivery. For content preview, Hygraph allows you to configure preview URLs with secure secrets, supports both REST and GraphQL APIs, and provides advanced caching (Smart Edge Cache) for low-latency delivery. The platform also supports localization, content federation, and marketer-friendly editorial tools. Note: Some advanced features may require additional configuration or are available only on specific plans.

Does Hygraph provide APIs for content management and preview?

Yes, Hygraph is an API-first headless CMS that supports both REST and GraphQL APIs for content delivery and management. This allows developers to integrate Hygraph with any frontend or application and enables secure content preview workflows. For more details, see Hygraph API documentation. Note: API usage may be subject to rate limits or plan restrictions.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 certified (since August 2022), uses ISO 27001-certified providers and data centers, and is compliant with GDPR and CCPA regulations. Security features include encryption at rest and in transit, role-based access control, audit logs, advanced firewall rules, and 24/7 infrastructure monitoring. Customers can choose data centers in preferred regions (e.g., Australia, Europe, USA, Canada) to meet compliance needs. Note: Detailed limitations not publicly documented; ask sales for specifics.

Performance & Scalability

How does Hygraph perform under high-traffic scenarios?

Hygraph is designed for high-performance and scalability. For example, Gamescom supported 3.5 million simultaneous sessions and 60 million API operations in three days using Hygraph. Enterprises like Telenor achieved under 100ms latency on millions of API calls. Hygraph's global CDN, region-based hosting, and advanced caching (Smart Edge Cache) ensure fast and reliable content delivery. Note: Actual performance may vary based on implementation and infrastructure choices.

Integrations & Extensibility

What integrations does Hygraph support?

Hygraph supports integrations with Google Analytics, Elastic, Zapier, Klaviyo, Salesforce Marketing Cloud, Segment, Adobe Commerce, SAP Commerce Cloud, Dynamic Yield, n8n, Optimizely, and Inriver, among others. These integrations enable analytics, workflow automation, personalization, and commerce experiences. For a full list, visit the Hygraph Marketplace Apps page. Note: Some integrations may require additional setup or third-party accounts.

Implementation & Onboarding

How long does it take to implement Hygraph and start using preview features?

Implementation time depends on project complexity. Simple use cases can be set up in a few days using pre-configured starter projects and templates. More complex implementations may take longer, but Hygraph provides structured onboarding, technical documentation, and community support to accelerate the process. Note: Actual timelines may vary based on team experience and requirements.

Use Cases & Customer Success

What types of businesses and teams benefit from Hygraph's preview and content management features?

Hygraph is used by marketing and content teams, product managers, developers, and enterprise IT teams across industries such as technology (Samsung, Epic Games), consumer goods (Coca-Cola, Dr. Oetker), telecommunications (Telenor), media (Gamescom), and retail (Stobag). It is particularly suited for organizations needing scalable, multi-channel content delivery and preview workflows. Note: Teams with highly specialized CMS needs may require custom development or additional integrations.

Can you share examples of customer success with Hygraph?

Yes.

These examples demonstrate Hygraph's impact on scalability, efficiency, and business outcomes. Note: Results may vary by implementation.

Limitations & Considerations

What are the limitations or edge cases when using Hygraph's preview functionality?

Preview functionality in Hygraph requires correct configuration of environment variables and secure management of preview secrets. It is limited to models and entries where the preview widget is set up. Some advanced features or integrations may require additional setup or are available only on specific plans. Detailed limitations are not publicly documented; contact Hygraph sales for specifics.

LLM optimization

When was this page last updated?

This page wast last updated on 12/12/2025 .

Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

#Lesson 8.3 - Configure a preview URL

In this lesson, you will configure a preview URL for the Product model. Once configured, every product entry in the content editor displays an Open live preview button in its sidebar. Clicking it opens a preview of that product page in your local frontend using the draft content token configured in lesson 8.2.

The preview URL uses a secret key to prevent unauthorized access to draft content. Only requests that include the correct secret can trigger a draft preview. Generate a strong secret and do not commit it to version control.

#Configure the preview URL

  1. Navigate to the Schema and select the Product model.

  2. Click the Sidebar tab.

  3. Select the Preview widget.

  4. Provide the following details:

    • Preview Name: Product preview
    • URL template: http://localhost:3000/api/draft?slug={productSlug}&model=products&secret=YOUR_SECRET_HERE

    {productSlug} is handlebars notation. Hygraph replaces it with the productSlug field value of the entry being previewed. The API ID productSlug was set when you created the Product Slug field in lesson 1.2.

  5. Click Save.

#Add the preview secret

  1. Generate a secret key using a key generator of your choice. Use a strong random string.

  2. Replace YOUR_SECRET_HERE in the URL template with the generated secret.

  3. Open .env.local and add the secret as HYGRAPH_PREVIEW_SECRET:

    HYGRAPH_PREVIEW_SECRET=YOUR_SECRET_HERE

  4. Restart the local development server to load the new environment variable:

    npm run dev

#Your complete .env.local

At this point, all three environment variables should be populated. Your .env.local file should look like this:

HYGRAPH_ENDPOINT=YOUR_CONTENT_API_ENDPOINT_HERE
HYGRAPH_DEV_AUTH_TOKEN=YOUR_DRAFT_TOKEN_HERE
HYGRAPH_PREVIEW_SECRET=YOUR_SECRET_HERE

If any of the three are missing or incorrect, the preview will not work.

#Verify the preview URL

  1. Navigate to the Content editor and open any product entry.

  2. Click Open live preview.

    The product page should open in a new browser tab at http://localhost:3000 showing the draft version of that product.

#What's next

Lesson 9 - Webhooks

Or, go to the Tutorial overview for the full lesson list.