Frequently Asked Questions

Content Modeling & Schema Design

What is content modeling in Hygraph?

Content modeling in Hygraph is the process of organizing content by defining content types and their relationships. It is a high-level approach to content strategy, focusing on how different pieces of content relate to each other and how they will be used across your digital properties. For more details, see the Hygraph documentation on content modeling.

How does schema design differ from content modeling in Hygraph?

Schema design in Hygraph is a lower-level process than content modeling. While content modeling focuses on the organization and relationships of content types, schema design defines the precise data structure, including field names, types, and their relations—similar to database design. Schema design determines how content is stored and accessed within Hygraph. Learn more in the Hygraph documentation.

How does Hygraph support modular content modeling?

Hygraph supports modular content modeling by allowing users to create reusable components and blocks within their schema. These components can be nested and reused across different models, enabling content editors to build complex, dynamic pages without developer intervention. For example, the "Modular Pages" approach lets editors add prebuilt block components to a page model, add content, and publish when ready. This modularity increases flexibility and scalability. See the blog post for implementation details.

What is the SEO component in Hygraph and how is it used?

The SEO component in Hygraph is a reusable schema component designed to manage SEO-related data for any content model. It can be added as a field to any model, allowing you to retrieve SEO data alongside page data and build SEO-compliant pages. This approach streamlines SEO management across your website. For more, see the blog post section on SEO components.

How does Hygraph help align teams during content modeling?

Hygraph helps align teams by enabling designers, developers, and content editors to use the same naming conventions and design tokens across Figma designs, codebase, and schema. This consistency ensures that everyone speaks the same language, making it easier to implement and manage components and blocks. The result is faster feature releases and improved collaboration. Read more in the Aligning Teams section.

Features & Capabilities

What are the key features of Hygraph?

Hygraph offers a GraphQL-native architecture, content federation, modular content modeling, reusable components, scalability, and a user-friendly interface. It also provides robust integrations, enterprise-grade security, and a powerful API for efficient content management. For a full list, visit the Hygraph Features page.

Does Hygraph support integrations with other platforms?

Yes, Hygraph supports a wide range of integrations, including Netlify, Vercel, Shopify, BigCommerce, commercetools, Lokalise, Crowdin, AWS S3, Cloudinary, Mux, Ninetailed, and more. For a complete list, see the Hygraph Integrations documentation.

Does Hygraph provide an API for content management?

Yes, Hygraph provides a powerful GraphQL API that allows you to fetch and manage content efficiently. Learn more at the Hygraph API Reference.

How does Hygraph optimize content delivery performance?

Hygraph emphasizes optimized content delivery performance, which directly impacts user experience, engagement, and search engine rankings. Rapid content distribution and responsiveness help reduce bounce rates and increase conversions. For more details, visit this page.

Use Cases & Benefits

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises looking to modernize their tech stack, and brands aiming to scale across geographies or improve development velocity. See case studies for examples.

What business impact can customers expect from using Hygraph?

Customers can expect significant business impacts, including time savings through streamlined workflows, ease of use with an intuitive interface, faster speed-to-market, and enhanced customer experience through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency. Learn more.

What are some real-world success stories of Hygraph customers?

Hygraph customers have achieved impressive results, such as Komax achieving a 3X faster time to market, Autoweb seeing a 20% increase in website monetization, and Samsung improving customer engagement with a scalable platform. Dr. Oetker enhanced their digital experience using MACH architecture. Explore more customer stories.

What industries are represented in Hygraph's case studies?

Hygraph's case studies span industries such as 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.

Technical Requirements & Documentation

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation for Hygraph is available at hygraph.com/docs. It covers everything from getting started to advanced integrations and API usage.

How easy is it to get started with Hygraph?

Hygraph is designed for ease of use, even for non-technical users. You can sign up for a free-forever account and access resources like documentation, video tutorials, and onboarding guides. For example, Top Villas launched a new project in just 2 months using Hygraph. Get started here.

What training and support does Hygraph offer to new users?

Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to detailed documentation, video tutorials, webinars, and a community Slack channel. Contact Hygraph for support.

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 full 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. These certifications ensure enterprise-grade security and data protection. For more, see the Hygraph Security Features page.

How does Hygraph protect sensitive data?

Hygraph protects sensitive data with features like SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. These measures help meet regulatory standards and ensure data security. Learn more about Hygraph security.

Customer Experience & Feedback

What do customers say about Hygraph's ease of use?

Customers praise Hygraph for its intuitive and user-friendly interface, noting that it is 'super easy to set up and use' and accessible for both technical and non-technical users. The logical UI makes onboarding and daily operations straightforward. Read more feedback.

Product Information & Company Vision

What is Hygraph's overarching vision and mission?

Hygraph's vision is to unify data and enable content federation, empowering businesses to create impactful digital experiences. Its mission is to remove traditional content management pain points through a GraphQL-native architecture, modernizing the concept of a Headless CMS. Learn more about Hygraph.

Customer Proof

