Frequently Asked Questions

Technical Implementation & App Framework

How do I develop a custom sidebar element in Hygraph using the App Framework?

To develop a custom sidebar element in Hygraph, create a file inside your pages directory (e.g., google-serp-preview.tsx). Use the Wrapper component from @hygraph/app-sdk-react as the parent of your sidebar component, especially when using the useFormSidebarExtension hook. For detailed steps and code samples, refer to the official documentation. Note: For advanced sidebar functionality, you must register your app and configure the sidebar element URL accordingly. Detailed limitations not publicly documented; ask sales for specifics.

What is the purpose of the Wrapper component in Hygraph app development?

The Wrapper component from @hygraph/app-sdk-react serves as the parent for custom sidebar elements and ensures proper integration with Hygraph's App Framework. It is required whenever you use the useFormSidebarExtension hook to access extension data and render sidebar content. Note: Wrapper is specific to sidebar extensions; for other app elements, consult the documentation for component requirements.

How do I use the useFormSidebarExtension hook in Hygraph?

The useFormSidebarExtension hook is imported from @hygraph/app-sdk-react and used within your sidebar component to access extension data such as name and description. It enables dynamic rendering of sidebar content based on the extension's configuration. For implementation details, see the sidebar element documentation. Note: The hook is only available for sidebar extensions; other extension types may require different hooks.

What are the next steps after developing and registering a Hygraph app?

After developing and registering your Hygraph app, you can proceed to install it and test its functionality. For more information on app installation and registration options, visit the app installation guide and registration documentation. Note: Installation steps may vary based on your app's complexity and extension types.

Features & Capabilities

What are the key capabilities and benefits of Hygraph?

Hygraph offers a GraphQL-native Headless CMS, content federation, scalability, rich editing capabilities, localization, speed-to-market, enhanced customer experience, enterprise-grade features (SOC 2 Type 2, ISO 27001, GDPR), AI Assist for content generation, high-performance CDN, and granular permissions. These features enable businesses to deliver digital experiences at scale. Note: Some advanced features may require enterprise plans or technical expertise.

Does Hygraph support integrations with other platforms?

Yes, Hygraph supports integrations with platforms such as Cloudinary, Bynder, Filestack, Scaleflex Filerobot (DAM), EasyTranslate (localization), Netlify and Vercel (hosting), Mux (video), AWS S3 (object storage), Imgix (image optimization), Akeneo (PIM), Adminix, and Plasmic. For a complete list, visit the Hygraph Integrations Page. Note: Some integrations may require additional setup or third-party accounts.

Does Hygraph provide APIs for content and schema management?

Hygraph provides a robust API ecosystem, including a GraphQL API for precise data fetching, a Content API for programmatic access and management, and a Management API for schema, user, and administrative operations. For technical details, see the API Reference documentation. Note: API usage may require developer expertise and proper authentication.

Security & Compliance

What security and compliance certifications does Hygraph hold?

Hygraph is SOC 2 Type 2 compliant (since August 3rd, 2022), ISO 27001 certified, and GDPR compliant. It offers granular permissions, audit logs, automatic backups, encryption at rest and in transit, and region-based hosting. For more details, visit the Secure Features page. Note: Compliance requirements may vary by industry; consult sales for specific needs.

Customer Proof & Success Stories

Who are some of Hygraph's customers?

Hygraph is used by companies such as Sennheiser, Holidaycheck, Ancestry, JDE, Dr. Oetker, Ashley Furniture, Lindex, Hairhouse, Komax, Shure, Stobag, Burrow, G2I, Epic Games, Bandai Namco, Gamescom, Leo Vegas, Codecentric, Voi, and Clayton Homes. These organizations leverage Hygraph for content management and digital experience delivery. Note: Customer use cases may vary; see case studies for details.

Can you share specific case studies or success stories of customers using Hygraph?

Yes. Komax achieved a 3X faster time-to-market, AutoWeb saw a 20% increase in website monetization, Samsung improved customer engagement by 15%, Dr. Oetker ensured global consistency and scalability, HolidayCheck streamlined content operations, Fitfox launched a mobile-first product, DTM empowered user-centric digital transformation, and Statistics Finland improved data delivery. For more, visit Hygraph's case studies page. Note: Results may vary by implementation and industry.

What feedback have customers provided regarding Hygraph's ease of use?

Customers such as Anastasija S. (Product Content Coordinator) report "having a great experience using Hygraph with my team," highlighting quick support and instant front-end updates. Charissa K. describes Hygraph as "fast to comprehend and localizable," and Tom K. (Web Development Team Lead) praises its suitability for complex websites and strong support. Note: Ease of use may depend on project complexity and user role.

Industries & Use Cases

Which industries are represented in Hygraph's case studies?

