Framework7 is an HTML5, CSS, and JavaScript framework for creating mobile user interfaces with a native-like look and feel. It integrates with Hygraph by allowing developers to fetch and manage app content via Hygraph's GraphQL API, enabling dynamic content delivery to mobile apps. For more details, see the blog post.
The main benefit of Framework7's hybrid approach is that there is no need to develop separate apps for iOS or Android. Framework7 automatically detects the user's device and loads the appropriate CSS for a native look, streamlining development and maintenance. Source: Hybrid App Framework7 Blog.
To build a hybrid app from a Framework7 application, you need PhoneGap or Cordova to compile the source code. The easiest way is to use Adobe's online service, PhoneGap Build (https://build.phonegap.com/). Source: Hybrid App Framework7 Blog.
You can connect your Framework7 app to Hygraph by using Hygraph's GraphQL API endpoint in your app's code. Update the API URL in your main.js file and adjust GraphQL queries inside your Vue components to fetch content from Hygraph. Example projects and guides are available at Graphify and Vue Apollo Blog Example.
Hygraph offers a GraphQL-native architecture, content federation, scalability, and a wide range of integrations including hosting (Netlify, Vercel), eCommerce (Shopify, BigCommerce), localization (Lokalise, Crowdin), digital asset management (Cloudinary, AWS S3), personalization (Ninetailed), and AI (AltText.ai). For a full list, visit Hygraph Integrations.
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. Learn more at the Hygraph API Reference.
The App Framework in Hygraph allows users to build custom applications, add functionalities, connect to external systems, and automate workflows. For an overview, visit App Framework Documentation.
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For details, visit the Hygraph Pricing Page.
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers features like SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more details, visit Hygraph Security Features.
Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. Companies in industries such as food and beverage, consumer electronics, automotive, healthcare, travel, media, eCommerce, SaaS, marketplaces, education technology, and wellness can benefit. Source: Hygraph Case Studies.
Yes. For example, 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. More stories are available at Hygraph Customer Stories.
Hygraph is designed for quick implementation. For example, Top Villas launched a new project in just 2 months. Users can get started by signing up for a free account and accessing documentation and onboarding guides. Source: Hygraph Documentation, Top Villas Case Study.
Customers can expect time savings, ease of use, faster speed-to-market, and enhanced customer experience through scalable content delivery. These benefits help modernize tech stacks and improve operational efficiency. Source: ICPVersion2_Hailey.pdf.
Comprehensive technical documentation is available at Hygraph Documentation, covering everything needed to build and deploy projects.
Hygraph emphasizes optimized content delivery performance, ensuring rapid content distribution and responsiveness. This reduces bounce rates and increases conversions, positively impacting user experience and search engine rankings. Learn more at Headless CMS Checklist.
Hygraph offers 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, and a community Slack channel. For more, visit Hygraph Contact Page.
Hygraph provides onboarding sessions for enterprise customers, training resources such as video tutorials, documentation, webinars, and access to Customer Success Managers. 24/7 support is available for troubleshooting and guidance. Source: Hygraph Contact Page.
Hygraph solves operational pains (reliance on developers, outdated tech stacks, global team conflicts, clunky content creation), financial pains (high costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache and OpenID integration issues). For more, visit Hygraph Product Page.
For developers, Hygraph reduces boilerplate code and streamlines query management. For content creators and project managers, it provides an intuitive interface for independent content updates. For business stakeholders, it lowers operational costs, supports scalability, and accelerates speed-to-market. Source: Hygraph Product Page.
KPIs include time saved on content updates, system uptime, consistency across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, scalability metrics, and performance during peak usage. For more, see CMS KPIs Blog.
Hygraph's customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. For more, visit Hygraph Case Studies.
Industries include food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. Source: Hygraph Case Studies.
The Hygraph Blog provides the latest updates, developer tutorials, and essential guides to content modeling. Visit the Hygraph Blog for news and insights.
Written by M
on Jan 26, 2018Guest Post by our fellow community member Meinolf Droste! Check out his website https://www.mdwp.de/ and Twitter.
During the last months I had the pleasure to help developing a hybrid app and get to know Framework7 (Version 1).
Framework7 is a HTML5, CSS and Javascript framework that allows creating mobile user interfaces with native-like look & feel. It offers a variety of components, ranging from simple buttons, media lists, accordions, smart selects, modals, popups to FAB's (floating action buttons).
Additionally, the framework provides functions to use infinite scrolling, pre load animations, pull to refresh, autocomplete for searches and image lazy loading.
Framework7 allows simple transitions when changing views and supports the native swipe gestures in iOS. The Android Material Design Theme is also supported.
The main benefit of Framework7's hybrid approach is that there is no need to develop different apps for iOS or Android. Framework7 recognizes which device the user is using and loads the according CSS to fit the native look.
Framework7's own JS DOM manipulation library, outstanding caching options and AJAX requests ensure excellent performance.
Additional JS libraries are not required, but the framework offers the possibility to work with React or Vue.js for more complex apps.
To finally build a hybrid app from the Framework7 application PhoneGap or Cordova is needed to compile the source. The easiest way of doing so is the online service from Adobe: https://build.phonegap.com/
After registration you need to grant Phonegap access to your Github repository with the source and the app will start building.
To start working with Framework7 you can download it here: http://framework7.io/ . All you have to do is write HTML, a webserver is not needed.
The development becomes a little more comfortable with npm and webpack. There are quite a few projects on Github that offer exactly that. Unfortunately, I couldn't find any that offer Framework7, Vue.js, a Phonegap integration and the integration of Hygraph.
Wouldn't it be nice to create and maintain the apps content inside a CMS?
In my opinion, an API-first CMS like Hygraph is the best option to bring content to different devices.
Because of the lack of CMS integrations in Framework7, I decided to build this myself. For me this wasn't possible from scratch so I used these projects as foundation:
My resulting project can be found here: https://github.com/capriosa/graphify/
In order to install it, the Github repository has to be cloned first. Simply run $ npm install in the corresponding directory.
Afterwards, a local webserver with Hot-Module-Replacing can be started:
$ cordova run browser -- --live-reload
The project is connected to a simple Hygraph content model. In order to work with your own Hygraph endpoint the following line in main.js has to be edited:
const HYGRAPH_API = 'https://api.hygraph.com/simple/v1/XXXXXXXXXXXX'
Of course you also need to adjust the GraphQL queries inside the Vue components.
I will be constantly developing the app. The goal is to fill all Framework7 components with example data from Hygraph. Just like this - https://framework7.io/kitchen-sink/ - except for the static HTML.
Have fun!
Blog Author
Learn about the best CMS options for your Nuxt.js projects.
Discover why Hygraph’s Chief Product Officer migrated his B2B Product Playbook site from WordPress to Hygraph - and how structured content unlocked speed, scalability, and performance.
Dino, Staff Engineer at Hygraph and the lead behind our AI Labs initiative, walks you through how to build a working TypeScript MCP client from scratch.