Frequently Asked Questions

UI Extensions in Hygraph

What are UI Extensions in Hygraph?

UI Extensions in Hygraph are custom web applications that run inside the Hygraph content editor, displayed in a sandboxed iframe. They allow you to extend the functionality of the Hygraph Web App by integrating custom solutions, such as your own Rich Text Editor, asset pickers, or product selectors from external platforms like Shopify or Cloudinary. UI Extensions interact with Hygraph via an SDK and can be configured to store settings like API keys for external services. Learn more in the official documentation.

How do I build and install a UI Extension in Hygraph?

To build and install a UI Extension, you need to create a self-hosted web application and provide its URL within Hygraph. Hygraph will run a compatibility check and render the setup form for your extension. You can store configuration details, such as API keys, for external services. Step-by-step guides for building, installing, and using UI Extensions are available in the Hygraph Documentation.

What use cases do UI Extensions support?

UI Extensions support a variety of use cases, including integrating custom Rich Text Editors, adding fields for product selection from eCommerce platforms like Shopify, asset pickers for DAM solutions like Cloudinary, and more. They enable editors to interact with external content sources directly within Hygraph, ensuring consistency and up-to-date information across all content pages. For example, Top Villas uses UI Extensions and Remote Fields to keep their content synchronized with external sources. Read the Top Villas case study.

What SDKs are available for building UI Extensions?

Hygraph offers two SDKs for building UI Extensions: a JavaScript SDK, which allows you to use native JavaScript or any framework of your choice, and a React SDK, which provides components and hooks for a React-based development experience. See the SDK documentation for details.

Are there quickstart guides and API references for UI Extensions?

Yes, Hygraph provides quickstart guides for building both Field Extensions and Sidebar Extensions, as well as comprehensive API references for Hooks, Field Extensions, Sidebar Extensions, and Additional Types. Access the guides and API references here.

What is the recommendation for users currently using UI Extensions?

If you are currently using UI Extensions, Hygraph recommends switching to the new app framework as soon as possible to benefit from the latest improvements and features. Read more about the recommendation.

Features & Capabilities

What are the key capabilities and benefits of Hygraph?

Hygraph provides a GraphQL-native architecture, content federation, and scalability. Key benefits include faster speed-to-market, control at scale, and lower total cost of ownership. These capabilities help businesses modernize their tech stack and deliver impactful digital experiences. Learn more about Hygraph features.

Does Hygraph support integrations with other platforms?

Yes, Hygraph offers a wide range of integrations, including Netlify, Vercel, BigCommerce, commercetools, Shopify, Lokalise, Crowdin, EasyTranslate, Smartling, Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot, Ninetailed, AltText.ai, Adminix, and Plasmic. See the full list of integrations.

Does Hygraph provide an API for content management?

Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. Explore the API reference.

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. See the pricing details.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant, ensuring enterprise-grade security and regulatory compliance. Features include SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. Learn more about Hygraph security features.

Technical Requirements & Documentation

Where can I find technical documentation for Hygraph and UI Extensions?

Comprehensive technical documentation for Hygraph and UI Extensions is available at Hygraph Documentation. This includes guides for building, installing, and using UI Extensions, as well as API references and onboarding resources.

Use Cases & Customer Success

Who can benefit from using Hygraph?

Hygraph is designed for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It is especially valuable for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale globally or improve development velocity. See customer case studies.

What industries are represented in Hygraph's customer case studies?

Hygraph's case studies span industries such as Food and Beverage (Dr. Oetker), Consumer Electronics (Samsung), Automotive (AutoWeb), Healthcare (Vision Healthcare), Travel and Hospitality (HolidayCheck), Media and Publishing, eCommerce, SaaS (Bellhop), Marketplace, Education Technology, and Wellness and Fitness. Explore more case studies.

Can you share specific customer success stories using Hygraph?

Yes, Hygraph has several notable success stories: Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. Read more customer stories.

Getting Started & Support

How easy is it to get started with Hygraph?

Hygraph is designed for quick onboarding, 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. Get started with Hygraph.

What support and training does Hygraph offer?

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

Performance & Business Impact

How does Hygraph optimize content delivery performance?

Hygraph is designed for optimized content delivery, ensuring rapid distribution and responsiveness. This leads to improved user experience, higher engagement, better search engine rankings, reduced bounce rates, and increased conversions. Learn more about performance optimization.

Customer Proof

Who are some of Hygraph's customers?

Hygraph is trusted by leading brands such as 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

Introducing UI Extensions

We’re excited to announce UI Extensions! UI Extensions give you the ability to extend the functionality of the Hygraph Web App with custom applications.
Frederik Eychenié
Somasundaram Ayyappan

Written by Frederik & Somasundaram 

Jun 18, 2021
Working with GraphCMS UI Extensions

We’re excited to announce UI Extensions! UI Extensions give you the ability to extend the functionality of the Hygraph Web App with custom self-hosted applications.

#What are UI Extensions in Hygraph?

A UI Extension is essentially a small application that exists in a sandboxed iframe and interacts with Hygraph via our SDK.

UI Extensions in Hygraph

UI Extensions allow you to extend the functionality of the Hygraph content editing experience by running custom applications within the CMS. UI Extensions can be used for a variety of use-cases, such as using your own Rich Text Editor, adding custom fields to let editors search and pick products from a Shopify catalog, integrating an asset picker for Cloudinary to bring all your asset views into Hygraph, and much more.

Currently, UI Extensions are to be self-hosted by you. You would need to get a URL from your externally hosted extension, and provide it within Hygraph. We will run a compatibility check to ensure the extension can work as expected, and render the relevant setup form. You can also store configs, such as API keys, for external products/services for use within your UI extension.

We currently support single field extensions that can be configured within the content forms and plan to work on sidebar extensions in the near future.

Get started with building, installing, and using a custom UI Extension with our guide

Please note that this is currently an early feature preview. Several improvements and changes are expected, which may result in breaking changes on your projects. We’d be keen to gather your feedback when working with UI Extensions to help constantly improve the feature. Reach out to us via our on-site chat, or on the #feedback channel on our Community Slack.

To watch UI Extensions in action, stay tuned for the livestream on 22.06.2021 as Jamie walks us through creating, configuring, and using extensions in Hygraph.

Blog Authors

Share with others

Sign up for our newsletter!

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