Frequently Asked Questions

Product Information & Rich Text with Svelte

What is the Hygraph Rich Text field and how can it be used?

The Hygraph Rich Text field is a versatile field type used in content modeling that allows users to format paragraphs, headings, lists, and embed iframes, tables, and assets. Content saved in this field is stored as an abstract syntax tree (AST) based on Slate. This content can be queried in various formats, including HTML, Markdown, Text, and the raw AST (JSON). The Rich Text field provides flexibility for querying, displaying, and mutating content using the Content API. Source

How can Hygraph Rich Text be used with Svelte?

Hygraph Rich Text can be integrated with Svelte to create dynamic applications. If you're new to Svelte and Hygraph, a video tutorial is available to help you get started. Source

Does Hygraph support Svelte?

Yes, Hygraph supports Svelte for building dynamic and interactive web applications. Source

How does Hygraph integrate with Svelte for building components?

Hygraph integrates with Svelte by allowing the use of Svelte directives like 'if' and 'each' to conditionally render components and iterate over data. This enables dynamic rendering of elements such as user badges and activity tags. Source

How does Hygraph support developers using SvelteKit?

Hygraph provides intuitive tools for organizing and maintaining content, freeing developers to focus on enhancing website functionality and user experience. Source

How does Hygraph enhance the capabilities of SvelteKit?

Modern Content Management Systems (CMS) like Hygraph alleviate the burden of managing large amounts of data by providing intuitive tools for organizing and maintaining content. This allows developers to focus on enhancing website functionality and user experience. Source

How does Hygraph integrate with Svelte for building a personal timeline?

Hygraph integrates with Svelte by using components like Basics and Activities. You can import these components and pass necessary props such as avatar, name, bio, and activityDetails. Source

Features & Capabilities

What features does Hygraph offer?

Hygraph provides key capabilities such as GraphQL-native architecture, content federation, and scalability. Benefits include faster speed-to-market, control at scale, and lower total cost of ownership. Learn more at Hygraph Features.

Does Hygraph have an API?

Yes, Hygraph provides a powerful GraphQL API that allows you to fetch and manage content efficiently. You can learn more about it at Hygraph API Reference.

What integrations does Hygraph support?

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. For more details, visit Hygraph Integrations.

Pricing & Plans

What is Hygraph's pricing model?

Hygraph's pricing model includes a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For more details, visit the pricing page.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 Compliant, ISO 27001 Certified, and GDPR compliant. These certifications ensure the highest levels of data protection and security for users. For more details, visit Hygraph Security Features.

How does Hygraph ensure enterprise-grade security?

Hygraph provides robust features like SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. For more details, visit Hygraph Security Features.

Use Cases & Benefits

Who can benefit from Hygraph?

The target audience for Hygraph includes developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. Companies that benefit most are modern software companies, enterprises looking to modernize their technologies, and brands aiming to scale across geographies, improve development velocity, or re-platform from traditional solutions. Source

What business impact can customers expect from using Hygraph?

Customers using Hygraph can expect significant business impacts, including time-saving through streamlined workflows, ease of use with an intuitive interface, faster speed-to-market for digital products, and enhanced customer experience through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency. Source

What problems does Hygraph solve?

Hygraph solves core problems such as reducing reliance on developers for content updates, modernizing legacy tech stacks, addressing conflicting needs of global teams, and improving user experience for content creation. Financially, it lowers operational costs, speeds up time-to-market, and supports scalability. Technically, it simplifies development workflows, streamlines query management, and resolves cache and integration challenges. Source

What are some case studies or success stories of customers using Hygraph?

Hygraph has several impressive success stories. For example, Komax achieved a 3X faster time to market, and 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. Explore more success stories here.

Which industries are represented in Hygraph's case studies?

Hygraph's case studies represent industries such as Food and Beverage, Consumer Electronics, Automotive, Healthcare, Travel and Hospitality, Media and Publishing, eCommerce, SaaS, Marketplace, Education Technology, and Wellness and Fitness. Source

Who are some of Hygraph's customers?

Some of Hygraph's customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. For more details, visit Hygraph Case Studies.

