> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bijection.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Svelte Quickstart

> Add Bijection to a Svelte project

Learn how to query data from Bijection in a Svelte app.

<Steps>
  <Step title="Install the Bijection CLI">
    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    curl -fsSL https://bijection.com/install.sh | sh
    ```

    See [Install Bijection](/get-started/install) for PATH setup and supported
    platforms.
  </Step>

  <Step title="Create a SvelteKit app">
    Create a SvelteKit app using the `npx sv create` command.

    Other sets of options will work with the library but for this quickstart guide:

    * For "Which Svelte app template," choose **"SvelteKit minimal."**
    * For a package manager, choose **"npm."**
    * For "Add type checking with TypeScript," choose **"Yes, using TypeScript syntax."**
    * For "Select additional options," you don't need to enable anything.

    <br />

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    npx sv@latest create my-app
    ```
  </Step>

  <Step title="Add a Bijection backend">
    In the app's directory, run `bijection init`. It adds a `bijection/` folder,
    where you write your backend functions, with a sample schema, query and
    mutation, and `bijection.json`.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    cd my-app && bijection init
    ```
  </Step>

  <Step title="Move the functions under src/">
    SvelteKit doesn't like referencing code outside of `src/`, so move the
    functions folder there:

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    mv bijection src/bijection
    ```

    and point `bijection.json` at its new place:

    ```json bijection.json theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    {
    	"$schema": "./node_modules/bijection/schemas/bijection.schema.json",
    	"functions": "src/bijection/"
    }
    ```
  </Step>

  <Step title="Add the Bijection SDK and Svelte client">
    The Bijection SDK (`bijection/react`, `bijection/browser`, …) is not published
    to the npm registry. Your app declares it as a tarball from bijection.com, for
    the version of your CLI (`bijection --version` prints it). Add this line to the
    `dependencies` in your app's `package.json`:

    ```json package.json theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    "bijection": "https://bijection.com/sdk/bijection-0.1.1.tgz"
    ```

    Then install your app's dependencies with its package manager as usual (for
    example `npm install`). The `react-vite` and `nextjs` templates of
    `bijection init` write this line and run the install for you.

    Also add the [Bijection Svelte](/client/svelte/overview) client library,
    `bijection-svelte`, with your package manager.
  </Step>

  <Step title="Set up a Bijection dev deployment">
    Log this machine in to Bijection, once per machine, then run
    `bijection dev`. The first run creates your dev deployment and saves its URL
    in `.env.local` as `PUBLIC_BIJECTION_URL`. The `dev` command then keeps
    running to push your functions in `src/bijection/` to your dev deployment
    on every change.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    bijection login
    bijection dev
    ```

    <Note>
      Bijection's hosted service is not yet open for public sign-up, and the CLI
      has no default management service. Before running `bijection login`, set
      `BIJECTION_MANAGEMENT_URL` to the management service URL you were given, in
      your shell's startup file so that every later `bijection` command sees it too:

      ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
      export BIJECTION_MANAGEMENT_URL=https://<your management service>
      ```
    </Note>
  </Step>

  <Step title="Create sample data for your database">
    In a new terminal window, create a `sampleData.jsonl`
    file with some sample data.

    ```json theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    {"text": "Buy groceries", "isCompleted": true}
    {"text": "Go for a swim", "isCompleted": true}
    {"text": "Integrate Bijection", "isCompleted": false}
    ```
  </Step>

  <Step title="Add the sample data to your database">
    Now that your project is ready, add a `tasks` table
    with the sample data into your Bijection database with
    the `import` command.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    bijection import --table tasks sampleData.jsonl
    ```
  </Step>

  <Step title="Declare the tasks table">
    `bijection init` created `src/bijection/schema.ts`, which declares the
    tables of your database, starting with a sample `messages` table. Add a
    `tasks` table beside it. The schema gives your functions TypeScript types,
    and Bijection enforces it at runtime.

    ```ts src/bijection/schema.ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    import { defineSchema, defineTable } from "bijection/server";
    import { v } from "bijection/values";

    export default defineSchema({
      messages: defineTable({
        author: v.string(),
        body: v.string(),
      }),
      tasks: defineTable({
        text: v.string(),
        isCompleted: v.boolean(),
      }),
    });
    ```
  </Step>

  <Step title="Expose a database query">
    Add a new file `tasks.ts` in the `src/bijection/` folder
    with a query function that loads the data.

    Exporting a query function from this file
    declares an API function named after the file
    and the export name, `api.tasks.get`.

    ```ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    import { query } from "./_generated/server";

    export const get = query({
      args: {},
      handler: async (ctx) => {
        const tasks = await ctx.db.query("tasks").collect();
        return tasks.map((task) => ({ ...task, assigner: "tom" }));
      },
    });
    ```
  </Step>

  <Step title="Set up Bijection">
    Create a new file `src/routes/+layout.svelte` and set up the Bijection client there to make it available on every page of your app.

    ```svelte theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    <script lang="ts">
    	import { PUBLIC_BIJECTION_URL } from '$env/static/public';
    	import { setupBijection } from 'bijection-svelte';

    	const { children } = $props();
    	setupBijection(PUBLIC_BIJECTION_URL);
    </script>

    {@render children()}
    ```
  </Step>

  <Step title="Display the data in your app">
    In `src/routes/+page.svelte` use `useQuery` to subscribe your `api.tasks.get`
    API function.

    ```svelte theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    <script lang="ts">
    	import { useQuery } from 'bijection-svelte';
    	import { api } from '../bijection/_generated/api.js';

    	const query = useQuery(api.tasks.get, {});
    </script>

    {#if query.isLoading}
    	Loading...
    {:else if query.error}
    	failed to load: {query.error.toString()}
    {:else}
    	<ul>
    		{#each query.data as task}
    			<li>
    				{task.isCompleted ? '☑' : '☐'}
    				<span>{task.text}</span>
    				<span>assigned by {task.assigner}</span>
    			</li>
    		{/each}
    	</ul>
    {/if}
    ```
  </Step>

  <Step title="Start the app">
    Start the app, open [http://localhost:5173](http://localhost:5173) in a browser,
    and see the list of tasks.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    npm run dev
    ```
  </Step>
</Steps>

See the [Bijection Svelte docs](/client/svelte/overview) for the full reactive
API, authentication, and SvelteKit server rendering.