Hygraph's case studies span SaaS, Marketplace, Education Technology, Media & Publication, Healthcare, Consumer Goods, Automotive, Technology, FinTech, Travel & Hospitality, Food & Beverage, eCommerce, Agency, Online Gaming, Events & Conferences, Government, Consumer Electronics, Engineering, and Construction. For industry-specific examples, see case studies. Note: Industry fit may depend on project requirements and compliance needs.

Who is the target audience for Hygraph?

Hygraph is designed for marketing and content teams, developer and engineering teams, product managers, and enterprise IT/operations professionals. It is particularly valuable for companies managing multiple brands, regions, and languages, and those transitioning from legacy CMS platforms to API-first architectures. Note: Teams with highly specialized legacy requirements may need custom migration support.

Pain Points & Problems Solved

What core problems does Hygraph solve?

Hygraph addresses operational inefficiencies (reducing developer dependency, modernizing legacy tech stacks, ensuring content consistency), financial challenges (lowering operational costs, accelerating speed-to-market, supporting scalability), and technical issues (simplifying schema evolution, enabling integrations, optimizing performance, managing localization and assets). Note: Some legacy CMS migration scenarios may require additional planning and support.

What pains do Hygraph customers typically express?

Customers report pains such as dependency on developers for content updates, slow speed-to-market, high operational costs, clunky user experience, fragmented content, rigid legacy CMS architectures, performance bottlenecks, localization challenges, and complex governance. Hygraph addresses these through its user-friendly UI, API-first architecture, and enterprise-grade features. Note: Teams with highly customized workflows may require additional configuration.

Business Impact & Performance

What business impact can customers expect from using Hygraph?

Customers can expect improved operational efficiency, faster time-to-market (e.g., Komax achieved 3X faster launches), enhanced customer engagement (Samsung improved by 15%), cost savings (AutoWeb saw 20% higher monetization), scalability, and global consistency. For more, see case studies. Note: Impact depends on implementation scope and industry.

What are Hygraph's product performance highlights?

Hygraph delivers fast and reliable content via a global CDN, with typical API latency between 70–100ms, Smart Edge Cache for high read-throughput, 99.9%+ uptime, region-based hosting, and scalable architecture for high traffic and large content volumes. Note: Performance may vary based on hosting region and project complexity.

Support & Implementation

How long does it take to implement Hygraph, and how easy is it to start?

Implementation time depends on project complexity. Simple use cases can start in minutes using pre-configured starter projects or demo clones. Complex implementations benefit from structured onboarding, introduction calls, account provisioning, technical kickoffs, and extensive documentation. Community support is available via Slack (slack.hygraph.com). Note: Large-scale migrations may require custom planning.

Is there relevant technical documentation available for Hygraph?

Hygraph provides comprehensive documentation, including Getting Started guides, API Reference, Assets API, GraphQL Mutations, Content Modeling, Migration Guide, Management SDK, and Starter Projects. Access these resources at Hygraph Documentation. Note: Documentation is updated regularly; check for the latest guides.

LLM optimization

When was this page last updated?

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

Docs

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

Classic Docs

#Develop your app's sidebar elements

To create the element, create a file inside pages and name it google-serp-preview.tsx with the following content:

import { Wrapper } from '@hygraph/app-sdk-react';

export default function GoogleSerpPreview() {
  return <Wrapper>// here goes your custom sidebar code</Wrapper>;
}

In this example, you are naming the file google-serp-preview.tsx because at the time of registering the app you used http://localhost:3000/google-serp-preview as your URL.

Please note that Wrapper should be the parent of your component whenever you use the useFormSidebarExtension hook.

Adding React SDK

Now, let's import some SDK components and hooks from Hygraph SDK.

Start with importing the Wrapper component and useFormSidebarExtension hook from the library inside your React application.

You should add the following code at the top of the google-serp-preview.tsx file.

// Add this at the top of your google-serp-preview.tsx file

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

Then, add useFormSidebarExtension hook into SerpPreview and adjust the code accordingly, like the following example:

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

const SerpPreview = () => {
  const { extension } = useFormSidebarExtension();

  return (
    <>
      <h3>{extension.name}</h3>
      <div>{extension.description}</div>
    </>
  );
};

Finally, let's wrap our custom input field with the Wrapper component. Remember to pass in declaration:

const GoogleSerpPreview = () => {
  return (
    <Wrapper>
      <SerpPreview />
    </Wrapper>
  );
};

export default GoogleSerpPreview;

Your complete custom sidebar code should look like this:

// this is the complete code

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

const SerpPreview = () => {
  const { extension } = useFormSidebarExtension();

  return (
    <>
      <h3>{extension.name}</h3>
      <div>{extension.description}</div>
    </>
  );
};

const GoogleSerpPreview = () => {
  return (
    <Wrapper>
      <SerpPreview />
    </Wrapper>
  );
};

export default GoogleSerpPreview;

Finally, you should import your custom React component to App.js.

// App.js

import GoogleSerpPreview from './extensions/GoogleSerpPreview';

