Installation

This guide contains two different approaches to add Houdini to your project. The first one uses a script that will configure everything for you. The second is more manual, explaining all of the necessary steps.

Init Script

Once you have a SvelteKit Project (either an existing one or by following these instructions, you can run the following command to add Houdini to your project. Just follow questions and the tool will configure everything for you (setup url, get schema, prepare project files, etc).

npx houdini@latest init

This will send a request to your API to download your schema definition. If you need headers to authenticate this request, you can pass them in with the --headers flag (abbreviated -h). For example, npx houdini init -h Authorization="Bearer MyToken".

And that’s it! You should be all set with everything you need to work with Houdini.

If something went wrong, or you need to update your project by hand for some reason, check the next chapter that describes each framework and technology specificities.

Manual Installation

Project Setup

Step 1: Install the Package

The base package houdini is available on npm and should be installed as a dev dependency:

yarn add -D houdini
# or
npm install --save-dev houdini
# or
pnpm install --save-dev houdini

SvelteKit

First, we need to add the dedicated houdini package for svelte & sveltekit:

yarn add -D houdini-svelte
# or
npm install --save-dev houdini-svelte
# or
pnpm install --save-dev houdini-svelte

Svelte

First, we need to add the dedicated houdini package for svelte:

yarn add -D houdini-svelte
# or
npm install --save-dev houdini-svelte
# or
pnpm install --save-dev houdini-svelte