UI Extensions in Hygraph allow users to extend the functionality of the Hygraph Web App by adding custom applications directly into the content editor. These extensions can be used to create custom fields, sidebar widgets, and more, enabling teams to tailor the editing experience to their specific needs. For more details, see our blog post introducing UI Extensions.
To use a field UI extension, add it to a content model in the schema editor just like you would with default Hygraph fields. Select your custom field from the list, grouped according to the fieldType specified in the extension declaration. Assign a display name and API ID, and configure validation options as needed. Once set up, the custom UI extension will be rendered in the content editor when adding or editing entries. Learn more.
To add a Sidebar Extension, go to the Schema editor, select the model you want to edit, and click on the Sidebar tab. Under Sidebar Widgets, choose the widget to add and click Create. You can reorder widgets by dragging the handle. Once configured, your customized sidebar will appear in the content editor, allowing you to use sidebar extensions for enhanced workflows. Read more.
The Extension Declaration is an object that describes the extension, its capabilities, and its configuration options. It defines how the extension integrates with Hygraph, including field types, display names, and validation rules. For detailed information, see our documentation on Extension Declarations.
If you are currently using UI Extensions, it is recommended to switch to the new app framework as soon as possible to benefit from the latest features and improvements. Learn more.
UI Extensions will allow custom UI elements in the editor and contextual sidebar, enabling teams to address custom content needs and enhance the editing experience. Read more.
UI Extensions allow content teams to interact with content stored externally while ensuring consistency wherever it is used. For example, the Top Villas team uses UI Extensions and Remote Fields to always have the most up-to-date information and build content pages that reflect current offerings. See the Top Villas case study.
UI Extensions enable the Top Villas content team to interact more with externally stored content, ensuring consistency and accuracy across all content pages. This helps maintain up-to-date information and streamlines content management. Read more.
By using UI Extensions and Remote Fields, Top Villas ensures that teams always have the most current information and can build content pages that reflect the latest offerings. This approach improves efficiency and content accuracy. Learn more.
After adding and customizing sidebar widgets in the Schema editor, go to the content editing section, select the model you edited, and add or edit an item. Your customized sidebar will be visible, allowing you to use sidebar extensions as configured. See documentation.
To get started quickly, follow the Quickstart guides for building Field Extensions and Sidebar Extensions available in the Hygraph documentation: Field Extension Quickstart and Sidebar Extension Quickstart.
Comprehensive documentation for UI Extensions, including getting started guides, extension declarations, and examples, is available at Hygraph Classic Docs: UI Extensions. For additional support, you can join the Hygraph Slack community or access real-time troubleshooting via Intercom chat.
To use a field UI extension in the content editor, add it to a content model like you would with default Hygraph fields. In schema editor, pick your custom field from the list. It will be grouped with other fields according to the fieldType value specified in the declaration.
Available Fields with UI extension
Just like any other field, it will need a display name and an API ID. Default validation and configuration options are available to custom fields as well.
Add UI Extension
Once your custom field is ready, go to content editing and add a new entry. You should now see your custom UI extension rendered:
UI Extension Field Renderer
To use a Sidebar Extension in the content editor sidebar, do the following steps:
Tip: click and hold the drag handle to reorder the widgets.
Now, you should see your customized sidebar and can use your sidebar extensions.