CINXE.COM
<!DOCTYPE html><html lang="en" class="dark [--scroll-mt:9.875rem] lg:[--scroll-mt:6.3125rem]"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link rel="preconnect" href="https://HB50HVJDY8-dsn.algolia.net" crossorigin="true"/><meta name="next-head-count" content="3"/><link href="https://www.wpgraphql.com/api/feeds/feed.json" rel="alternate" type="application/feed+json" title="WPGraphQL Blog JSON Feed"/><link href="https://www.wpgraphql.com/api/feeds/rss.xml" rel="alternate" type="application/rss+xml" title="WPGraphQL Blog XML Feed"/><link href="https://www.wpgraphql.com/api/feeds/feed.atom" rel="alternate" type="application/atom+xml" title="WPGraphQL Blog Atom Feed"/><link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=4"/><link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png?v=4"/><link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png?v=4"/><link rel="manifest" href="/favicons/site.webmanifest?v=4"/><link rel="mask-icon" href="/favicons/safari-pinned-tab.svg?v=4" color="#38bdf8"/><link rel="shortcut icon" href="/favicon.ico?v=4"/><meta name="apple-mobile-web-app-title" content="WPGraphQL"/><meta name="application-name" content="WPGraphQL"/><meta name="theme-color" content="#172A53"/><script> try { if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') } } catch (_) {} </script><link rel="preload" href="/_next/static/css/2b9b19fe04f89500.css" as="style"/><link rel="stylesheet" href="/_next/static/css/2b9b19fe04f89500.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/_next/static/chunks/webpack-aaf2b736bc265890.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework-02398e00071ab346.js" as="script"/><link rel="preload" href="/_next/static/chunks/main-c66e5e2c08594bca.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/_app-807050be1a0fea29.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/%5B...wordpressNode%5D-8553865619f9b237.js" as="script"/></head><body class="antialiased text-slate-500 dark:text-slate-400 font-inter bg-white dark:bg-navy"><div id="__next"><header class="relative bg-white sticky top-0 z-50 dark:bg-navy border-b-2 border-b-gray-100 dark:border-b-navy" data-headlessui-state=""><div class="max-w-8xl mx-auto flex justify-between items-center px-4 py-4 sm:px-6 md:justify-start md:space-x-10"><div class="flex justify-start lg:w-0 lg:flex-1"><a href="/"><span class="sr-only">WPGraphQL</span><div class="relative h-full w-auto sm:h-10"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2742%27%20height=%2742%27/%3e"/></span><img alt="WPGraphQL Logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="WPGraphQL Logo" srcSet="/logo-wpgraphql.svg 1x, /logo-wpgraphql.svg 2x" src="/logo-wpgraphql.svg" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></div></a></div><div class="-mr-2 -my-2 md:hidden flex justify-items-end items-center"><button type="button" class="ml-auto text-slate-500 w-8 h-8 -my-1 flex items-center justify-center hover:text-slate-600 lg:hidden dark:text-slate-400 dark:hover:text-slate-300"><span class="sr-only">Search</span><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 19-3.5-3.5"></path><circle cx="11" cy="11" r="6"></circle></svg></button><label class="sr-only" id="headlessui-listbox-label-:Rd4lt6:" data-headlessui-state="">Theme</label><button type="button" id="headlessui-listbox-button-:Rl4lt6:" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="dark:hidden"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="stroke-slate-400 dark:stroke-slate-500"></path><path d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836" class="stroke-slate-400 dark:stroke-slate-500"></path></svg></span><span class="hidden dark:inline"><svg viewBox="0 0 24 24" fill="none" class="w-6 h-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z" class="fill-transparent"></path><path d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z" class="fill-slate-400 dark:fill-slate-500"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z" class="fill-slate-400 dark:fill-slate-500"></path></svg></span></button><button class="bg-white rounded-md p-2 ml-3 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500 dark:bg-navy" type="button" aria-expanded="false" data-headlessui-state=""><span class="sr-only">Open menu</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-6 w-6"><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><nav class="hidden md:flex space-x-10"><div class="relative" data-headlessui-state=""><button class="text-gray-700 dark:text-gray-100 group bg-white dark:bg-navy rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200" type="button" aria-expanded="false" data-headlessui-state=""><span>Docs</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></button></div><div class="relative" data-headlessui-state=""><button class="text-gray-700 dark:text-gray-100 group bg-white dark:bg-navy rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200" type="button" aria-expanded="false" data-headlessui-state=""><span>Developer Reference</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></button></div><a class="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-gray-300" href="/extensions">Extensions</a><a class="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-gray-300" href="/blog">Blog</a><a class="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-gray-300" href="https://repl.wpgraphql.com/">REPL</a></nav><div 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"></div><div class="hidden md:flex items-center gap-4 justify-end md:flex-1 lg:w-0"><button type="button" class="ml-auto text-slate-500 w-8 h-8 -my-1 flex items-center justify-center hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"><span class="sr-only">Search</span><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 19-3.5-3.5"></path><circle cx="11" cy="11" r="6"></circle></svg></button><a href="https://github.com/wp-graphql/wp-graphql" class="text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-100" target="_blank" rel="noreferrer"><span class="sr-only">GitHub</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><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 href="https://wordpress.org/plugins/wp-graphql" class="text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-100" target="_blank" rel="noreferrer"><span class="sr-only">WordPress Plugin</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0"></path></svg></a><label class="sr-only" id="headlessui-listbox-label-:Rdolt6:" data-headlessui-state="">Theme</label><button type="button" id="headlessui-listbox-button-:Rlolt6:" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="dark:hidden"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="stroke-slate-400 dark:stroke-slate-500"></path><path d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836" class="stroke-slate-400 dark:stroke-slate-500"></path></svg></span><span class="hidden dark:inline"><svg viewBox="0 0 24 24" fill="none" class="w-6 h-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z" class="fill-transparent"></path><path d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z" class="fill-slate-400 dark:fill-slate-500"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z" class="fill-slate-400 dark:fill-slate-500"></path></svg></span></button></div></div></header><div 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"></div><div class="overflow-hidden"><div class="mx-auto mt-10 px-4 pb-6 sm:mt-16 sm:px-6 md:px-8 xl:px-12 xl:max-w-6xl"><main class="content"><article class="relative pt-10 max-w-3xl mx-auto"><header><dl><dt class="sr-only">Date</dt><dd class="absolute top-0 inset-x-0 text-navy text-center dark:text-slate-400"><time dateTime="2024-11-14T13:04:54">Thursday, November 14, 2024</time></dd></dl><div class="space-y-6"><h1 class="col-span-full break-words text-3xl sm:text-4xl text-center xl:mb-5 font-extrabold tracking-tight text-navy dark:text-slate-200">Try WPGraphQL Instantly with WordPress Playground Integration</h1><div class="flex flex-wrap justify-center"><a class="text-base font-semibold tracking-wider text-purple-600 dark:text-purple-400 px-3" href="/category/wordpress">WordPress</a></div></div><div class="flex justify-center my-8"><dl><div class="justify-center"><dt class="sr-only">Author</dt><dd class="flex justify-center font-medium mt-6 mx-3"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2750%27%20height=%2750%27/%3e"/></span><img alt="Jason Bahl" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="mr-3 w-10 h-10 rounded-full bg-slate-50 dark:bg-slate-800" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Jason Bahl" srcSet="/_next/image?url=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2F94bf4ea789246f76c48bcf8509bcf01e%3Fs%3D96%26d%3Dmm%26r%3Dg&w=64&q=75 1x, /_next/image?url=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2F94bf4ea789246f76c48bcf8509bcf01e%3Fs%3D96%26d%3Dmm%26r%3Dg&w=128&q=75 2x" src="/_next/image?url=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2F94bf4ea789246f76c48bcf8509bcf01e%3Fs%3D96%26d%3Dmm%26r%3Dg&w=128&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="mr-3 w-10 h-10 rounded-full bg-slate-50 dark:bg-slate-800" loading="lazy"/></noscript></span></dd><dd class="text-center items-center"><a class="text-sky-500 dark:text-sky-300 dark:hover:text-sky-400 hover:text-sky-600 dark:text-sky-400 pt-5 text-center" href="/author/jasonbahl">Jason Bahl</a></dd></div></dl></div></header><div class="mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-12"><div id="content" class="prose dark:prose-dark"> <p>We’re excited to announce that WPGraphQL v1.29.2 now supports <a href="https://make.wordpress.org/meta/2023/12/08/plugin-previews-are-now-available-for-opt-in/">Live Preview</a> functionality on WordPress.org, powered by <a href="https://wordpress.org/playground/">WordPress Playground</a>. This integration makes it easier than ever for developers to experience WPGraphQL firsthand without any installation or setup required.</p> <h2 class="wp-block-heading">Instant Access to GraphQL in WordPress</h2> <p>Starting with version 1.29.2, visitors to the WPGraphQL plugin page on WordPress.org can click the “Live Preview” link to instantly launch a fully functional WordPress environment in their browser. </p> <figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="542" src="https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-1024x542.png" alt="" class="wp-image-833350" srcset="https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-1024x542.png 1024w, https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-300x159.png 300w, https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-768x406.png 768w, https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07.png 1202w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure> <p>This environment comes pre-loaded with WPGraphQL and provides immediate access to the GraphiQL IDE.</p> <h2 class="wp-block-heading">Zero Setup Required</h2> <p>Thanks to WordPress Playground, trying out WPGraphQL is now as simple as:</p> <ol class="wp-block-list"> <li>Visit the <a href="https://wordpress.org/plugins/wp-graphql">WPGraphQL plugin page</a> on WordPress.org</li> <li>Click the “Live Preview” link</li> <li>Start exploring the GraphQL API in your browser</li> </ol> <p>All you need is a web browser and an internet connection – no local development environment, no plugin installation, and no configuration required.</p> <h2 class="wp-block-heading">Perfect for Quick Evaluation</h2> <p>This new feature is particularly valuable for:</p> <ul class="wp-block-list"> <li>Developers evaluating WPGraphQL for their projects</li> <li>Teams wanting to quickly demonstrate WPGraphQL capabilities</li> <li>Learning and exploring GraphQL queries in a WordPress context</li> <li>Testing compatibility with WordPress core features</li> </ul> <h2 class="wp-block-heading">What’s Next?</h2> <p>While the Live Preview feature provides a great way to explore WPGraphQL’s capabilities, remember that for production use, you’ll want to <a href="https://www.wpgraphql.com/docs/quick-start#install">install WPGraphQL directly on your WordPress site</a>. The Live Preview environment is perfect for testing and exploration, but it’s temporary and resets between sessions.</p> <p>We’re excited to see how this new feature helps more developers discover and experiment with WPGraphQL. Give it a try and let us know what you think!</p> <p>Have you tried the new Live Preview feature? We’d love to hear your feedback in the <a href="https://wpgraphql.com/discord">WPGraphQL Discord</a> below or on <a href="https://github.com/wp-graphql/wp-graphql">GitHub</a>.</p> </div></div></article></main></div></div><footer class="border-t border-slate-200 dark:border-slate-200/5 py-10"><div class="max-w-7xl mx-auto px-10 flex flex-col gap-6 justify-between md:flex-row text-slate-500"><div class="flex justify-center space-x-6 md:order-2"><a href="https://github.com/wp-graphql/wp-graphql" class="text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-100" target="_blank" rel="noreferrer"><div><span class="sr-only">GitHub</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><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></div></a><a href="https://wordpress.org/plugins/wp-graphql" class="text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-100" target="_blank" rel="noreferrer"><div><span class="sr-only">WordPress Plugin</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0"></path></svg></div></a><a href="https://twitter.com/wpgraphql" class="text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-100" target="_blank" rel="noreferrer"><div><span class="sr-only">Twitter</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"></path></svg></div></a><a href="https://www.youtube.com/c/WPGraphQL" class="text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-100" target="_blank" rel="noreferrer"><div><span class="sr-only">YouTube</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg></div></a><a href="/discord" class="text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-100" target="_blank" rel="noreferrer"><div><span class="sr-only">Discord</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><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></div></a></div><div class="mt-8 md:mt-0 md:order-1 prose dark:prose-invert"><p class="text-center text-base text-navy dark:text-gray-300">© <!-- -->2025<!-- --> WPGraphQL. All rights reserved.</p></div></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"__SEED_NODE__":{"__typename":"Post","uri":"/2024/11/14/try-wpgraphql-instantly-with-wordpress-playground-integration/","id":"cG9zdDo4MzMzNDk=","databaseId":833349,"isContentNode":true,"slug":"try-wpgraphql-instantly-with-wordpress-playground-integration","contentType":{"__typename":"ContentNodeToContentTypeConnectionEdge","node":{"__typename":"ContentType","name":"post"}},"template":{"__typename":"DefaultTemplate","templateName":"Default"}},"__TEMPLATE_QUERY_DATA__":{"post":{"__typename":"Post","id":"cG9zdDo4MzMzNDk=","title":"Try WPGraphQL Instantly with WordPress Playground Integration","uri":"/2024/11/14/try-wpgraphql-instantly-with-wordpress-playground-integration/","date":"2024-11-14T13:04:54","content":"\n\u003cp\u003eWe\u0026#8217;re excited to announce that WPGraphQL v1.29.2 now supports \u003ca href=\"https://make.wordpress.org/meta/2023/12/08/plugin-previews-are-now-available-for-opt-in/\"\u003eLive Preview\u003c/a\u003e functionality on WordPress.org, powered by \u003ca href=\"https://wordpress.org/playground/\"\u003eWordPress Playground\u003c/a\u003e. This integration makes it easier than ever for developers to experience WPGraphQL firsthand without any installation or setup required.\u003c/p\u003e\n\n\n\n\u003ch2 class=\"wp-block-heading\"\u003eInstant Access to GraphQL in WordPress\u003c/h2\u003e\n\n\n\n\u003cp\u003eStarting with version 1.29.2, visitors to the WPGraphQL plugin page on WordPress.org can click the \u0026#8220;Live Preview\u0026#8221; link to instantly launch a fully functional WordPress environment in their browser. \u003c/p\u003e\n\n\n\n\u003cfigure class=\"wp-block-image size-large\"\u003e\u003cimg loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-1024x542.png\" alt=\"\" class=\"wp-image-833350\" srcset=\"https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-1024x542.png 1024w, https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-300x159.png 300w, https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-768x406.png 768w, https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07.png 1202w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" /\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003eThis environment comes pre-loaded with WPGraphQL and provides immediate access to the GraphiQL IDE.\u003c/p\u003e\n\n\n\n\u003ch2 class=\"wp-block-heading\"\u003eZero Setup Required\u003c/h2\u003e\n\n\n\n\u003cp\u003eThanks to WordPress Playground, trying out WPGraphQL is now as simple as:\u003c/p\u003e\n\n\n\n\u003col class=\"wp-block-list\"\u003e\n\u003cli\u003eVisit the \u003ca href=\"https://wordpress.org/plugins/wp-graphql\"\u003eWPGraphQL plugin page\u003c/a\u003e on WordPress.org\u003c/li\u003e\n\n\n\n\u003cli\u003eClick the \u0026#8220;Live Preview\u0026#8221; link\u003c/li\u003e\n\n\n\n\u003cli\u003eStart exploring the GraphQL API in your browser\u003c/li\u003e\n\u003c/ol\u003e\n\n\n\n\u003cp\u003eAll you need is a web browser and an internet connection – no local development environment, no plugin installation, and no configuration required.\u003c/p\u003e\n\n\n\n\u003ch2 class=\"wp-block-heading\"\u003ePerfect for Quick Evaluation\u003c/h2\u003e\n\n\n\n\u003cp\u003eThis new feature is particularly valuable for:\u003c/p\u003e\n\n\n\n\u003cul class=\"wp-block-list\"\u003e\n\u003cli\u003eDevelopers evaluating WPGraphQL for their projects\u003c/li\u003e\n\n\n\n\u003cli\u003eTeams wanting to quickly demonstrate WPGraphQL capabilities\u003c/li\u003e\n\n\n\n\u003cli\u003eLearning and exploring GraphQL queries in a WordPress context\u003c/li\u003e\n\n\n\n\u003cli\u003eTesting compatibility with WordPress core features\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n\u003ch2 class=\"wp-block-heading\"\u003eWhat\u0026#8217;s Next?\u003c/h2\u003e\n\n\n\n\u003cp\u003eWhile the Live Preview feature provides a great way to explore WPGraphQL\u0026#8217;s capabilities, remember that for production use, you\u0026#8217;ll want to \u003ca href=\"https://www.wpgraphql.com/docs/quick-start#install\"\u003einstall WPGraphQL directly on your WordPress site\u003c/a\u003e. The Live Preview environment is perfect for testing and exploration, but it\u0026#8217;s temporary and resets between sessions.\u003c/p\u003e\n\n\n\n\u003cp\u003eWe\u0026#8217;re excited to see how this new feature helps more developers discover and experiment with WPGraphQL. Give it a try and let us know what you think!\u003c/p\u003e\n\n\n\n\u003cp\u003eHave you tried the new Live Preview feature? We\u0026#8217;d love to hear your feedback in the \u003ca href=\"https://wpgraphql.com/discord\"\u003eWPGraphQL Discord\u003c/a\u003e below or on \u003ca href=\"https://github.com/wp-graphql/wp-graphql\"\u003eGitHub\u003c/a\u003e.\u003c/p\u003e\n","author":{"__typename":"NodeWithAuthorToUserConnectionEdge","node":{"__typename":"User","name":"Jason Bahl","uri":"/author/jasonbahl/","avatar":{"__typename":"Avatar","url":"https://secure.gravatar.com/avatar/94bf4ea789246f76c48bcf8509bcf01e?s=96\u0026d=mm\u0026r=g"}}},"categories":{"__typename":"PostToCategoryConnection","nodes":[{"__typename":"Category","id":"dGVybTo3Njk0NzQ=","name":"WordPress","uri":"/category/wordpress/"}]}},"menu":{"__typename":"Menu","id":"dGVybTozMA==","name":"Primary Nav","menuItems":{"__typename":"MenuToMenuItemConnection","nodes":[{"__typename":"MenuItem","id":"cG9zdDoyNjE3","label":"Docs","description":"Learn how to use WPGraphQL to build headless apps","url":"/docs/introduction/","target":null,"path":"/docs/introduction/","parentId":null,"cssClasses":["icon-BookOpenIcon"]},{"__typename":"MenuItem","id":"cG9zdDo4NDI1","label":"Getting Started","description":"Get up and running with WPGraphQL.","url":"/docs/introduction/","target":null,"path":"/docs/introduction/","parentId":"cG9zdDoyNjE3","cssClasses":["icon-BookOpenIcon"]},{"__typename":"MenuItem","id":"cG9zdDo4NDI0","label":"Beginner Guides","description":"Learn the basics of GraphQL and using it with WordPress","url":"/docs/intro-to-graphql/","target":null,"path":"/docs/intro-to-graphql/","parentId":"cG9zdDoyNjE3","cssClasses":["icon-BookOpenIcon"]},{"__typename":"MenuItem","id":"cG9zdDo4NDI2","label":"Using WPGraphQL","description":"Learn the details of using WPGraphQL","url":"/docs/posts-and-pages/","target":null,"path":"/docs/posts-and-pages/","parentId":"cG9zdDoyNjE3","cssClasses":["icon-ChartBarIcon"]},{"__typename":"MenuItem","id":"cG9zdDo4NDI3","label":"Advanced Concepts","description":"Dig deeper into WPGraphQL’s features","url":"/docs/wpgraphql-concepts/","target":null,"path":"/docs/wpgraphql-concepts/","parentId":"cG9zdDoyNjE3","cssClasses":["icon-ShieldCheckIcon"]},{"__typename":"MenuItem","id":"cG9zdDoyNjI0","label":"Developer Reference","description":"Learn how to extend WPGraphQL on the server","url":"/developer-reference/","target":null,"path":"/developer-reference/","parentId":null,"cssClasses":["icon-Bars4Icon"]},{"__typename":"MenuItem","id":"cG9zdDo4NDM3","label":"Recipes","description":"Helpful Snippets to help developers extend or modify WPGraphQL","url":"/recipes","target":null,"path":"/recipes","parentId":"cG9zdDoyNjI0","cssClasses":["icon-CommandLineIcon"]},{"__typename":"MenuItem","id":"cG9zdDo4NDQw","label":"Functions","description":"Helpful functions for developers interacting with WPGraphQL","url":"/functions","target":null,"path":"/functions","parentId":"cG9zdDoyNjI0","cssClasses":["icon-CodeBracketIcon"]},{"__typename":"MenuItem","id":"cG9zdDo4NDM4","label":"Actions","description":"WordPress actions you can use to hook into WPGraphQL","url":"/actions","target":null,"path":"/actions","parentId":"cG9zdDoyNjI0","cssClasses":["icon-BoltIcon"]},{"__typename":"MenuItem","id":"cG9zdDo4NDM5","label":"Filters","description":"WordPress filters you can use to modify WPGraphQL","url":"/filters","target":null,"path":"/filters","parentId":"cG9zdDoyNjI0","cssClasses":["icon-FunnelIcon"]},{"__typename":"MenuItem","id":"cG9zdDoyNjIw","label":"Extensions","description":"Find extensions that add functionality to WPGrapQL","url":"/extensions","target":null,"path":"/extensions","parentId":null,"cssClasses":["icon-PuzzlePieceIcon"]},{"__typename":"MenuItem","id":"cG9zdDo4MzMzNzM=","label":"Blog","description":null,"url":"/blog","target":null,"path":"/blog","parentId":null,"cssClasses":[]},{"__typename":"MenuItem","id":"cG9zdDo4MzMyMzA=","label":"REPL","description":"WPGraphQL REPL","url":"https://repl.wpgraphql.com/","target":"_blank","path":"https://repl.wpgraphql.com/","parentId":null,"cssClasses":[]}]}},"__typename":"RootQuery"},"__TEMPLATE_VARIABLES__":{"uri":"/2024/11/14/try-wpgraphql-instantly-with-wordpress-playground-integration/"},"__FAUST_QUERIES__":null,"__APOLLO_STATE__":{"Post:cG9zdDo4MzMzNDk=":{"__typename":"Post","uri":"/2024/11/14/try-wpgraphql-instantly-with-wordpress-playground-integration/","id":"cG9zdDo4MzMzNDk=","databaseId":833349,"isContentNode":true,"slug":"try-wpgraphql-instantly-with-wordpress-playground-integration","contentType":{"__typename":"ContentNodeToContentTypeConnectionEdge","node":{"__typename":"ContentType","name":"post"}},"template":{"__typename":"DefaultTemplate","templateName":"Default"},"title":"Try WPGraphQL Instantly with WordPress Playground Integration","date":"2024-11-14T13:04:54","content":"\n\u003cp\u003eWe\u0026#8217;re excited to announce that WPGraphQL v1.29.2 now supports \u003ca href=\"https://make.wordpress.org/meta/2023/12/08/plugin-previews-are-now-available-for-opt-in/\"\u003eLive Preview\u003c/a\u003e functionality on WordPress.org, powered by \u003ca href=\"https://wordpress.org/playground/\"\u003eWordPress Playground\u003c/a\u003e. This integration makes it easier than ever for developers to experience WPGraphQL firsthand without any installation or setup required.\u003c/p\u003e\n\n\n\n\u003ch2 class=\"wp-block-heading\"\u003eInstant Access to GraphQL in WordPress\u003c/h2\u003e\n\n\n\n\u003cp\u003eStarting with version 1.29.2, visitors to the WPGraphQL plugin page on WordPress.org can click the \u0026#8220;Live Preview\u0026#8221; link to instantly launch a fully functional WordPress environment in their browser. \u003c/p\u003e\n\n\n\n\u003cfigure class=\"wp-block-image size-large\"\u003e\u003cimg loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-1024x542.png\" alt=\"\" class=\"wp-image-833350\" srcset=\"https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-1024x542.png 1024w, https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-300x159.png 300w, https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07-768x406.png 768w, https://content.wpgraphql.com/wp-content/uploads/2024/11/CleanShot-2024-11-14-at-12.52.07.png 1202w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" /\u003e\u003c/figure\u003e\n\n\n\n\u003cp\u003eThis environment comes pre-loaded with WPGraphQL and provides immediate access to the GraphiQL IDE.\u003c/p\u003e\n\n\n\n\u003ch2 class=\"wp-block-heading\"\u003eZero Setup Required\u003c/h2\u003e\n\n\n\n\u003cp\u003eThanks to WordPress Playground, trying out WPGraphQL is now as simple as:\u003c/p\u003e\n\n\n\n\u003col class=\"wp-block-list\"\u003e\n\u003cli\u003eVisit the \u003ca href=\"https://wordpress.org/plugins/wp-graphql\"\u003eWPGraphQL plugin page\u003c/a\u003e on WordPress.org\u003c/li\u003e\n\n\n\n\u003cli\u003eClick the \u0026#8220;Live Preview\u0026#8221; link\u003c/li\u003e\n\n\n\n\u003cli\u003eStart exploring the GraphQL API in your browser\u003c/li\u003e\n\u003c/ol\u003e\n\n\n\n\u003cp\u003eAll you need is a web browser and an internet connection – no local development environment, no plugin installation, and no configuration required.\u003c/p\u003e\n\n\n\n\u003ch2 class=\"wp-block-heading\"\u003ePerfect for Quick Evaluation\u003c/h2\u003e\n\n\n\n\u003cp\u003eThis new feature is particularly valuable for:\u003c/p\u003e\n\n\n\n\u003cul class=\"wp-block-list\"\u003e\n\u003cli\u003eDevelopers evaluating WPGraphQL for their projects\u003c/li\u003e\n\n\n\n\u003cli\u003eTeams wanting to quickly demonstrate WPGraphQL capabilities\u003c/li\u003e\n\n\n\n\u003cli\u003eLearning and exploring GraphQL queries in a WordPress context\u003c/li\u003e\n\n\n\n\u003cli\u003eTesting compatibility with WordPress core features\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n\u003ch2 class=\"wp-block-heading\"\u003eWhat\u0026#8217;s Next?\u003c/h2\u003e\n\n\n\n\u003cp\u003eWhile the Live Preview feature provides a great way to explore WPGraphQL\u0026#8217;s capabilities, remember that for production use, you\u0026#8217;ll want to \u003ca href=\"https://www.wpgraphql.com/docs/quick-start#install\"\u003einstall WPGraphQL directly on your WordPress site\u003c/a\u003e. The Live Preview environment is perfect for testing and exploration, but it\u0026#8217;s temporary and resets between sessions.\u003c/p\u003e\n\n\n\n\u003cp\u003eWe\u0026#8217;re excited to see how this new feature helps more developers discover and experiment with WPGraphQL. Give it a try and let us know what you think!\u003c/p\u003e\n\n\n\n\u003cp\u003eHave you tried the new Live Preview feature? We\u0026#8217;d love to hear your feedback in the \u003ca href=\"https://wpgraphql.com/discord\"\u003eWPGraphQL Discord\u003c/a\u003e below or on \u003ca href=\"https://github.com/wp-graphql/wp-graphql\"\u003eGitHub\u003c/a\u003e.\u003c/p\u003e\n","author":{"__typename":"NodeWithAuthorToUserConnectionEdge","node":{"__typename":"User","name":"Jason Bahl","uri":"/author/jasonbahl/","avatar":{"__typename":"Avatar","url":"https://secure.gravatar.com/avatar/94bf4ea789246f76c48bcf8509bcf01e?s=96\u0026d=mm\u0026r=g"}}},"categories":{"__typename":"PostToCategoryConnection","nodes":[{"__ref":"Category:dGVybTo3Njk0NzQ="}]}},"ROOT_QUERY":{"__typename":"RootQuery","nodeByUri({\"uri\":\"/2024/11/14/try-wpgraphql-instantly-with-wordpress-playground-integration\"})":{"__ref":"Post:cG9zdDo4MzMzNDk="},"post({\"id\":\"/2024/11/14/try-wpgraphql-instantly-with-wordpress-playground-integration/\",\"idType\":\"URI\"})":{"__ref":"Post:cG9zdDo4MzMzNDk="},"menu({\"id\":\"Primary Nav\",\"idType\":\"NAME\"})":{"__ref":"Menu:dGVybTozMA=="}},"Category:dGVybTo3Njk0NzQ=":{"__typename":"Category","id":"dGVybTo3Njk0NzQ=","name":"WordPress","uri":"/category/wordpress/"},"MenuItem:cG9zdDoyNjE3":{"__typename":"MenuItem","id":"cG9zdDoyNjE3","label":"Docs","description":"Learn how to use WPGraphQL to build headless apps","url":"/docs/introduction/","target":null,"path":"/docs/introduction/","parentId":null,"cssClasses":["icon-BookOpenIcon"]},"MenuItem:cG9zdDo4NDI1":{"__typename":"MenuItem","id":"cG9zdDo4NDI1","label":"Getting Started","description":"Get up and running with WPGraphQL.","url":"/docs/introduction/","target":null,"path":"/docs/introduction/","parentId":"cG9zdDoyNjE3","cssClasses":["icon-BookOpenIcon"]},"MenuItem:cG9zdDo4NDI0":{"__typename":"MenuItem","id":"cG9zdDo4NDI0","label":"Beginner Guides","description":"Learn the basics of GraphQL and using it with WordPress","url":"/docs/intro-to-graphql/","target":null,"path":"/docs/intro-to-graphql/","parentId":"cG9zdDoyNjE3","cssClasses":["icon-BookOpenIcon"]},"MenuItem:cG9zdDo4NDI2":{"__typename":"MenuItem","id":"cG9zdDo4NDI2","label":"Using WPGraphQL","description":"Learn the details of using WPGraphQL","url":"/docs/posts-and-pages/","target":null,"path":"/docs/posts-and-pages/","parentId":"cG9zdDoyNjE3","cssClasses":["icon-ChartBarIcon"]},"MenuItem:cG9zdDo4NDI3":{"__typename":"MenuItem","id":"cG9zdDo4NDI3","label":"Advanced Concepts","description":"Dig deeper into WPGraphQL’s features","url":"/docs/wpgraphql-concepts/","target":null,"path":"/docs/wpgraphql-concepts/","parentId":"cG9zdDoyNjE3","cssClasses":["icon-ShieldCheckIcon"]},"MenuItem:cG9zdDoyNjI0":{"__typename":"MenuItem","id":"cG9zdDoyNjI0","label":"Developer Reference","description":"Learn how to extend WPGraphQL on the server","url":"/developer-reference/","target":null,"path":"/developer-reference/","parentId":null,"cssClasses":["icon-Bars4Icon"]},"MenuItem:cG9zdDo4NDM3":{"__typename":"MenuItem","id":"cG9zdDo4NDM3","label":"Recipes","description":"Helpful Snippets to help developers extend or modify WPGraphQL","url":"/recipes","target":null,"path":"/recipes","parentId":"cG9zdDoyNjI0","cssClasses":["icon-CommandLineIcon"]},"MenuItem:cG9zdDo4NDQw":{"__typename":"MenuItem","id":"cG9zdDo4NDQw","label":"Functions","description":"Helpful functions for developers interacting with WPGraphQL","url":"/functions","target":null,"path":"/functions","parentId":"cG9zdDoyNjI0","cssClasses":["icon-CodeBracketIcon"]},"MenuItem:cG9zdDo4NDM4":{"__typename":"MenuItem","id":"cG9zdDo4NDM4","label":"Actions","description":"WordPress actions you can use to hook into WPGraphQL","url":"/actions","target":null,"path":"/actions","parentId":"cG9zdDoyNjI0","cssClasses":["icon-BoltIcon"]},"MenuItem:cG9zdDo4NDM5":{"__typename":"MenuItem","id":"cG9zdDo4NDM5","label":"Filters","description":"WordPress filters you can use to modify WPGraphQL","url":"/filters","target":null,"path":"/filters","parentId":"cG9zdDoyNjI0","cssClasses":["icon-FunnelIcon"]},"MenuItem:cG9zdDoyNjIw":{"__typename":"MenuItem","id":"cG9zdDoyNjIw","label":"Extensions","description":"Find extensions that add functionality to WPGrapQL","url":"/extensions","target":null,"path":"/extensions","parentId":null,"cssClasses":["icon-PuzzlePieceIcon"]},"MenuItem:cG9zdDo4MzMzNzM=":{"__typename":"MenuItem","id":"cG9zdDo4MzMzNzM=","label":"Blog","description":null,"url":"/blog","target":null,"path":"/blog","parentId":null,"cssClasses":[]},"MenuItem:cG9zdDo4MzMyMzA=":{"__typename":"MenuItem","id":"cG9zdDo4MzMyMzA=","label":"REPL","description":"WPGraphQL REPL","url":"https://repl.wpgraphql.com/","target":"_blank","path":"https://repl.wpgraphql.com/","parentId":null,"cssClasses":[]},"Menu:dGVybTozMA==":{"__typename":"Menu","id":"dGVybTozMA==","name":"Primary Nav","menuItems({\"first\":100})":{"__typename":"MenuToMenuItemConnection","nodes":[{"__ref":"MenuItem:cG9zdDoyNjE3"},{"__ref":"MenuItem:cG9zdDo4NDI1"},{"__ref":"MenuItem:cG9zdDo4NDI0"},{"__ref":"MenuItem:cG9zdDo4NDI2"},{"__ref":"MenuItem:cG9zdDo4NDI3"},{"__ref":"MenuItem:cG9zdDoyNjI0"},{"__ref":"MenuItem:cG9zdDo4NDM3"},{"__ref":"MenuItem:cG9zdDo4NDQw"},{"__ref":"MenuItem:cG9zdDo4NDM4"},{"__ref":"MenuItem:cG9zdDo4NDM5"},{"__ref":"MenuItem:cG9zdDoyNjIw"},{"__ref":"MenuItem:cG9zdDo4MzMzNzM="},{"__ref":"MenuItem:cG9zdDo4MzMyMzA="}]}}}},"__N_SSG":true},"page":"/[...wordpressNode]","query":{"wordpressNode":["2024","11","14","try-wpgraphql-instantly-with-wordpress-playground-integration"]},"buildId":"O4Tz2qRxFYEkYRCQePyAA","isFallback":false,"gsp":true,"scriptLoader":[]}</script><script nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-aaf2b736bc265890.js" async=""></script><script src="/_next/static/chunks/framework-02398e00071ab346.js" async=""></script><script src="/_next/static/chunks/main-c66e5e2c08594bca.js" async=""></script><script src="/_next/static/chunks/pages/_app-807050be1a0fea29.js" async=""></script><script src="/_next/static/chunks/pages/%5B...wordpressNode%5D-8553865619f9b237.js" async=""></script><script src="/_next/static/O4Tz2qRxFYEkYRCQePyAA/_buildManifest.js" async=""></script><script src="/_next/static/O4Tz2qRxFYEkYRCQePyAA/_ssgManifest.js" async=""></script></body></html>