---
title: Introduction
---

import { cloudflare, nextjs, remix, astro, bun, node, docker, vite } from "/snippets/integration-icons.mdx"
import { Stackblitz, examples } from "/snippets/stackblitz.mdx"

Glad you're here! This is about **bknd**, a feature-rich backend that is so lightweight it could
run on your toaster (probably).

<Note>
   The documentation is currently a work in progress and not complete. Updates will be made regularily.
</Note>

## Preview
**bknd** is so lightweight that it fully runs inside StackBlitz. Take a look at the preview below:
<Stackblitz {...examples.adminRich} />

<Accordion title="What's going on?" icon="lightbulb">
   The example shown is starting a [node server](/integration/node) using an [in-memory database](/usage/database#sqlite-in-memory). To ensure there are a few entities defined, it is using an [initial structure](/usage/database#initial-structure) using the prototype methods. Furthermore it uses the [seed option](/usage/database#seeding-the-database) to seed some data in the structure created.

   To ensure there are users defined on first boot, it hooks into the `App.Events.AppFirstBoot` event to create them (documentation pending).
</Accordion>

## Quickstart
Enter the following command to spin up an instance:
<CodeGroup>
   ```bash npm
   npx bknd run
   ```

   ```bash bun
   bunx bknd run
   ```
</CodeGroup>

To learn more about the CLI, check out the [Using the CLI](/usage/cli) guide.


## Start with a Framework/Runtime
Start by using the integration guide for these popular frameworks/runtimes. There will be more
in the future, so stay tuned!

<CardGroup cols={2}>
  <Card
    title="Next.js"
    icon={<div className="text-primary-light">{nextjs}</div>}
    href="/integration/nextjs"
  />
  <Card
    title="Remix"
    icon={<div className="text-primary-light">{remix}</div>}
    href="/integration/remix"
  />
   <Card
      title="Astro"
      icon={<div className="text-primary-light">{astro}</div>}
      href="/integration/astro"
   />
   <Card
      title="Node"
      icon={<div className="text-primary-light">{node}</div>}
      href="/integration/node"
   />
   <Card
      title="Cloudflare"
      icon={<div className="text-primary-light">{cloudflare}</div>}
      href="/integration/cloudflare"
   />
   <Card
      title="Bun"
      icon={<div className="text-primary-light">{bun}</div>}
      href="/integration/bun"
   />
   <Card
      title="Vite"
      icon={<div className="text-primary-light">{vite}</div>}
      href="/integration/vite"
   />
   <Card
      title="Docker"
      icon={<div className="text-primary-light">{docker}</div>}
      href="/integration/docker"
   />
</CardGroup>