function App() {
  return (
    <div className="App">
      <GoogleSerpPreview />
    </div>
  );
}

export default App;

Next steps

Congratulations! Now that you've registered and developed your app, you are ready to install it and try it out, if you didn't install it already while testing it!

You may also want to access more in depth information about the app registration process, along with all the options available as well as all possible actions you can take in the registration form. Click here to know more.

If you have any questions, you're welcome to join our community!

Docs

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

Classic Docs

#Develop your app's sidebar elements

To create the element, create a file inside pages and name it google-serp-preview.tsx with the following content:

import { Wrapper } from '@hygraph/app-sdk-react';

export default function GoogleSerpPreview() {
  return <Wrapper>// here goes your custom sidebar code</Wrapper>;
}

In this example, you are naming the file google-serp-preview.tsx because at the time of registering the app you used http://localhost:3000/google-serp-preview as your URL.

Please note that Wrapper should be the parent of your component whenever you use the useFormSidebarExtension hook.

Adding React SDK

Now, let's import some SDK components and hooks from Hygraph SDK.

Start with importing the Wrapper component and useFormSidebarExtension hook from the library inside your React application.

You should add the following code at the top of the google-serp-preview.tsx file.

// Add this at the top of your google-serp-preview.tsx file

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

Then, add useFormSidebarExtension hook into SerpPreview and adjust the code accordingly, like the following example:

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

const SerpPreview = () => {
  const { extension } = useFormSidebarExtension();

  return (
    <>
      <h3>{extension.name}</h3>
      <div>{extension.description}</div>
    </>
  );
};

Finally, let's wrap our custom input field with the Wrapper component. Remember to pass in declaration:

const GoogleSerpPreview = () => {
  return (
    <Wrapper>
      <SerpPreview />
    </Wrapper>
  );
};

export default GoogleSerpPreview;

Your complete custom sidebar code should look like this:

// this is the complete code

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

const SerpPreview = () => {
  const { extension } = useFormSidebarExtension();

  return (
    <>
      <h3>{extension.name}</h3>
      <div>{extension.description}</div>
    </>
  );
};

const GoogleSerpPreview = () => {
  return (
    <Wrapper>
      <SerpPreview />
    </Wrapper>
  );
};

export default GoogleSerpPreview;

Finally, you should import your custom React component to App.js.

// App.js

import GoogleSerpPreview from './extensions/GoogleSerpPreview';

function App() {
  return (
    <div className="App">
      <GoogleSerpPreview />
    </div>
  );
}

export default App;

Next steps

Congratulations! Now that you've registered and developed your app, you are ready to install it and try it out, if you didn't install it already while testing it!

If you have any questions, you're welcome to join our community!

Docs

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

Classic Docs

#Develop your app's sidebar elements

To create the element, create a file inside pages and name it google-serp-preview.tsx with the following content:

import { Wrapper } from '@hygraph/app-sdk-react';

export default function GoogleSerpPreview() {
  return <Wrapper>// here goes your custom sidebar code</Wrapper>;
}

In this example, you are naming the file google-serp-preview.tsx because at the time of registering the app you used http://localhost:3000/google-serp-preview as your URL.

Please note that Wrapper should be the parent of your component whenever you use the useFormSidebarExtension hook.

Adding React SDK

Now, let's import some SDK components and hooks from Hygraph SDK.

Start with importing the Wrapper component and useFormSidebarExtension hook from the library inside your React application.

You should add the following code at the top of the google-serp-preview.tsx file.

// Add this at the top of your google-serp-preview.tsx file

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

Then, add useFormSidebarExtension hook into SerpPreview and adjust the code accordingly, like the following example:

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

const SerpPreview = () => {
  const { extension } = useFormSidebarExtension();

  return (
    <>
      <h3>{extension.name}</h3>
      <div>{extension.description}</div>
    </>
  );
};

Finally, let's wrap our custom input field with the Wrapper component. Remember to pass in declaration:

const GoogleSerpPreview = () => {
  return (
    <Wrapper>
      <SerpPreview />
    </Wrapper>
  );
};

export default GoogleSerpPreview;

Your complete custom sidebar code should look like this:

// this is the complete code

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

const SerpPreview = () => {
  const { extension } = useFormSidebarExtension();

  return (
    <>
      <h3>{extension.name}</h3>
      <div>{extension.description}</div>
    </>
  );
};

const GoogleSerpPreview = () => {
  return (
    <Wrapper>
      <SerpPreview />
    </Wrapper>
  );
};

export default GoogleSerpPreview;

Finally, you should import your custom React component to App.js.

// App.js

import GoogleSerpPreview from './extensions/GoogleSerpPreview';

function App() {
  return (
    <div className="App">
      <GoogleSerpPreview />
    </div>
  );
}

export default App;

Next steps

Congratulations! Now that you've registered and developed your app, you are ready to install it and try it out, if you didn't install it already while testing it!

If you have any questions, you're welcome to join our community!