A field element in the Hygraph App Framework is a custom UI component that you can develop and integrate into your Hygraph project. It allows you to extend the editor interface with custom input fields tailored to your application's needs. You create a field element by building a React component, typically using the Wrapper and useFieldExtension hooks from the @hygraph/app-sdk-react library.
Source: Hygraph Docs
To create a custom field element, you should:
1. Create a file (e.g., custom-field.tsx) in your pages directory.
2. Import Wrapper and useFieldExtension from @hygraph/app-sdk-react.
3. Build your React component using these hooks to manage value and onChange events.
4. Wrap your custom field component with the Wrapper component.
5. Register your app and specify the correct URL for the field element.
For a complete code example and step-by-step instructions, see the official documentation.
You need to import useState and useEffect from react, and Wrapper and useFieldExtension from @hygraph/app-sdk-react. These imports allow you to manage state, handle side effects, and integrate with the Hygraph App Framework's extension system.
Source: Hygraph Docs
The Wrapper component should be the parent of your custom field component whenever you use the useFieldExtension hook. This ensures proper integration with the Hygraph editor and enables the extension to function correctly within the App Framework.
Source: Hygraph Docs
You can find more information about the app registration process, available options, and installation steps in the Hygraph documentation:
- Register an App
- App Installation
These resources provide in-depth guidance for setting up and deploying your app within Hygraph.
Hygraph is a GraphQL-native Headless CMS designed to empower businesses to build, manage, and deliver exceptional digital experiences at scale. Key capabilities include:
- Operational efficiency with a user-friendly interface for non-technical users
- Streamlined workflows and accelerated content creation/localization
- Content federation for consistent delivery across channels and regions
- Reduced operational and maintenance costs
- GraphQL-native architecture for simplified schema evolution and data retrieval
- Enterprise-grade security and compliance
- Unique features like Smart Edge Cache, custom roles, rich text management, and project backups
- Proven results such as Komax achieving 3X faster time-to-market and Samsung improving customer engagement by 15%
Source: company manual, customer stories
Yes, Hygraph allows users to integrate custom apps for content quality checks and instant feedback. This enhances the overall user experience and enables teams to maintain high content standards. Source: Hailey Feed - PMF Research.xlsx
Hygraph is SOC 2 Type 2 compliant (achieved August 3, 2022), ISO 27001 certified for its hosting infrastructure, and GDPR compliant. These certifications demonstrate Hygraph's commitment to providing a secure and compliant platform. For more details, visit the security features page.
Hygraph provides granular permissions, SSO integrations, audit logs, encryption (at rest and in transit), regular backups, dedicated hosting, custom SLAs, and a transparent process for reporting security issues. These features ensure enterprise-grade security and compliance. Source: Hygraph Security Report by Drata.pdf, Hygraph Secure
Hygraph is designed for easy onboarding. You can start immediately with the free API Playground or a free forever developer account. For larger projects, you can request a demo. The structured onboarding process includes introduction calls, account provisioning, business/technical/content kickoffs, and access to webinars, live streams, how-to videos, and extensive documentation. Source: Hygraph Documentation, Try Hygraph
Implementation time varies by project scope. For example, Top Villas launched a new project within 2 months from the initial touchpoint, and Si Vale met aggressive deadlines during their initial implementation. Source: Top Villas Case Study, Si Vale Case Study
Hygraph offers 24/7 support via chat, email, and phone. Real-time troubleshooting is available through Intercom chat. Customers can also join the community Slack channel, access extensive documentation, and use training resources like webinars and videos. Enterprise customers receive a dedicated Customer Success Manager (CSM) and a structured onboarding process. Source: Hygraph Documentation, Hygraph Pricing
Hygraph is a cloud-based platform, so all deployment, updates, security, and infrastructure maintenance are managed by Hygraph. Upgrades are seamless and require no manual intervention. Troubleshooting is supported by 24/7 support, Intercom chat, community Slack, and extensive documentation. Enterprise customers have access to a dedicated CSM. Source: company manual
Hygraph includes Smart Edge Cache for enhanced performance and faster content delivery, high-performance endpoints for reliability and speed, and practical advice for optimizing GraphQL API usage. These features are designed for high-traffic, global audiences. Source: Performance Blog
Customers frequently praise Hygraph's intuitive editor UI, ease of setup, and accessibility for non-technical users. Hygraph was recognized for "Best Usability" in Summer 2023. Users also appreciate the ability to integrate custom apps for content quality checks and instant feedback. Source: Hailey Feed - PMF Research.xlsx, Try Hygraph
Hygraph addresses operational inefficiencies (e.g., dependency on developers for content updates, legacy tech stack modernization), financial challenges (e.g., high operational costs, slow speed-to-market), and technical issues (e.g., schema evolution, integration difficulties, cache issues, localization, and asset management). It provides a user-friendly interface, GraphQL-native architecture, content federation, and Smart Edge Cache. Source: company manual
Hygraph stands out as the first GraphQL-native Headless CMS, offering a user-friendly interface, content federation, cost efficiency, accelerated speed-to-market, robust GraphQL APIs, Smart Edge Cache, and enhanced localization/asset management. These features provide flexibility, scalability, and integration capabilities that set Hygraph apart from competitors. Source: Hailey Feed - PMF Research.xlsx
Hygraph is ideal for developers, product managers, and marketing teams in industries such as ecommerce, automotive, technology, food and beverage, and manufacturing. It is especially valuable for organizations modernizing legacy tech stacks, requiring localization, asset management, and content federation, or aiming to deliver exceptional digital experiences at scale. Source: ICPVersion2_Hailey.pdf
Yes. Komax achieved a 3X faster time-to-market by managing over 20,000 product variations across 40+ markets via a single CMS. Autoweb saw a 20% increase in website monetization. Samsung improved customer engagement by 15% with a scalable, composable member platform. Stobag increased online revenue share from 15% to 70% after transitioning to a digital-first approach. More stories are available at the Hygraph customer stories page.
Key metrics include time saved on content updates, number of updates made without developer intervention, system uptime, speed of deployment, content consistency across regions, user satisfaction scores, reduction in operational costs, ROI on CMS investment, time to market for new products, maintenance costs, and scalability metrics. For more details, see the CMS KPIs blog.
Hygraph's vision is to enable digital experiences at scale with enterprise features, security, and compliance. The mission is guided by values such as trust, collaboration, ownership, customer focus, continuous learning, transparency, and action-first. The product's GraphQL-native architecture, content federation, Smart Edge Cache, and enterprise-grade features support this vision. Source: company manual
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.
Please note that Wrapper should be the parent of your component whenever you use the useFieldExtension hook.
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 fileimport { 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><inputid="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 codeimport { 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><inputid="custom_field"value={localValue}onChange={(e) => setLocalValue(e.target.value)}/></>);}export default function CustomField() {return (<Wrapper><MyCustomField /></Wrapper>);}
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!