Preview URLs in Hygraph are automatically generated links that allow you to preview content in your frontend before it's published. They provide editors with a quick way to see how content will appear live, directly from the Content Editor's sidebar. Learn more.
To create a preview URL, navigate to the Schema builder, select your model, and use the Preview widget in the right sidebar. Fill in the Preview name and URL template fields, specifying your website URL and how the preview slug should be constructed. You can add multiple preview URLs for different environments. Step-by-step guide.
Yes, you can edit a preview URL by navigating to the model and clicking the pencil icon next to the widget. To delete, use the trash icon. Note: At least one preview URL must remain; deleting the last one requires re-adding the widget if needed. More details.
When creating a preview URL, use the URL template field to specify how the URL should be built using field values from the content entry. You can use handlebars notation to include unique identifiers. The template should match your website's URL structure. Learn more.
If you delete the only preview URL for a model, you will encounter a validation error when saving. To remove the last preview URL, you must do so from the sidebar tab and re-add the widget if you need it again. Details here.
Yes, preview URLs are designed to pull content from the draft stage, allowing you to see unpublished changes before publishing. Ensure your preview configuration uses draft content for accurate previews. More info.
Some Hygraph templates, such as the Docs Starter, come with pre-configured preview URLs. You can edit these as needed for your project. Docs Starter example.
Once configured, preview URLs appear under the Preview menu in the right sidebar of the Content Editor. You can click the link to view the preview, and select from multiple URLs if configured.
Yes, Hygraph allows you to add multiple preview URLs for a single model, such as for development, staging, or production environments. Use the '+ Add more' button when configuring preview URLs.
Hygraph provides documentation, example projects like Docs Starter, and tutorials such as 'How to Create a Preview Mode with Remix and Hygraph.' See resources.
Yes, the preview URL must point to a running website for the preview to work. The feature creates a shortcut to link directly to your content from the Content Editor.
Yes, you can use field values from the content entry to build dynamic preview URLs using handlebars notation in the URL template field.
Ensure your preview configuration pulls content from the draft stage, not the published stage, to display unpublished changes in the preview.
You can create multiple preview URLs for a single model, allowing flexibility for different environments and use cases.
Check that your website is running at the specified URL, ensure the preview configuration uses the correct content stage, and consult Hygraph documentation or community support for guidance.
Yes, preview URLs can be configured to preview content for different locales, supporting multilingual workflows in Hygraph.
Preview URLs are a core feature available across Hygraph plans. For specific plan details, refer to the Hygraph pricing page.
You can find example projects such as Docs Starter on GitHub, which demonstrate the use of preview URLs in Hygraph. See example.
Preview URLs streamline the content workflow by allowing editors to quickly preview changes before publishing, reducing errors and improving collaboration between teams.
Yes, you can configure separate preview URLs for staging, production, or other environments, enabling flexible content review processes.
Hygraph offers a GraphQL-native architecture, content federation, scalability, enterprise-grade features, user-friendly tools, Smart Edge Cache, localization, and cost efficiency. These capabilities empower businesses to modernize content management and deliver exceptional digital experiences. See features.
Hygraph eliminates developer dependency, modernizes legacy tech stacks, ensures content consistency for global teams, and streamlines workflows with intuitive tools. HolidayCheck reduced bottlenecks by enabling marketers to update content independently.
Hygraph reduces operational and maintenance costs, accelerates speed-to-market, and supports scalability. For example, Samsung scaled globally while reducing maintenance overhead.
Hygraph simplifies schema evolution, integrates with third-party systems via robust GraphQL APIs, optimizes performance with Smart Edge Cache, and enhances localization and asset management for global teams.
Hygraph is the first GraphQL-native Headless CMS, offers content federation, enterprise-grade features, and user-friendly tools. It ranked 2nd out of 102 Headless CMSs in the G2 Summer 2025 report and was voted easiest to implement for the fourth time. See report.
Key metrics include time saved on content updates, system uptime, content consistency, user satisfaction scores, reduction in operational costs, speed to market, scalability metrics, and ROI. See more KPIs.
Hygraph serves industries such as SaaS, Marketplace, EdTech, Media, Healthcare, Consumer Goods, Automotive, Technology, FinTech, Travel, Food & Beverage, eCommerce, Agencies, Gaming, Events, Government, Electronics, Engineering, and Construction. See case studies.
Yes. Samsung built a scalable, API-first application; Komax achieved 3x faster time to market; AutoWeb saw a 20% increase in website monetization; HolidayCheck reduced developer bottlenecks. See more stories.
Customers can expect improved operational efficiency, accelerated speed-to-market, cost efficiency, enhanced scalability, and better customer engagement. For example, Komax managed 20,000+ product variations across 40+ markets with 3x faster launches.
Customers praise Hygraph's intuitive UI, accessibility for non-technical users, and flexibility. It was recognized for 'Best Usability' in Summer 2023. See reviews.
Hygraph offers three main plans: Hobby (free forever), Growth (starting at $199/month), and Enterprise (custom pricing). Each plan includes different features and limits. See pricing.
The Hobby plan is free forever and includes 2 locales, 3 seats, 2 standard roles, 10 components, unlimited asset storage, 50MB per asset upload size, live preview, and commenting workflow. Sign up.
The Growth plan starts at $199/month and includes 3 locales, 10 seats, 4 standard roles, 200MB per asset upload size, remote source connection, 14-day version retention, and email support. Get started.
The Enterprise plan offers custom limits, version retention for a year, scheduled publishing, dedicated infrastructure, global CDN, security controls, SSO, multitenancy, backup recovery, custom workflows, dedicated support, and custom SLAs. Try Enterprise.
Implementation time varies by project complexity. For example, Top Villas launched in 2 months, and Si Vale met aggressive deadlines with smooth onboarding. See Top Villas story.
Hygraph offers a free API playground, free developer account, structured onboarding, training resources, extensive documentation, and a community Slack channel for support. See docs.
Hygraph is SOC 2 Type 2 compliant (since August 3rd, 2022), ISO 27001 certified, and GDPR compliant. It offers granular permissions, SSO, audit logs, encryption, backups, and enterprise-grade compliance. See security report.
Hygraph uses encryption at rest and in transit, granular permissions, SSO integrations, audit logs, regular backups, and provides transparency through security reporting. Learn more.
Hygraph provides Smart Edge Cache for faster content delivery, high-performance endpoints, and practical advice for optimizing GraphQL API usage. Read more.
Hygraph supports seamless scaling for growing content demands, with features like global CDN coverage, multitenancy, and custom SLAs for enterprise customers.
This page wast last updated on 12/12/2025 .
Preview URLs are automatically generated links that allow you to preview content in your frontend before it's published.
Configuring this feature adds a button to the Content Editor's right sidebar, so editors can quickly access content previews.
Create a Preview URL
Preview widget from the right sidebar.Preview name and the URL template fields. This is where you can add your own website URL and specify how the preview slug should be constructed from field values in the content entry. You can add multiple preview URLs by clicking on the + Add more button located at the bottom of the screen. So you could, for instance, add a preview URL for development and another for staging. Here you can find some information on how to define your own preview URLs.Save.Some templates, like our Docs Starter come with pre-configured preview URLs. In these cases, you'd need to edit an already created preview URL rather than create one from scratch. To edit a preview, simply navigate to the model that contains it, and click on the pencil icon located to the right of the widget.
If you then navigate to the Content Editor and access content that uses the model where you included the preview URL, you will be able to see the link under the Preview menu in the right sidebar. Click on this link to access the preview.
Preview URL in content editor
If you configured more than one preview URL for that model, you will be able to select the one you want by using the dropdown.
Create a Preview URL
Update to save.The preview URL screen must contain at least one preview URL. If the screen contains only one preview URL and you delete it, attempting to save will result in a validation error.
If you only have one preview URL configured and you need to delete it, you must do so directly from the sidebar tab of the selected model. Note than in this case you will need to add the preview URL widget again if you need to use it in the future.
During the process of creating a preview URL, you will be prompted to complete the Preview name and the URL template fields. Complete the Preview name field with a name that will help you identify the preview URL in the Content Editor later.
The URL template field is where you will define how the URL should be built, using field values from the content entry. The exact way each preview URL will be built will depend on your website's URL structure. Typically, you will start with your domain, then a section such as a blog. Finally, you will use handlebars notation to include a field that is unique to the content you want to preview, to be used as an identifier.
Define a Preview URL
As soon as you type in the open curly brace, a list will display showing all the available fields - also included above under the Available fields screen section. You can use more than one of the available fields, if needed.
There needs to be a website running at the URL you entered for it to work. This feature simply creates a shortcut to link to that content directly from your Content Editor.
If you are generating a preview, always make sure that preview URLs pull content from the draft stage and not from published. Otherwise your previews won't include any unpublished changes.