1<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><style>:where(img){height:auto}</style><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="canonical" href="https://blog.partykit.io/posts/introducing-starter-kits/"><meta name="generator" content="Astro v4.16.18">
1<script defer="" src="/_vercel/insights/script.js"></script>
1<!-- General Meta Tags --><title>Introducing PartyKit starter kits, minimal and full fat</title><meta name="title" content="Introducing PartyKit starter kits, minimal and full fat"><meta name="description" content="`npm create partykit@latest` is now the best way to get started with PartyKit. Choose from five templates."><meta name="author" content="Matt Webb"><link rel="sitemap" href="/sitemap-index.xml"><!-- Open Graph / Facebook --><meta property="og:title" content="Introducing PartyKit starter kits, minimal and full fat"><meta property="og:description" content="`npm create partykit@latest` is now the best way to get started with PartyKit. Choose from five templates."><meta property="og:url" content="https://blog.partykit.io/posts/introducing-starter-kits/"><meta property="og:image" content="https://blog.partykit.io/content-images/introducing-starter-kits/social.png"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://blog.partykit.io/posts/introducing-starter-kits/"><meta property="twitter:title" content="Introducing PartyKit starter kits, minimal and full fat"><meta property="twitter:description" content="`npm create partykit@latest` is now the best way to get started with PartyKit. Choose from five templates."><meta property="twitter:image" content="https://blog.partykit.io/content-images/introducing-starter-kits/social.png"><!-- Google Font --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
1<script src="/toggle-theme.js"></script>
1<script type="application/javascript">window.va=window.va||function(){(window.vaq=window.vaq||[]).push(arguments)}; 2</script>
2<script defer="" src="/_vercel/insights/script.js"></script>
2<link rel="stylesheet" href="/_astro/index.VqjEGD4v.css"> 3<link rel="stylesheet" href="/_astro/_slug_.DaWbljtf.css"> 4<style>a[data-astro-cid-blwjyjpt]{gap:0 calc(var(--character-width)*.5);flex-direction:row;display:flex}a[data-astro-cid-blwjyjpt]:hover,a[data-astro-cid-blwjyjpt]:focus{color:var(--color-feature-2)}a[data-astro-cid-blwjyjpt] span[data-astro-cid-blwjyjpt]{text-decoration:underline}a[data-astro-cid-blwjyjpt]:before{content:"ð";position:relative;top:.1em}.breadcrumb[data-astro-cid-ilhxcym7]{box-sizing:border-box;border-bottom:1px solid var(--color-feature-1);flex-direction:row;align-items:center;height:100px;padding-top:50px;padding-left:1rem;padding-right:1rem;display:flex}@media (min-width:760px){.breadcrumb[data-astro-cid-ilhxcym7]{padding-left:2rem;padding-right:2rem}}@media (min-width:1100px){.breadcrumb[data-astro-cid-ilhxcym7]{width:calc(80% - 3rem);margin:0 auto;padding-left:0;padding-right:0}}.breadcrumb[data-astro-cid-ilhxcym7] ul[data-astro-cid-ilhxcym7]{flex-direction:row;align-items:center;display:flex}.breadcrumb[data-astro-cid-ilhxcym7] li[data-astro-cid-ilhxcym7]{flex-direction:row;display:flex}.breadcrumb[data-astro-cid-ilhxcym7] li[data-astro-cid-ilhxcym7]+li[data-astro-cid-ilhxcym7]:before{content:"/";padding:0 var(--character-width);font-variation-settings:"wght" 150;position:relative;left:0}.breadcrumb[data-astro-cid-ilhxcym7] a[data-astro-cid-ilhxcym7]{text-decoration:underline}#main-content[data-astro-cid-hsp6otuf]{margin:calc(var(--whitespace) - 50px)0 calc(var(--whitespace)*.5)}@media (min-width:1100px){#main-content[data-astro-cid-hsp6otuf]{width:calc(80% - 3rem);margin-left:auto;margin-right:auto}}#main-content[data-astro-cid-hsp6otuf]>h1[data-astro-cid-hsp6otuf]{display:none}#main-content[data-astro-cid-hsp6otuf]>h1[data-astro-cid-hsp6otuf]+p[data-astro-cid-hsp6otuf]{text-align:center;padding:0 3rem}a[data-astro-cid-5eunqzkt]{padding:var(--box-padding);text-align:center;background:var(--color-feature-2);color:var(--color-page);font-variation-settings:"wght" 350;cursor:pointer;border:none;border-radius:2em;flex-grow:2;width:100%;text-decoration:none;display:inline-block}@media (max-width:759px){a[data-astro-cid-5eunqzkt]{padding-left:1rem;padding-right:1rem;font-size:95%}}@media (min-width:760px){a[data-astro-cid-5eunqzkt]{max-width:var(--atom-width)}}a[data-astro-cid-5eunqzkt]:after{content:"â";margin-left:var(--character-width);transition:all .3s .3s;position:relative;left:0}a[data-astro-cid-5eunqzkt]:hover,a[data-astro-cid-5eunqzkt]:focus{color:var(--color-page)}a[data-astro-cid-5eunqzkt]:hover:after,a[data-astro-cid-5eunqzkt]:focus:after{left:.25em}h1[data-astro-cid-vj4tpspi]{margin:calc(var(--whitespace) - 50px)auto calc(var(--whitespace)*.5);max-width:15em;padding:0 2rem}.breadcrumb[data-astro-cid-vj4tpspi]{box-sizing:border-box;border-bottom:1px solid var(--color-feature-1);flex-direction:row;align-items:center;height:100px;padding:50px 1rem 0;display:flex}@media (min-width:760px){.breadcrumb[data-astro-cid-vj4tpspi]{padding-left:2rem;padding-right:2rem}}@media (min-width:1100px){.breadcrumb[data-astro-cid-vj4tpspi]{width:calc(80% - 3rem);margin:0 auto}}.breadcrumb[data-astro-cid-vj4tpspi] span[data-astro-cid-vj4tpspi]{cursor:pointer}.breadcrumb[data-astro-cid-vj4tpspi] span[data-astro-cid-vj4tpspi]:last-child:before{content:"â";padding-right:var(--character-width);transition:all .3s .3s;position:relative;left:0}.breadcrumb[data-astro-cid-vj4tpspi] span[data-astro-cid-vj4tpspi]:hover:before{left:-.25em}.metadata[data-astro-cid-vj4tpspi]{color:var(--color-feature-2);flex-direction:row;gap:0;margin-bottom:1rem;padding:0 3rem;display:flex}.metadata[data-astro-cid-vj4tpspi]:after{content:"."}.metadata[data-astro-cid-vj4tpspi]>[data-astro-cid-vj4tpspi]:after{content:",";padding-right:var(--character-width)}@media (max-width:759px){.metadata[data-astro-cid-vj4tpspi]{font-size:16px}}@media (min-width:760px){.metadata[data-astro-cid-vj4tpspi]{padding-left:0;padding-right:0}}article[data-astro-cid-vj4tpspi]{padding:0 3rem;padding-bottom:calc(var(--whitespace)*.5);flex-direction:column;gap:1rem;display:flex}@media (min-width:760px){article[data-astro-cid-vj4tpspi]{padding-left:0;padding-right:0}}.tags-container[data-astro-cid-vj4tpspi]{border-top:1px solid var(--color-feature-1);flex-flow:wrap;justify-content:center;align-items:center;gap:1rem 2rem;min-height:50px;padding:1rem 2rem;display:flex}@media (min-width:1100px){.tags-container[data-astro-cid-vj4tpspi]{width:calc(80% - 3rem);margin:0 auto}}.pagination-wrapper[data-astro-cid-eenky23y]{flex-direction:row;justify-content:center;align-items:center;gap:1rem;width:calc(100% - 6rem);margin:4rem 3rem 0;display:flex}@media (min-width:760px){.pagination-wrapper[data-astro-cid-eenky23y]{width:100%;margin:4rem 0 0}}.pagination-wrapper[data-astro-cid-eenky23y] a[data-astro-cid-eenky23y]:first-child:before{content:"â";margin-right:var(--character-width);transition:all .3s .3s;position:relative;
4left:0}.pagination-wrapper[data-astro-cid-eenky23y] a[data-astro-cid-eenky23y]:first-child:hover:before,.pagination-wrapper[data-astro-cid-eenky23y] a[data-astro-cid-eenky23y]:first-child:focus:before{left:-.25em}.pagination-wrapper[data-astro-cid-eenky23y] a[data-astro-cid-eenky23y]:first-child:after{content:none}.pagination-wrapper[data-astro-cid-eenky23y] a[data-astro-cid-eenky23y][aria-disabled]{opacity:.25;cursor:default}.pagination-wrapper[data-astro-cid-eenky23y] a[data-astro-cid-eenky23y][aria-disabled]:hover:before,.pagination-wrapper[data-astro-cid-eenky23y] a[data-astro-cid-eenky23y][aria-disabled]:hover:after,.pagination-wrapper[data-astro-cid-eenky23y] a[data-astro-cid-eenky23y][aria-disabled]:focus:before,.pagination-wrapper[data-astro-cid-eenky23y] a[data-astro-cid-eenky23y][aria-disabled]:focus:after{left:0}</style>
4<script type="module">window.va=window.va||function(){(window.vaq=window.vaq||[]).push(arguments)};const e=document.querySelector(".hamburger-menu"),n=document.querySelector(".menu-icon"),u=document.querySelector("#menu-items");e?.addEventListener("click",()=>{const t=e.getAttribute("aria-expanded")==="true";n?.classList.toggle("is-active"),e.setAttribute("aria-expanded",t?"false":"true"),e.setAttribute("aria-label",t?"Open Menu":"Close Menu"),u?.classList.toggle("display-none")}); 5</script>
5</head> <body class="font-core"> <header data-astro-cid-3ef6ksr2=""> <nav data-astro-cid-3ef6ksr2=""> <input id="nav-button" type="checkbox" data-astro-cid-3ef6ksr2=""> <h1 data-astro-cid-3ef6ksr2=""><a href="https://partykit.io" data-astro-cid-3ef6ksr2=""><span data-astro-cid-3ef6ksr2="">PartyKit</span></a></h1> <div id="nav-panel" data-astro-cid-3ef6ksr2=""> <div id="nav-pages" class="font-core" data-astro-cid-3ef6ksr2=""> <a class="nav-page-item" href="https://docs.partykit.io" data-astro-cid-3ef6ksr2=""><span data-astro-cid-3ef6ksr2="">Docs</span></a> <a class="nav-page-item" href="https://partykit.io/#pricing-header" data-dismiss-nav="" data-astro-cid-3ef6ksr2=""><span data-astro-cid-3ef6ksr2="">Pricing</span></a> <a class="nav-page-item" href="https://blog.partykit.io" data-astro-cid-3ef6ksr2=""><span data-astro-cid-3ef6ksr2="">Blog</span></a> </div> <div id="nav-icons" data-astro-cid-3ef6ksr2=""> <a class="icon" href="https://twitter.com/partykit_io" data-astro-cid-3ef6ksr2=""> <svg fill="currentColor" height="24" width="24" aria-hidden="true" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2=""> <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" data-astro-cid-3ef6ksr2=""></path> </svg> <span data-astro-cid-3ef6ksr2="">Twitter</span> </a> <a class="icon" href="https://github.com/partykit/partykit/" data-astro-cid-3ef6ksr2=""> <svg fill="currentColor" height="24" width="24" aria-hidden="true" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2=""> <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" data-astro-cid-3ef6ksr2=""></path> </svg> <span data-astro-cid-3ef6ksr2="">GitHub</span> </a> <a class="icon" href="https://discord.gg/GJwKKTcQ7W" data-astro-cid-3ef6ksr2=""> <svg fill="currentColor" height="24" width="24" aria-hidden="true" viewBox="0 0 135 90" data-astro-cid-3ef6ksr2=""> <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" data-astro-cid-3ef6ksr2=""></path> </svg> <span data-astro-cid-3ef6ksr2="">Discord</span> </a> </div> </div> </nav> </header> <div class="breadcrumb" data-astro-cid-vj4tpspi=""> <span onclick="history.back()" data-astro-cid-vj4tpspi="">Go back</span> </div> <main id="main-content" data-astro-cid-vj4tpspi=""> <h1 class="font-hero" data-astro-cid-vj4tpspi="">Introducing PartyKit starter kits, minimal and full fat</h1> <div class="max-w-2xl mx-auto metadata" data-astro-cid-vj4tpspi=""> <span data-astro-cid-vj4tpspi="">Matt Webb</span> <div><span class="sr-only">Posted on:</span><span>22 Feb 2024</span></div> </div> <article id="article" role="article" class="max-w-2xl mx-auto" data-astro-cid-vj4tpspi=""> <p>Weâre on a mission to make it even easier to get started with PartyKit.</p> 6<p>Now when you type:</p> 7<pre class="astro-code github-dark" style="color:#e1e4e8;white-space:pre-wrap;word-wrap:break-word;background-color:#24292e;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npm</span><span style="color:#9ECBFF"> create</span><span style="color:#9ECBFF"> partykit@latest</span></span> 8<span class="line"></span></code></pre> 9<p>â¦youâll see a number of options:</p> 10<pre class="astro-code github-dark" style="color:#e1e4e8;white-space:pre-wrap;word-wrap:break-word;background-color:#24292e;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>Which template would you like to use?</span></span> 11<span class="line"><span>⯠TypeScript starter</span></span> 12<span class="line"><span> JavaScript starter</span></span> 13<span class="line"><span> React starter</span></span> 14<span class="line"><span> Chat room starter with AI</span></span> 15<span class="line"><span> Text editor starter using Yjs</span></span> 16<span class="line"><span></span></span></code></pre> 17<p>Letâs dive into all five!</p> 18<h2 id="ï¸-these-starters-are-for-new-projects">ð£ï¸ These starters are for new projects</h2> 19<p>These starters are for new PartyKit projects, and for example code. If you already have a project, see the docs for <a href="https://docs.partykit.io/add-to-existing-project/">how to add PartyKit to an existing project</a>.</p> 20<h2 id="minimal-starters">Minimal starters</h2>
21<h3 id="typescript-starter-and-javascript-starter">TypeScript starter and Javascript starter</h3> 22<p>Save yourself time doing setup.</p> 23<p>Choose one of these two starters for:</p> 24<ul> 25<li>a working PartyKit server</li> 26<li>a client-side app that connects to the server</li> 27<li>the <code>partykit.json</code> config file</li> 28</ul> 29<p>You can type <code>npm run dev</code> immediately: both starters include example client-server messages, and the client app is built and served using PartyKit so you can work with it during development.</p> 30<p>In TypeScript and Javascript flavors.</p> 31<h3 id="react-starter">React starter</h3> 32<p>As real-time frameworks, PartyKit and React pair well together! So this is a brand new starter that gets you up and running in no time.</p> 33<p>Get started with:</p> 34<pre class="astro-code github-dark" style="color:#e1e4e8;white-space:pre-wrap;word-wrap:break-word;background-color:#24292e;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npm</span><span style="color:#9ECBFF"> create</span><span style="color:#9ECBFF"> partykit@latest</span><span style="color:#9ECBFF"> my-react-project</span><span style="color:#79B8FF"> --template</span><span style="color:#9ECBFF"> react</span></span> 35<span class="line"></span></code></pre> 36<p>When you run the app with <code>npm run dev</code>, youâll find a traditional <em>âIncrement Meâ</em> button to demonstrate client state. Only <em>this</em> button is multiplayer.</p> 37<p><img src="/content-images/introducing-starter-kits/react-starter.png.webp" alt="Two browser windows showing a shared 'Increment Me' button" fetchpriority="high" decoding="async" width="1400" height="737" srcset="/content-images/introducing-starter-kits/react-starter.png.webp 1400w, /content-images/introducing-starter-kits/[email protected] 800w" sizes="100vw"></p> 38<p>Itâs a great starting point. <a href="https://github.com/partykit/templates/blob/main/templates/react/README.md">See the README to get oriented.</a></p> 39<h3 id="bonus-starter-remix">Bonus starter: Remix</h3> 40<p><a href="https://remix.run">Remix</a> is a full-stack framework for React with a server-side framework, routing and more. Weâve made a PartyKit starter for Remix, too, which includes hosting the entire Remix application on the PartyKit platform.</p> 41<p>Itâs a little different than the other templates. To get started, run:</p> 42<pre class="astro-code github-dark" style="color:#e1e4e8;white-space:pre-wrap;word-wrap:break-word;background-color:#24292e;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npx</span><span style="color:#9ECBFF"> create-remix@latest</span><span style="color:#79B8FF"> --template</span><span style="color:#9ECBFF"> partykit/remix-starter</span></span> 43<span class="line"></span></code></pre> 44<p>See the <a href="https://github.com/partykit/remix-starter">remix-starter repo on GitHub</a> for more details.</p> 45<h2 id="full-fat-starters">Full-fat starters</h2> 46<p>Weâre taking this opportunity to show richer uses of PartyKit, demonstrating patterns that are more advanced but widely applicable.</p> 47<p>Weâre starting with two, both fully documented.</p> 48<h3 id="chat-room-starter-with-ai">Chat room starter with AI</h3> 49<p>Select this starter to see:</p> 50<ul> 51<li>Multiplayer chat with AI participants, and how to keep state</li> 52<li>Using <a href="https://docs.partykit.io/reference/partykit-ai/">PartyKit AI</a> to call large language models like Llama and Mistral right from the PartyKit server</li> 53<li>Also how to call external OpenAI models, with streaming responses.</li> 54</ul> 55<p><img src="/content-images/introducing-starter-kits/ai-joke.gif" alt="Multiple participants in a chat room, including an AI user" loading="lazy" decoding="async" width="960" height="51816"></p> 56<p><strong>Bonus feature:</strong> the <code>shouldReply</code> function on the server shows how to escalate from a cheaper model that discriminates when to jump in, to a more expensive model that generates the response. It feels more natural than an AI partipant that responses to every message.</p> 57<p>PartyKit is a great fit for stateful, real-time AI experiences, so we love digging into real interactions.</p> 58<p><a href="https://github.com/partykit/templates/blob/main/templates/chat-room/README.md">You also get this chat room README</a> in the starter.</p> 59<p><strong>The README is a detailed breakdown of how to build this AI chat room app.</strong> Itâs a starting point to learn about PartyKit even if this isnât the exact code you begin your project with.</p> 60<h3 id="text-editor-starter-using-yjs">Text editor starter using Yjs</h3> 61<p>This starter shows:</p> 62<ul> 63<li>A collaborative text editor using Yjs for sync</li> 64<li>Yjs on the client and server, implementing using the drop-in <a href="https://docs.partykit.io/reference/y-partykit-api/">Y-PartyKit</a> library</li> 65<li>Multiple rooms with live occupancy counts.</li> 66</ul> 67<p><img src="/content-images/introducing-starter-kits/yjs-editor.png.webp" alt="A text editor showing text highlighted by a remote user and a rooms n
67avigator" loading="lazy" decoding="async" width="1600" height="1061" srcset="/content-images/introducing-starter-kits/yjs-editor.png.webp 1600w, /content-images/introducing-starter-kits/[email protected] 1000w" sizes="100vw"></p> 68<p>Yjs is a battle-tested and popular sync framework, and PartyKit has first-class support. This starter is your reference implementation if youâre building your own Yjs app.</p> 69<p>Additionally, a common pattern for multiplayer apps is to have <em>rooms</em> where users can move from room to room to collaborate with different teams on different data. But how can rooms advertise their real-time presence, or other metadata, into a lobby or other index view? This example demonstrates how, using PartyKitâs <a href="https://docs.partykit.io/guides/using-multiple-parties-per-project/">multiple party support</a>.</p> 70<p><a href="https://github.com/partykit/templates/blob/main/templates/text-editor/README.md">Hereâs the text editor README.</a></p> 71<p>Again, <strong>the README is a detailed breakdown of how to build this Yjs editor app.</strong> Start a project with this template to get the README, and follow along to learn more about PartyKit, and the Yjs and multi-party patterns.</p> 72<h2 id="whats-next">Whatâs next</h2> 73<p><strong>Itâs the best way to get started with PartyKit:</strong></p> 74<pre class="astro-code github-dark" style="color:#e1e4e8;white-space:pre-wrap;word-wrap:break-word;background-color:#24292e;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npm</span><span style="color:#9ECBFF"> create</span><span style="color:#9ECBFF"> partykit@latest</span></span> 75<span class="line"></span></code></pre> 76<p>We plan to add more starters over time.</p> 77<p>Weâd love to hear your feedback on these initial starters, and suggestions on what to add next.</p> 78<p>Join us on our <a href="https://discord.gg/GJwKKTcQ7W">Discord</a> or say hi on <a href="https://twitter.com/partykit_io">Twitter</a>.</p> </article> <ul class="tags-container" data-astro-cid-vj4tpspi=""> <li data-astro-cid-blwjyjpt=""> <a href="/tags/starter-kits" data-astro-cid-blwjyjpt=""> <span data-astro-cid-blwjyjpt="">starter-kits</span> </a> </li> <li data-astro-cid-blwjyjpt=""> <a href="/tags/docs" data-astro-cid-blwjyjpt=""> <span data-astro-cid-blwjyjpt="">docs</span> </a> </li> <li data-astro-cid-blwjyjpt=""> <a href="/tags/announcements" data-astro-cid-blwjyjpt=""> <span data-astro-cid-blwjyjpt="">announcements</span> </a> </li> <li data-astro-cid-blwjyjpt=""> <a href="/tags/ai" data-astro-cid-blwjyjpt=""> <span data-astro-cid-blwjyjpt="">ai</span> </a> </li> <li data-astro-cid-blwjyjpt=""> <a href="/tags/collaboration" data-astro-cid-blwjyjpt=""> <span data-astro-cid-blwjyjpt="">collaboration</span> </a> </li> <li data-astro-cid-blwjyjpt=""> <a href="/tags/react" data-astro-cid-blwjyjpt=""> <span data-astro-cid-blwjyjpt="">react</span> </a> </li> </ul> </main> <footer data-astro-cid-sz7xmlte=""> <div id="footer-inner" data-astro-cid-sz7xmlte=""> <h2 data-astro-cid-sz7xmlte=""> 79Turn anything into a <br data-astro-cid-sz7xmlte=""><strong data-astro-cid-sz7xmlte="">real-time collaborative web app</strong> </h2> <div class="copy" data-astro-cid-sz7xmlte=""> <p data-astro-cid-sz7xmlte=""> 80The future of the internet is collaborative, and PartyKit is here to 81 help every developer be part of it. 82</p> <p data-astro-cid-sz7xmlte=""> 83âThe Web doesn't just connect machines, it connects peopleâ <br data-astro-cid-sz7xmlte=""><a href="https://webfoundation.org/about/community/knight-2008-tbl-speech/" data-astro-cid-sz7xmlte="">Tim Berners-Lee</a> </p> </div> <nav class="get-started" data-astro-cid-sz7xmlte=""> <a class="inverted" href="https://docs.partykit.io/quickstart" data-astro-cid-sz7xmlte=""> 84Developer docs 85</a> <a class="inverted" href="https://discord.gg/g5uqHQJc3z" data-astro-cid-sz7xmlte=""> 86Join our Discord 87</a> </nav> <div id="smallprint" data-astro-cid-sz7xmlte=""> <nav class="icons" data-astro-cid-sz7xmlte=""> <a class="icon" href="https://twitter.com/partykit_io" data-astro-cid-sz7xmlte=""> <svg fill="currentColor" height="24" width="24" aria-hidden="true" viewBox="0 0 24 24" data-astro-cid-sz7xmlte=""> <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" data-astro-cid-sz7xmlte=""></path> </svg> <span data-astro-cid-sz7xmlte="">Twitter</span> </a> <a class="icon" href="https://github.com/partykit/partykit/" data-astro-cid-sz7xmlte=""> <svg fill="currentColor" height="24" width="24" aria-hidden="true" viewBox="0 0 24 24" data-astro-cid-sz7xmlte=""> <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158
87-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" data-astro-cid-sz7xmlte=""></path> </svg> <span data-astro-cid-sz7xmlte="">GitHub</span> </a> <a class="icon" href="https://discord.gg/GJwKKTcQ7W" data-astro-cid-sz7xmlte=""> <svg fill="currentColor" height="24" width="24" aria-hidden="true" viewBox="0 0 135 90" data-astro-cid-sz7xmlte=""> <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" data-astro-cid-sz7xmlte=""></path> </svg> <span data-astro-cid-sz7xmlte="">Discord</span> </a> </nav> <p class="legal" data-astro-cid-sz7xmlte=""> 88© 2025 PartyKit. All rights reserved. <a href="https://partykit.io/privacy" data-astro-cid-sz7xmlte="">Privacy policy</a>. 89</p> </div> </div> </footer>
89<script src="https://cursor-party.labs.partykit.dev/cursors.js"></script>
89 </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.