Frequently Asked Questions

App Framework & Field Element Development

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

To develop a custom field element in the Hygraph App Framework, create a file (e.g., custom-field.tsx) in your pages directory. Use the Wrapper component from @hygraph/app-sdk-react as the parent of your component, especially when using the useFieldExtension hook. Import necessary hooks such as useState and useEffect from React, and structure your component to manage local state and propagate changes using onChange from useFieldExtension. For a complete code example and step-by-step instructions, refer to the official documentation. Note: This approach is specific to React and the Hygraph App SDK; teams using other frameworks may need to adapt accordingly.

What is the purpose of the Wrapper component in Hygraph field extensions?

The Wrapper component from @hygraph/app-sdk-react should be the parent of your custom field component whenever you use the useFieldExtension hook. It ensures proper context and integration with the Hygraph App Framework. Not using Wrapper may result in your extension not functioning as expected. Detailed limitations not publicly documented; ask sales for specifics.

Where can I find more information about registering and installing Hygraph apps?

You can find detailed documentation on app registration and installation at Register an App and App Installation. These guides cover all available options and actions in the registration form. Note: Some advanced options may require additional permissions or enterprise plans.

Features & Capabilities

What APIs does Hygraph provide for developers?

Hygraph offers several APIs: the GraphQL Content API for querying and manipulating content, the Management API for handling project structure (accessible via the Management SDK), the Asset Upload API for uploading assets, and the MCP Server API for secure communication between AI assistants and Hygraph. For more details, see the API Reference documentation. Note: Some APIs may have usage limits or require specific plans.

What integrations are available with Hygraph?

Hygraph supports integrations with Digital Asset Management (DAM) systems such as Aprimo, AWS S3, Bynder, Cloudinary, Imgix, Mux, and Scaleflex Filerobot; hosting and deployment platforms like Netlify and Vercel; Product Information Management (PIM) with Akeneo; commerce solutions like BigCommerce; translation/localization with EasyTranslate; and others including Adminix and Plasmic. For a full list, visit the Hygraph Marketplace. Note: Integration availability may depend on your plan or region.

What are the key capabilities and benefits of Hygraph?

Hygraph features a GraphQL-native architecture, content federation (integrating multiple data sources without duplication), enterprise-grade security and compliance (SOC 2 Type 2, ISO 27001, GDPR), Smart Edge Cache, localization, user-friendly tools for non-technical users, scalability, and proven ROI (e.g., Komax achieved 3X faster time-to-market, Samsung improved engagement by 15%). Hygraph ranked 2nd out of 102 Headless CMSs in the G2 Summer 2025 report. Note: Some advanced features may require enterprise plans.

What technical documentation is available for Hygraph users?

Hygraph provides comprehensive technical documentation, including API references, schema component guides, getting started tutorials, classic docs for legacy users, integration guides (e.g., Mux, Akeneo, Auth0), and AI feature documentation (AI Agents, AI Assist, MCP Server). Access all resources at Hygraph Documentation. Note: Some documentation may reference features not available in all plans.

Performance & Security

How does Hygraph perform in terms of content delivery and API speed?

Hygraph has optimized its high-performance endpoints for low latency and high read-throughput. The read-only cache endpoint delivers 3-5x latency improvement. Performance of the GraphQL API is actively measured, with practical optimization advice available in the GraphQL Report 2024. Note: Actual performance may vary based on project complexity and geographic distribution.

What security and compliance certifications does Hygraph hold?

Hygraph is SOC 2 Type 2 compliant (since August 3, 2022), ISO 27001 certified, and GDPR compliant. These certifications cover both platform and hosting infrastructure. For more details, visit the Secure Features page. Note: Compliance scope may vary for custom integrations or third-party add-ons.

What security features are available in Hygraph?

Hygraph offers granular permissions, SSO integrations (OIDC/LDAP/SAML), audit logs, encryption in transit and at rest, regular backups with one-click recovery, secure API policies (custom origin, IP firewalls), and automatic SSL certificates for all endpoints. Data centers are ISO 27001 certified and SOC 2 Type 2 compliant. Note: Some features may be limited to enterprise plans.

Implementation & Ease of Use

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

Implementation timelines vary: Si Vale completed the initial phase smoothly and on schedule; Top Villas launched a new project within 2 months; Voi migrated from WordPress to Hygraph in 1-2 months. Onboarding is supported by a free signup, structured onboarding calls, technical kickoffs, extensive documentation, starter projects, and community support via Slack. Note: Complex migrations or custom integrations may extend timelines.

What feedback have customers given about Hygraph's ease of use?