Who are some of Hygraph's notable customers?

Notable Hygraph customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See more customer stories.

Velocity at Scale: Join the Launch of Hygraph’s Latest AI Innovations

How Hygraph uses Hygraph III: Content modeling

How we built a versatile, scalable, and future-proof content model and schema design for the new Hygraph website.
Özgür Uysal

Written by Özgür 

Sep 16, 2024
Mobile image

Building a versatile, scalable and future proof content model and schema design is crucial for your website's data foundation. Before you start, you ideally need to have at least the draft designs of your UI and speak to all stakeholders in the project. You should carefully assess your current and potential future needs. For us this process was a bit less painful, since we already had an existing website and we only needed to improve some areas.

#Content modeling vs. schema design

Content modeling and schema design are very similar concepts, but they serve slightly different purposes. Content modeling is more about the organization of content, defining content types and how they relate to each other. It’s a high level process for content strategy.

Schema design on the other hand, is a lower level process. It defines the precise data structure, field names and types and their relations similar to database design. It focuses more on how the content will be stored and accessed.

What is a content modeling?

Learn more about content modeling in our documentation.

#Hygraph components

Hygraph components have been very valuable for us during the development of our schema design.

They significantly simplified the process when we needed reusable templates. You can think of components similar to those in modern web development. They act as reusable templates, allowing you to provide a different content, or a different behavior or look for each instance, much like how the props are used in a UI component.

We created the components and blocks from our design system also in our Hygraph schema. For example, our “Button” component in schema looks like this and it uses the same props as our React component in our design system.


Notice how “variant”, “theme” and “size” fields are enumerations, to pick a value consistently from a predefined set. We can then reuse these components in other components by nesting or in models as fields.

Models are where you store your actual content. They are similar to database tables. You can add fields, create relations between other models etc. If you have blog posts, you would typically create a “Blog Post” model to store your blog posts. You can then decide on the model fields such as title, category, authors and SEO.

#SEO component

Whether you have an eCommerce app, a company website or a personal blog, effective SEO is essential for online visibility. We want to specifically highlight the SEO component we built for the Hygraph website, as it will be particularly valuable for SEO optimizations. We implemented it as a Hygraph component, so that we can add it as a field in any content model we need.

Here’s how our SEO component looks like:

As you can see, it’s a simple yet highly effective component that we incorporate into our content models. We retrieve the SEO data alongside the page data to build an SEO-compliant page. You’re welcome to use this as a foundation for your projects. Naturally, the frontend implementation will vary depending on your chosen library or framework.

#Aligning teams

One of our primary goals was to make sure designers, developers and content editors speak the same language. To begin with, we aligned design and code using the same design system token names both in our Figma designs and codebase.

We continued this approach with components and blocks too. As mentioned in the previous section, we named all components, blocks and their properties the same in designs, in code and in our schema designs in Hygraph. This way when developers are implementing a component or a page, they’d know what properties a component will take or what blocks will be used on a page just by looking at the Figma design.

Similarly, a content editor can easily build the page in Hygraph by selecting the same content blocks as in Figma designs. We have basically adopted all the benefits of the component based approach of modern JavaScript frameworks to Hygraph, thanks to its super versatile data modeling capabilities with basic and modular components support. This has significantly improved the speed at which we release new features and pages, while keeping everything well-organized, easy to scale, and maintain.

Internal image _ ozgur-s part (2).png

#Modular pages

In a marketing department, everything moves very quickly. Oftentimes, content editors want to build and publish new pages quickly. So, we wanted to allow content editors to build and publish landing pages without the need of a developer or a designer.

The solution is, as we call it “Modular Pages”. Modular pages allow content editors to add the prebuilt block components to a page model, add the content and publish when ready.

If we go into implementation details a bit more, here’s how the schema would look like.

Internal image _ ozgur-s part (7).png

A typical website page has sections and each section has one or more block components in it. As you can see, our Page model has a field called “sections” as component field type that accepts multiple “Section” components. Then the “Section” component has a modular component type field called “blocks”. This way we can add multiple sections to a page and each section can contain one or more blocks.

A visual representation of this structure would look like this:

Internal image _ ozgur-s part (3).png

Once you have a schema like this, you can fetch your page data using GraphQL union types and render your page by mapping sections and blocks for each section in your frontend.

Pro Tip

Beware that using union types can lead to expensive queries and needs optimizations. Make sure to read how you can optimize union queries in our documentation.

#Conclusion

Using all the new Hygraph features along with our design system has made a big difference in how we build our website. It has simplified our workflow, giving our content editors the freedom to create dynamic pages with ease, without compromising the consistency, look and feel. It's been great to see our designers, developers, and content editors all work together more smoothly, speeding up our ability to launch new features and pages.

Looking ahead, we're excited to keep refining our website and sharing more about what we learn along the way. If you're thinking about refreshing your website or creating your own design system, we hope our experience gives you some helpful ideas.

Blog Author

Özgür Uysal

Özgür Uysal

Staff Engineer, Design System

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.