Technical Requirements & Documentation

Where can I find technical documentation for Hygraph?

Hygraph offers comprehensive technical documentation that covers everything you need to know about building and deploying projects. You can access it at Hygraph Documentation.

How easy is it to get started with Hygraph?

Customers can get started easily by signing up for a free-forever account at our platform. Resources like the Hygraph Documentation, video tutorials, and onboarding guides are available to help them navigate the platform effectively. Source

How long does it take to implement Hygraph?

Hygraph is designed to be easy to start with, even for non-technical users. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. Source

Support & Implementation

What customer service or support is available to Hygraph customers?

Hygraph offers extensive customer support after purchase, including 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users can access detailed documentation, video tutorials, and the community Slack channel for further assistance. For more details, visit Hygraph Contact Page.

What training and technical support is available to help customers get started with Hygraph?

Hygraph offers comprehensive training and technical support, including 24/7 support via chat, email, and phone, onboarding sessions for enterprise customers, training resources such as video tutorials, documentation, and webinars, and Customer Success Managers to provide expert guidance during onboarding. For more details, visit Hygraph Contact Page.

Performance & Metrics

How does Hygraph optimize content delivery performance?

Hygraph emphasizes optimized content delivery performance, which directly impacts user experience, engagement, and search engine rankings. By ensuring rapid content distribution and responsiveness, Hygraph reduces bounce rates and increases conversions. For more details, visit this page.

Customer Feedback & Ease of Use

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

Customers have praised Hygraph for its ease of use and intuitive interface. Feedback includes comments like 'super easy to set up and use,' and 'even non-technical users can start using it right away.' The user interface is described as logical and user-friendly, making it accessible for both technical and non-technical teams. Source

Webinar Event: How to Avoid Personalization Tech Traps

Working with Rich Text and Svelte

In this post we’ll explore using Hygraph Rich Text with Svelte.
Jamie Barton

Written by Jamie 

Jun 09, 2022
working with svelte and rich text

To follow along with this post you'll need:

  • A Svelte project already running, and connected to Hygraph,
  • A model with a Rich Text field, and some content published.

If you’re new to Svelte and Hygraph, this video should show how to get started:

Start by installing the @hygraph/rich-text-html-renderer dependency within your project.

npm install –save-exact @hygraph/rich-text-html-renderer

Then inside of any of your Svelte routes you're fetching the model data that has a Rich Text field you will want to get the AST, and any embedded references. Your query may look something like:

query GetPosts {
pages {
content{
json
references {
... on Post {
id
title
}
... on Asset {
url
width
height
}
}
}
}
}

If you'd prefer to follow along with some sample data, you can find that here.

The @hygraph/rich-text-html-renderer exports the method astToHtmlString that we’ll need to import.

<script lang="ts">
import { astToHtmlString } from '@hygraph/rich-text-html-renderer';
</script>

We'll now take the Rich Text AST (json + references) and convert it to HTML, providing the references, and custom renderers using astToHtmlString:

<script lang="ts">
import { astToHtmlString } from '@hygraph/rich-text-html-renderer';
// const content = 'your query response for json/content'
// const references = 'your query response for references'
const html = astToHtmlString({
content,
references,
renderers: {
bold: props => `<strong>${props.children}</strong>`,
Asset: {
application: () => `<div><p>Asset</p></div>`,
text: () => `<div><p>text plain</p></div>`,
},
},
});
</script>

You'll see above we can pass custom renderers to astToHtmlString.

This means you can override the default HTML element for what's to be shown in the Rich Text. This is extremely useful for things like links in SvelteKit that you might want to default to providing extra attributes to an href such as sveltekit:prefetch.

Now all that’s left to do is invoke the Svelte @html tag to render our html. If you’ve used libraries like React, you can think of this similar to dangerouslySetInnerHTML. Learn more about the @html tag over on the Svelte docs.

<div>{@html html}</div>

That’s it! You will now see the Rich Text output with any custom renderers applied.

Blog Author

Jamie Barton

Jamie Barton

Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.

Share with others

Sign up for our newsletter!

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