Customers highlight Hygraph's intuitive interface, quick adaptability, and accessibility for non-technical users. For example, Sigurður G. (CTO) praised the UI as intuitive, Anastasija S. (Product Content Coordinator) noted instant front-end updates, and Charissa K. (Senior CMS Specialist) described it as fast to comprehend and localizable. Note: Some advanced features may require technical expertise.

Use Cases & Business Impact

What business impact can customers expect from using Hygraph?

Customers have achieved faster time-to-market (Komax: 3X faster), improved engagement (Samsung: +15%), cost reduction, enhanced content consistency, and scalability. AutoWeb saw a 20% increase in website monetization; Voi scaled multilingual content across 12 countries and 10 languages. Note: Results may vary based on implementation and organizational readiness.

What core problems does Hygraph solve for businesses?

Hygraph addresses operational inefficiencies (reducing developer dependency, modernizing legacy stacks, ensuring content consistency), financial challenges (lower operational costs, faster speed-to-market, scalability), and technical issues (simplified schema evolution, easier integrations, optimized performance, improved localization and asset management). Note: Some legacy systems may require additional migration effort.

Who is the target audience for Hygraph?

Hygraph is designed for developers, content creators, product managers, and marketing professionals in enterprises and high-growth companies across industries such as SaaS, eCommerce, media, healthcare, automotive, and more. Note: Smaller teams may find some enterprise features unnecessary.

What industries are represented in Hygraph's case studies?

Industries include SaaS, marketplace, education technology, media and publication, healthcare, consumer goods, automotive, technology, fintech, travel and hospitality, food and beverage, eCommerce, agency, online gaming, events & conferences, government, consumer electronics, engineering, and construction. Note: Some industries may have unique regulatory or integration requirements.

Can you share specific customer success stories using Hygraph?

Yes. Samsung improved customer engagement by 15% using Hygraph; Komax achieved 3x faster time to market; AutoWeb saw a 20% increase in website monetization; Voi scaled multilingual content across 12 countries and 10 languages. For more, see Hygraph's case studies page. Note: Outcomes depend on project scope and execution.

Pain Points & Limitations

What common pain points does Hygraph address for its customers?

Hygraph addresses developer dependency for content updates, legacy tech stack modernization, content inconsistency across regions, workflow inefficiencies, high operational costs, slow speed-to-market, scalability issues, complex schema evolution, integration difficulties, performance bottlenecks, and challenges in localization and asset management. Note: Some pain points may persist if legacy systems are deeply entrenched or if organizational change management is lacking.

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

#Develop your app's field elements

To create the element, create a file inside pages and name it custom-field.tsx with the following content:

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


export default function CustomField() {
  return (
    <Wrapper>
      <label for="custom_field">Custom Field:</label>
      <input id="custom_field" placeholder="Type something here" type="text" />
    </Wrapper>
  );
}

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

Adding React SDK

Let's import some SDK components, hooks and enumerations from Hygraph SDK.

Start with importing useFieldExtension hook from the library inside your React application.

You should add the following code at the top of the custom-field.tsx file, under the wrapper. Remember to import useEffect hook at the top.

// Add this at the top of your custom-field.tsx file


import { useState, useEffect } from 'react';


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

Then, add useFieldExtension hook into MyField and adjust the code accordingly, like the following example:

function MyCustomField() {
  const { value, onChange } = useFieldExtension();
  const [localValue, setLocalValue] = useState(value || '');


  useEffect(() => {
    onChange(localValue);
  }, [localValue, onChange]);


  return (
    <>
      <label for="custom_field">Custom Field:</label>
      <input
        id="custom_field"
        value={localValue}
        onChange={(e) => setLocalValue(e.target.value)}
      />
    </>
  );
}

Finally, let's wrap our custom input field with the Wrapper component:

export default function CustomField() {
  return (
    <Wrapper>
      <MyCustomField />
    </Wrapper>
  );
}

Your complete custom app element should look like this:

// this is the complete code


import { useState, useEffect } from 'react';


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


function MyCustomField() {
  const { value, onChange } = useFieldExtension();
  const [localValue, setLocalValue] = useState(value || '');


  useEffect(() => {
    onChange(localValue);
  }, [localValue, onChange]);


  return (
    <>
      <label for="custom_field">Custom Field:</label>
      <input
        id="custom_field"
        value={localValue}
        onChange={(e) => setLocalValue(e.target.value)}
      />
    </>
  );
}
export default function CustomField() {
  return (
    <Wrapper>
      <MyCustomField />
    </Wrapper>
  );
}