PageSourceSearch

https://faustjs.org/docs/

html faustjs.org collected 2026-09-24 18:50:02 UTC 50,941 bytes, 15 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width" data-next-head=""/><meta content="website" property="og:type" data-next-head=""/><meta content="summary_large_image" property="twitter:card" data-next-head=""/><title data-next-head="">Introduction | Faust.js</title><meta content="Introduction" name="title" data-next-head=""/><meta content="Introduction" property="og:title" data-next-head=""/><meta content="Introduction" property="twitter:title" data-next-head=""/><meta content="Introduction to Faust.js, a toolkit for building headless WordPress applications with Next.js." name="description" data-next-head=""/><meta content="Introduction to Faust.js, a toolkit for building headless WordPress applications with Next.js." property="og:description" data-next-head=""/><meta content="Introduction to Faust.js, a toolkit for building headless WordPress applications with Next.js." property="twitter:description" data-next-head=""/><meta content="https://faustjs.org/docs/" property="og:url" data-next-head=""/><meta content="https://faustjs.org/docs/" property="twitter:url" data-next-head=""/><link href="/images/favicon-32x32.png" rel="icon" sizes="32x32"/><link href="/images/favicon-192x192.png" rel="icon" sizes="192x192"/><link href="https://faustjs.org/api/feeds/feed.json" rel="alternate" type="application/feed+json" title="WPGraphQL Blog JSON Feed"/><link href="https://faustjs.org/api/feeds/rss.xml" rel="alternate" type="application/rss+xml" title="WPGraphQL Blog XML Feed"/><link href="https://faustjs.org/api/feeds/feed.atom" rel="alternate" type="application/atom+xml" title="WPGraphQL Blog Atom Feed"/><link rel="preload" href="/_next/static/media/08ace62d6069e283-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/2ce92ab0f6458959.css" as="style"/><link rel="canonical" href="https://faustjs.org/docs/" data-next-head=""/>
1<script type="module" src="https://cdn.jsdelivr.net/npm/dialog-closedby-polyfill/index.js"></script>
1<link rel="stylesheet" href="/_next/static/css/2ce92ab0f6458959.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script>
1<script src="/_next/static/chunks/webpack-2d1f61069a24c28b.js" defer=""></script>
1<script src="/_next/static/chunks/framework-78767669712fdeef.js" defer=""></script>
1<script src="/_next/static/chunks/main-0d1055d7f04c05f8.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-fb8c59a51fe4b116.js" defer=""></script>
1<script src="/_next/static/chunks/pages/docs/%5B%5B...slug%5D%5D-e4d5f6a283a93ea3.js" defer=""></script>
1<script src="/_next/static/FOEtxVaM3pDjl2xzwMS7U/_buildManifest.js" defer=""></script>
1<script src="/_next/static/FOEtxVaM3pDjl2xzwMS7U/_ssgManifest.js" defer=""></script>
1</head><body class="bg-gray-900 text-gray-200"><div id="__next"><div class="__variable_97fa79 font-inter flex min-h-screen flex-col selection:bg-purple-700"><a href="#main-content" class="faust-skip-link">Skip to main content</a><div class="container-blur-bg top-0 border-b-[1px] border-gray-800 bg-gray-900/80 sticky z-10 "><header class="container mx-auto flex items-center justify-between px-4 py-6 sm:px-6 md:max-w-6xl md:px-8"><div class="mr-8 flex items-center gap-8"><a class="transition-duration-75 flex items-center text-xl font-bold transition hover:text-white focus:text-white " href="/"><span class="mr-3"><svg fill="none" height="32" viewBox="0 0 128 128" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M28.48 3.52L3.52 28.486c-2.26 2.26-3.52 5.3-3.52 8.48V122A5.992 5.992 0 006 128h116c3.32 0 6-2.68 6-6.001V6.001C128 2.68 125.32 0 122 0H36.98c-3.18 0-6.24 1.26-8.48 3.52h-.02z" fill="url(#paint0_radial_145_9184)"></path><path d="M51.844 103a19.149 19.149 0 01-8.486-2.164 11.227 11.227 0 01-4.69-4.837 6.737 6.737 0 01-.4-4.81 6.781 6.781 0 012.917-3.854 7.718 7.718 0 015.2-1.003 7.752 7.752 0 014.633 2.563c1.282 1.737 1.328 3.064 2.275 3.064 1.83.028 4.206-13.065 5.525-20.112.548-2.907 1.133-5.897 1.82-8.868a.92.92 0 00-.826-1.133l-5.024-.39a1.663 1.663 0 01-1.096-.53 1.694 1.694 0 01-.455-1.132 4.428 4.428 0 01.232-1.839c.205-.585.53-1.123.966-1.578.474-.381 1.03-.66 1.625-.808a4.41 4.41 0 011.81-.074l1.477.139c1.402.084 1.932.046 2.582-.4.603-.427.752-1.16.938-1.875.269-1.087.529-2.164.798-3.324A71.14 71.14 0 0167.751 36.7c4.568-10.076 12.88-13.808 23.381-10.558 2.061.64 3.928 1.81 5.414 3.38a7.91 7.91 0 011.625 2.655 7.88 7.88 0 01.455 3.074 6.85 6.85 0 01-2.34 4.782 7.326 7.326 0 01-2.498 1.346 7.253 7.253 0 01-2.823.279 7.975 7.975 0 01-5.478-2.786 20.397 20.397 0 01-2.452-4.076c-.26-.51-.51-1.086-.78-1.523-.733-1.365-.975-.455-.975-.455l-4.624 21.422a.922.922 0 00.845 1.114l5.06.325c.372.019.734.167 1.013.428.278.25.464.594.529.965.176.622.204 1.282.074 1.913s-.4 1.226-.798 1.736a3.919 3.919 0 01-1.625.883c-.604.157-1.551.167-2.35.102l-.826-.084-1.087-.111c-2.302-.177-2.618.492-3.147 3.185-.223 1.17-.455 2.34-.669 3.51-1.021 5.283-2.061 10.743-3.52 16.017a37.575 37.575 0 01-5.05 11.087c-3.455 5.08-8.08 7.689-13.27 7.689h.01z" fill="#fff"></path><defs><radialGradient cx="0" cy="0" gradientTransform="rotate(45) scale(181.019)" gradientUnits="userSpaceOnUse" id="paint0_radial_145_9184" r="1"><stop stop-color="#0ECAD4"></stop><stop offset="1" stop-color="#7A45E5"></stop></radialGradient></defs></svg></span>Faust.js<span class="align-super text-xs font-light text-gray-500">™</span></a></div><div class="flex items-center gap-5 md:w-full md:justify-between"><nav class="flex items-center space-x-4 "><ul class="hidden flex-row space-x-4 pl-4 md:flex"><li class="text-gray-400 data-focus:text-purple-500 data-focus:outline rounded-md px-1"><a class="text-purple-500 block px-1 " href="/docs/">Docs</a></li><li class="text-gray-400 data-focus:text-purple-500 data-focus:outline rounded-md px-1"><a class="block px-1 " href="/blog/">Blog</a></li><li class="text-gray-400 data-focus:text-purple-500 data-focus:outline rounded-md px-1"><a class="block px-1 " href="/showcase/">Showcase</a></li></ul><div data-headlessui-state=""><button class="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden" type="button" aria-expanded="false" data-headlessui-state=""><span class="sr-only hidden group-data-open:block">Open main nav</span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="hidden size-6 group-data-open:block" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg><span class="sr-only group-data-open:hidden">Open main nav</span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="size-6 group-data-open:hidden" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span></nav><span class="flex gap-5"><button class="inline-flex items-center rounded-md bg-gray-800 px-2 py-1.5 text-sm font-medium text-gray-400 hover:bg-gray-700" type="button" aria-label="Search (shortcut: ⌘K)"><span class="sr-only md:hidden">Open search</span>
1<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 text-gray-400 md:hidden" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path></svg><span class="hidden md:inline"><span class="pl-3">Search docs...</span><kbd class="ml-8 rounded-sm bg-gray-700 px-2 py-1 font-sans text-gray-400">⌘<!-- -->K</kbd></span></button><div class="hidden items-center space-x-4 md:flex"><a class="text-blue-500 text-gray-500 hover:text-gray-400 " href="https://github.com/wpengine/faustjs" rel="noopener noreferrer" target="_blank" title="GitHub"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a><a class="text-blue-500 text-gray-500 hover:text-gray-400 " href="/discord" rel="noopener noreferrer" target="_blank" title="Discord"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg></a></div></span></div></header></div><div class="fixed right-6 bottom-6 z-50 overflow-visible"><div id="ping" aria-hidden="true" class="motion-safe:animate-ping pointer-events-none absolute inset-0 -z-10 h-full w-full rounded-full bg-gray-200 "></div><button id="chat-button" type="button" class="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-blue-800 text-white shadow-xl transition-transform hover:scale-105 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 md:right-8 md:bottom-12" aria-label="Open chat"><span class="sr-only">Open chat</span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.
1095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"></path></svg></button></div><div class="sticky top-[84px] z-5 border-b-[1px] border-gray-800 bg-gray-900/80 backdrop-blur-xs md:hidden" data-headlessui-state=""><button class="group flex items-center rounded-md px-2 py-1.5 text-white/70 hover:text-white" id="headlessui-disclosure-button-_R_d56_" type="button" aria-expanded="false" data-headlessui-state=""><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="relative z-20 hidden h-4 w-4 group-data-open:inline" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-4 w-4 group-data-open:hidden" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg><span class="pl-1">Menu</span></button></div><main id="main-content" class="relative mx-auto flex max-w-full grid-cols-[1fr_auto_1fr] flex-col gap-6 md:grid" style="line-height:1.6em"><nav class="custom-scrollbar sticky top-[84px] hidden h-[calc(100vh-84px)] w-64 overflow-y-auto p-4 md:block"><a href="#docs-article" class="faust-skip-link">Skip navigation</a><ul class="my-1 " data-doc-nav-level="0"><li class="py-2 text-gray-400"><a class="text-blue-500 active " data-doc-nav-level="0" href="/docs/">Introduction</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="0" href="/docs/tutorial/learn-faust/">Learn Faust.js</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="0" href="/docs/how-to/">How-To Guides</a><ul class="my-1 ml-2 border-l-[1px] border-gray-800 pl-3 " data-doc-nav-level="1"><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/basic-setup/">Basic Setup</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/authentication/">Authentication</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/customize-the-toolbar/">Customize the Toolbar</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/generate-types-with-graphql-codegen/">Generate types with GraphQL Codegen</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/rendering-blocks/">Rendering Blocks</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/custom-blocks/">Custom Blocks</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/post-previews/">Post Previews</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/sitemaps/">Sitemaps</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/create-a-plugin/">Create A Plugin</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/use-wpgraphql-smart-cache/">Using WPGraphQL Smart Cache</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/query-data-in-the-browser/">Query Data in the Browser</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/query-data-in-nextjs-routes/">Query Data in Next.js Routes</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/setup-cpt-in-faustjs/">Custom Post Types</a></li></ul></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="0" href="/docs/reference/">Reference</a><ul class="my-1 ml-2 border-l-[1px] border-gray-800 pl-3 " data-doc-nav-level="1"><li class="py-2 text-gray-400">
1<a class="" data-doc-nav-level="1" href="/docs/reference/faust-plugin-system-filters/">Faust Plugin System Filters</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/from-theme-json/">fromThemeJson</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/get-next-server-side-props/">getNextServerSideProps</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/get-next-static-props/">getNextStaticProps</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/get-site-map-props/">getSiteMapProps</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/get-styles/">getStyles</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/get-wordpress-props/">getWordPressProps</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/use-auth/">useAuth</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/use-blocks-theme/">useBlocksTheme</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/use-login/">useLogin</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/use-logout/">useLogout</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/with-faust/">withFaust</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/wordpress-blocks-provider/">WordPressBlocksProvider</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/wordpress-blocks-viewer/">WordPressBlocksViewer</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/blockset/">blockset</a></li></ul></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="0" href="/docs/explanation/">Explanation</a><ul class="my-1 ml-2 border-l-[1px] border-gray-800 pl-3 " data-doc-nav-level="1"><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/telemetry/">Telemetry</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/seed-query/">Seed Query</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/blocks-faq/">WordPress Blocks FAQ</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/apollo-client-basics/">Apollo Client Basics</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/deploy-your-app/">Deploying Your App</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/migrate-from-wp-graphql-gutenberg/">Migrate from wp-graphql-gutenberg</a></li></ul></li></ul></nav><nav class="sticky top-[84px] order-last hidden h-[calc(100vh-84px)] w-[240px] overflow-y-auto p-6 lg:block"><h2 class="py-2 font-semibold">On This Page</h2><ul class="mt-4 text-sm text-gray-400"><li class="w-full py-2 break-words whitespace-normal "><a class="" href="#what-is-faustjs">What is Faust.js®?</a></li><li class="w-full py-2 break-words whitespace-normal "><a class="" href="#main-features">Main Features</a></li><li class="w-full py-2 break-words whitespace-normal "><a class="" href="#how-to-use-these-docs">How to Use These Docs</a></li></ul><div class="my-6 border-t border-gray-700"></div><a class="text-xs leading-loose font-normal text-gray-400 no-underline hover:text-blue-500 " href="https://github.com/wpengine/faustjs/edit/canary/docs//index.md" rel="noopener noreferrer" target="_blank">Edit this doc on GitHub<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></nav><div class="container-main xs:py-20 min-h-[calc(100vh-120px)] max-w-full py-0 sm:max-w-[80ch] sm:py-20 md:py-8"><nav class="flex flex-wrap items-center gap-2 text-sm mt-4 mb-7 md:mt-2 md:mb-10 "><span>Docs</span></nav><article id="docs-article" class="prose prose-invert"><h1 class="article-title break-words">Introduction</h1><h2 id="what-is-faustjs" class="group flex items-center hover:text-blue-500"><a class="break-all no-underline transition-colors group-hover:text-blue-500 " href="#what-is-faustjs">What is Faust.js®?<svg stroke="currentColor" fill="none" stroke-width="1.5" viewB
1ox="0 0 24 24" aria-hidden="true" class="ml-2 inline-block size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg></a></h2>
2<p>Faust.js® is a set of tools that make it easy to build headless WordPress apps with Next.js. Accordingly, while there are many features of Faust.js®, you are able to pick and choose those you need for your project.</p>
3<p>From data fetching to Block components, Faust.js® has you covered. Build your headless WordPress app with confidence, knowing that you have the tools you need to get the job done.</p>
4<h2 id="main-features" class="group flex items-center hover:text-blue-500"><a class="break-all no-underline transition-colors group-hover:text-blue-500 " href="#main-features">Main Features<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="ml-2 inline-block size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg></a></h2>
5<p>Some of the main Faust.js® features include:</p>
6<table><thead><tr><th>Feature</th><th>Description</th></tr></thead><tbody><tr><td><a class="text-blue-500 " href="/docs/explanation/seed-query/">Template Hierarchy</a></td><td>Automatically resolve WordPress content to the right template, just like classic PHP</td></tr><tr><td><a class="text-blue-500 " href="/docs/how-to/authentication/">Authentication</a></td><td>Authenticate users in your Next.js app with WordPress</td></tr><tr><td><a class="text-blue-500 " href="/docs/how-to/rendering-blocks/">Block Components</a></td><td>Render WordPress blocks in your Next.js app</td></tr><tr><td><a class="text-blue-500 " href="/docs/how-to/post-previews/">Post Preview</a></td><td>Preview posts and pages in your Next.js app before publishing them</td></tr></tbody></table>
7<h2 id="how-to-use-these-docs" class="group flex items-center hover:text-blue-500"><a class="break-all no-underline transition-colors group-hover:text-blue-500 " href="#how-to-use-these-docs">How to Use These Docs<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="ml-2 inline-block size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg></a></h2>
8<p>These docs are designed to help you get started with Faust.js®. Here are some of the main sections you can explore:</p>
9<ul>
10<li><a class="text-blue-500 " href="/docs/tutorial/">Tutorials</a> - Tutorials are best when you are looking to learn about what Faust offers.</li>
11<li><a class="text-blue-500 " href="/docs/how-to/">How To</a> - How-to guides are best when you are looking to implement a specific feature or integration.</li>
12<li><a class="text-blue-500 " href="/docs/reference/">API Reference</a> - Reference docs are best when you need details on how to use a specific Faust API.</li>
13<li><a class="text-blue-500 " href="/docs/explanation/">Explanation</a> - Explanations are best when you want to learn more about a specific feature or topic.</li>
14</ul>
15<div class="callout" data-callout="note" data-collapsible="false"><div class="callout-title"><div class="callout-title-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg></div><div class="callout-title-text">Learn More</div></div><div class="callout-content"><p>For more info on how we lay out our documentation, please read about the <a class="text-blue-500 " href="https://diataxis.fr/foundations/#serving-needs" rel="nofollow" target="_blank"><em>Diátaxis</em><span>
15<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a> approach we use.</p></div></div></article></div></main><footer class="bg-gray-950 px-8 pb-14 lg:px-16 lg:pb-24"><div class="container-main container-max prose prose-invert container border-t border-gray-900"><div class="grid grid-cols-1 gap-8 pt-14 sm:grid-cols-2 lg:grid-cols-3 lg:pt-24"><div class="col-span-1 flex flex-col gap-4"><h6 class="font-bold uppercase tracking-wider text-gray-300">Downloads</h6><ul class="my-0 list-none ps-0"><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://www.npmjs.com/package/@faustwp/cli" rel="noopener noreferrer" target="_blank">@faustwp/cli<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://www.npmjs.com/package/@faustwp/core" rel="noopener noreferrer" target="_blank">@faustwp/core<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://www.npmjs.com/package/@faustwp/blocks" rel="noopener noreferrer" target="_blank">@faustwp/blocks<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://github.com/wpengine/faustjs/tree/canary/plugins/faustwp" rel="noopener noreferrer" target="_blank">Faust.js Companion Plugin<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://github.com/wpengine/wp-graphql-content-blocks" rel="noopener noreferrer" target="_blank">WPGraphQL Content Blocks<span>
15<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li></ul></div><div class="col-span-1 flex flex-col gap-4"><h6 class="font-bold uppercase tracking-wider text-gray-300">Community</h6><ul class="my-0 list-none ps-0"><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://github.com/wpengine/faustjs?ref=faustjs" rel="noopener noreferrer" target="_blank">Github<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://twitter.com/wpengine" rel="noopener noreferrer" target="_blank">Twitter<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://www.youtube.com/channel/UCh1WuL54XFb9ZI6m6goFv1g" rel="noopener noreferrer" target="_blank">YouTube<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="/discord" rel="noopener noreferrer" target="_blank">Discord<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li></ul></div><div class="col-span-1 flex flex-col gap-4"><h6 class="font-bold uppercase tracking-wider text-gray-300">WP Engine</h6><ul class="my-0 list-none ps-0"><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://wpengine.com/legal/privacy/" rel="noopener noreferrer" target="_blank">Privacy Policy<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://wpengine.com/builders/headless" rel="noopener noreferrer" target="_blank">Developers<span>
15<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://wpengine.careers/?ref=faustjs" rel="noopener noreferrer" target="_blank">We&#x27;re Hiring!<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://wpengine.com/headless-wordpress/?ref=faustjs" rel="noopener noreferrer" target="_blank">Headless Hosting<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li></ul></div></div><div class="mt-2 text-gray-400 lg:mt-24"><p>Powered by <a class="font-normal text-gray-200 no-underline " href="/">Faust.js</a> &amp; WP Engine&#x27;s <a class="font-normal text-gray-200 no-underline " href="https://wpengine.com/headless-wordpress/" rel="noopener noreferrer" target="_blank">Headless platform<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></p><p class="text-gray-400">© 2013-<!-- -->2026<!-- --> WP Engine, Inc. All rights reserved.</p></div></div></footer><dialog id="search-dialog" class="mx-auto mt-[10vh] bg-transparent p-0 backdrop:backdrop-blur-sm md:mt-[20vh]" closedby="any"><section class="relative w-[85dvi] max-w-3xl rounded-lg bg-gray-800 p-4 md:w-[70vw] md:p-6"><div class="relative"><input id="search-input" aria-haspopup="listbox" aria-controls="search-results" autofocus="" type="text" placeholder="What are you searching for?" aria-label="Search input" class="w-full rounded-sm border border-gray-700 bg-gray-700 p-2 pr-10 text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden" value=""/><button type="button" class="absolute top-1/2 right-2 -translate-y-1/2 transform text-xs text-gray-400 hover:text-white" aria-label="Close search"><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg></button></div></section></dialog><dialog id="chat-dialog" role="application" class="fixed right-4 bottom-18 left-auto z-20 w-[92dvw] max-w-xl overflow-visible rounded-lg bg-gray-800 p-4 md:right-8 md:bottom-32 md:p-6" closedby="any"><button type="button" form="chat-form" aria-label="Close chat" class="absolute -top-2 -right-2 text-gray-400 hover:text-gray-300" formMethod="dialog"><span class="sr-only">Close chat</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 cursor-pointer text-gray-200 hover:text-red-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd"></path></svg></button><section><div id="chat" class="flex h-full w-full flex-col gap-4"><div class="custom-scrollbar flex max-h-[calc(92dvh-12em)] flex-grow flex-col gap-4 overflow-y-scroll md:max-h-[calc(80dvh-12em)] -mr-2 pr-4 pb-12 md:-mr-4 " aria-live="polite" role="log"><div class="rounded-bl-sm bg-purple-900 prose prose-invert slide-in-bottom message-glow w-fit max-w-[90%] rounded-xl p-2 shadow-md transition-shadow duration-200 first:mt-0 last:mb-0 hover:shadow-lg "><p>Hey there! I&#x27;m an AI driven chat assistant here to help you with Faust.js! I&#x27;m trained on the documentation and can help you with coding tasks, learning, and more. What can I assist you with today?</p></div><div></div></div><form id="chat-form" class="absolute bottom-0 left-0 w-[calc(100%-theme(sp
15acing.[1.5]))] bg-gradient-to-b from-transparent via-gray-800 to-gray-800 p-4 md:p-6"><div class="flex w-full items-end justify-between gap-2"><input id="chat-input" type="text" wrap="soft" autofocus="" placeholder="Ask about Faust..." class="no-scrollbar text-md w-full max-w-full rounded-xl bg-gray-700 p-2 text-wrap text-gray-200 placeholder-gray-400 shadow-lg transition-colors focus:ring-2 focus:ring-teal-500 focus:outline-none" value=""/><button type="submit" class="enabled:bg-hero-gradient ml-auto cursor-pointer rounded-xl bg-gray-700 p-2 text-gray-400 shadow-lg enabled:text-gray-200" aria-label="Send message" disabled=""><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"></path></svg></button></div></form></div></section></dialog></div></div>
15<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"id":"mdx:4a67bd26402fc5154544d6c1ff5e863f6e354135","source":{"compiledSource":"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    div: \"div\",\n    em: \"em\",\n    h2: \"h2\",\n    li: \"li\",\n    line: \"line\",\n    p: \"p\",\n    path: \"path\",\n    svg: \"svg\",\n    table: \"table\",\n    tbody: \"tbody\",\n    td: \"td\",\n    th: \"th\",\n    thead: \"thead\",\n    tr: \"tr\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  };\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      id: \"what-is-faustjs\",\n      children: \"What is Faust.js®?\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Faust.js® is a set of tools that make it easy to build headless WordPress apps with Next.js. Accordingly, while there are many features of Faust.js®, you are able to pick and choose those you need for your project.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"From data fetching to Block components, Faust.js® has you covered. Build your headless WordPress app with confidence, knowing that you have the tools you need to get the job done.\"\n    }), \"\\n\", _jsx(_components.h2, {\n      id: \"main-features\",\n      children: \"Main Features\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Some of the main Faust.js® features include:\"\n    }), \"\\n\", _jsxs(_components.table, {\n      children: [_jsx(_components.thead, {\n        children: _jsxs(_components.tr, {\n          children: [_jsx(_components.th, {\n            children: \"Feature\"\n          }), _jsx(_components.th, {\n            children: \"Description\"\n          })]\n        })\n      }), _jsxs(_components.tbody, {\n        children: [_jsxs(_components.tr, {\n          children: [_jsx(_components.td, {\n            children: _jsx(_components.a, {\n              href: \"/docs/explanation/seed-query/\",\n              children: \"Template Hierarchy\"\n            })\n          }), _jsx(_components.td, {\n            children: \"Automatically resolve WordPress content to the right template, just like classic PHP\"\n          })]\n        }), _jsxs(_components.tr, {\n          children: [_jsx(_components.td, {\n            children: _jsx(_components.a, {\n              href: \"/docs/how-to/authentication/\",\n              children: \"Authentication\"\n            })\n          }), _jsx(_components.td, {\n            children: \"Authenticate users in your Next.js app with WordPress\"\n          })]\n        }), _jsxs(_components.tr, {\n          children: [_jsx(_components.td, {\n            children: _jsx(_components.a, {\n              href: \"/docs/how-to/rendering-blocks/\",\n              children: \"Block Components\"\n            })\n          }), _jsx(_components.td, {\n            children: \"Render WordPress blocks in your Next.js app\"\n          })]\n        }), _jsxs(_components.tr, {\n          children: [_jsx(_components.td, {\n            children: _jsx(_components.a, {\n              href: \"/docs/how-to/post-previews/\",\n              children: \"Post Preview\"\n            })\n          }), _jsx(_components.td, {\n            children: \"Preview posts and pages in your Next.js app before publishing them\"\n          })]\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h2, {\n      id: \"how-to-use-these-docs\",\n      children: \"How to Use These Docs\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"These docs are designed to help you get started with Faust.js®. Here are some of the main sections you can explore:\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [_jsx(_components.a, {\n          href: \"/docs/tutorial/\",\n          children: \"Tutorials\"\n        }), \" - Tutorials are best when you are looking to learn about what Faust offers.\"]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [_jsx(_components.a, {\n          href: \"/docs/how-to/\",\n          children: \"How To\"\n        }), \" - How-to guides are best when you are looking to implement a specific feature or integration.\"]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [_jsx(_components.a, {\n          href: \"/docs/reference/\",\n          children: \"API Reference\"\n        }), \" - Reference docs are best when you need details on how to use a specific Faust API.\"]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [_jsx(_components.a, {\n          href: \"/docs/explanation/\",\n          children: \"Explanation\"\n        }), \" - Explanations are best when you want to learn more about a specific feature or topic.\"]\n      }), \"\\n\"]\n    }), \"\\n\", _jsxs(_components.div, {\n      className: \"callout\",\n      \"data-callout\": \"note\",\n      \"data-collapsible\": \"false\",\n      children: [_jsxs(_components.div, {\n        className: \"callout-title\",\n        children: [_jsx(_components.div, {\n          className: \"callout-title-icon\",\n          \"aria-hidden\": \"true\",\n          children: _jsxs(_components.svg, {\n            xmlns: \"http://www.w3.org/2000/svg\",\n            width: \"1em\",\n            height: \"1em\",\n            viewB
15ox: \"0 0 24 24\",\n            fill: \"none\",\n            stroke: \"currentColor\",\n            strokeWidth: \"2\",\n            strokeLinecap: \"round\",\n            strokeLinejoin: \"round\",\n            children: [_jsx(_components.line, {\n              x1: \"18\",\n              y1: \"2\",\n              x2: \"22\",\n              y2: \"6\"\n            }), _jsx(_components.path, {\n              d: \"M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z\"\n            })]\n          })\n        }), _jsx(_components.div, {\n          className: \"callout-title-text\",\n          children: \"Learn More\"\n        })]\n      }), _jsx(_components.div, {\n        className: \"callout-content\",\n        children: _jsxs(_components.p, {\n          children: [\"For more info on how we lay out our documentation, please read about the \", _jsx(_components.a, {\n            href: \"https://diataxis.fr/foundations/#serving-needs\",\n            rel: \"nofollow\",\n            target: \"_blank\",\n            children: _jsx(_components.em, {\n              children: \"Diátaxis\"\n            })\n          }), \" approach we use.\"]\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\n","frontmatter":{"title":"Introduction","description":"Introduction to Faust.js, a toolkit for building headless WordPress applications with Next.js."},"scope":{"toc":[{"value":"What is Faust.js®?","href":"#what-is-faustjs","depth":2,"numbering":[1,1],"parent":"root"},{"value":"Main Features","href":"#main-features","depth":2,"numbering":[1,2],"parent":"root"},{"value":"How to Use These Docs","href":"#how-to-use-these-docs","depth":2,"numbering":[1,3],"parent":"root"}]}},"docsNavData":[{"title":"Introduction","route":"/docs/"},{"title":"Learn Faust.js","route":"/docs/tutorial/learn-faust/"},{"title":"How-To Guides","route":"/docs/how-to/","children":[{"title":"Basic Setup","route":"/docs/how-to/basic-setup/"},{"title":"Authentication","route":"/docs/how-to/authentication/"},{"title":"Customize the Toolbar","route":"/docs/how-to/customize-the-toolbar/"},{"title":"Generate types with GraphQL Codegen","route":"/docs/how-to/generate-types-with-graphql-codegen/"},{"title":"Rendering Blocks","route":"/docs/how-to/rendering-blocks/"},{"title":"Custom Blocks","route":"/docs/how-to/custom-blocks/"},{"title":"Post Previews","route":"/docs/how-to/post-previews/"},{"title":"Sitemaps","route":"/docs/how-to/sitemaps/"},{"title":"Create A Plugin","route":"/docs/how-to/create-a-plugin/"},{"title":"Using WPGraphQL Smart Cache","route":"/docs/how-to/use-wpgraphql-smart-cache/"},{"title":"Query Data in the Browser","route":"/docs/how-to/query-data-in-the-browser/"},{"title":"Query Data in Next.js Routes","route":"/docs/how-to/query-data-in-nextjs-routes/"},{"title":"Custom Post Types","route":"/docs/how-to/setup-cpt-in-faustjs/"}]},{"title":"Reference","route":"/docs/reference/","children":[{"title":"Faust Plugin System Filters","route":"/docs/reference/faust-plugin-system-filters"},{"title":"fromThemeJson","route":"/docs/reference/from-theme-json"},{"title":"getNextServerSideProps","route":"/docs/reference/get-next-server-side-props"},{"title":"getNextStaticProps","route":"/docs/reference/get-next-static-props"}
15,{"title":"getSiteMapProps","route":"/docs/reference/get-site-map-props"},{"title":"getStyles","route":"/docs/reference/get-styles"},{"title":"getWordPressProps","route":"/docs/reference/get-wordpress-props"},{"title":"useAuth","route":"/docs/reference/use-auth"},{"title":"useBlocksTheme","route":"/docs/reference/use-blocks-theme"},{"title":"useLogin","route":"/docs/reference/use-login"},{"title":"useLogout","route":"/docs/reference/use-logout"},{"title":"withFaust","route":"/docs/reference/with-faust"},{"title":"WordPressBlocksProvider","route":"/docs/reference/wordpress-blocks-provider"},{"title":"WordPressBlocksViewer","route":"/docs/reference/wordpress-blocks-viewer"},{"title":"blockset","route":"/docs/reference/blockset"}]},{"title":"Explanation","route":"/docs/explanation/","children":[{"title":"Telemetry","route":"/docs/explanation/telemetry/"},{"title":"Seed Query","route":"/docs/explanation/seed-query/"},{"title":"WordPress Blocks FAQ","route":"/docs/explanation/blocks-faq/"},{"title":"Apollo Client Basics","route":"/docs/explanation/apollo-client-basics/"},{"title":"Deploying Your App","route":"/docs/explanation/deploy-your-app/"},{"title":"Migrate from wp-graphql-gutenberg","route":"/docs/explanation/migrate-from-wp-graphql-gutenberg/"}]}]},"__N_SSG":true},"page":"/docs/[[...slug]]","query":{},"buildId":"FOEtxVaM3pDjl2xzwMS7U","isFallback":false,"isExperimentalCompile":false,"gsp":true,"locale":"en","locales":["en"],"defaultLocale":"en","scriptLoader":[]}</script>
15</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.