Quickstart

Choose the right route for the design

This is the whole story, and it is the same one the app, /for-utvecklare, the agent skills and the MCP tools tell:

Building in Next.js? Connect the app with the SDK. Your own code keeps drawing the page, and only the fields you expose become editable. Already have a website? Give us the zip or address. Snabbsite tries an editable visual capture and falls back to a structured rebuild when needed.

A site package, which is what the rest of this page builds, is neither of those. It is a redesign on Snabbsite blocks, and you pick it only when you want a new design.

The five steps, for you

1. Pick the path. You write the website in Next.js and keep deploying it: connect the app with the SDK. The website already exists as an address or a zip: use the visual capture.
2. Connect it. SDK: run npx @snabbsajt/cli@latest init --agency in your repo. Copy: sign in, open "Flytta din hemsida" ("Move your website"), and paste the address or drop the zip.
3. Say what the owner may change. SDK: wrap each section in defineBlock, one field per thing an owner would ring you about. Capture: text, image, and link slots are editable, but the layout inside a captured section is fixed.
4. Hand it over. SDK: npx @snabbsajt/cli@latest push . --site <id>. Copy: press the one button on the preview screen. Both make an unpublished draft.
5. Compare, then publish. Open the draft beside the original on a computer and on a phone, fix what is wrong, and publish when it matches.

The same five steps, for an agent

1. Ask exactly one question: "Do you write this website in Next.js and keep deploying it yourself?" Yes goes to the SDK lane, no goes to the copy lane. Build no package on either answer.
2. SDK lane: npx @snabbsajt/cli@latest skills install --agent auto, then follow the make-site-editable skill. Copy lane: build nothing, run nothing, hand over the click path and stop.
3. SDK lane: defineBlock per section, named for what the client sees. Copy lane: nothing to mark.
4. SDK lane: push with --dry-run first and show the merge report. Copy lane: the human presses the button.
5. Report the route honestly. A connected app keeps its design because the developer's own code still renders it. That is not an import. A visual capture is best effort and has no percentage guarantee. It can recreate a small allowlist of fades, reveals, navigation behavior, and smooth scrolling with Snabbsite code. Source JavaScript never enters the editable site.

Three worked examples of the SDK lane are being built under backlog P0-3075. Until that lands there is no examples/ directory, so nothing here reads from one.

Install

Both packages are published on npm:

npm install -g @snabbsajt/cli

Prefixing every command with npx @snabbsajt/cli@latest works too and needs no global install. Two things to know before you pin a version: the newest import fixes reach you only when a release is cut, and the make-site-editable skill declares a minimum CLI version that no published build meets yet. Use the newest published CLI and expect the agency lane to run slightly ahead of it.

Create a package

npx site-kit init ./my-site --template nextjs

Use --template html for a static HTML source. Both produce the same structured Snabbsite format.

The generated directory contains:

my-site/
  site.json
  assets/
  fonts/
  README.md

Replace the starter business facts, page list, sections, and copy with real content from the source site. Do not invent facts or testimonials.

Validate

npx site-kit validate ./my-site

Errors block packing. Warnings describe safe importer coercions or suspicious content that deserves review.

Pack

npx site-kit pack ./my-site -o my-site.zip

The zip contains site.json, manifest.json, and every declared image/font. The manifest records a SHA-256 checksum for each blob.

Import

Send the site owner to /dashboard/import ("Läs in ett hemsidepaket" / "Load a website package") and have them drop the zip on it. That page works on a brand-new account with no sites yet, so it is the one link to hand a client.

The same picker also lives in Settings › Importera (Import), under "Läs in en kopia eller ett paket" → Välj en fil från din dator.

Either way the result is a new draft website. Nothing is published, and no existing site is touched. Review every page on desktop and mobile before publishing.

Update an already-imported site

Set a stable externalKey on every page and section from the start. Later you can pack the package again and merge it into the existing site instead of creating a new one: matched sections update, new keys insert, sections the owner edited in the app are skipped as conflicts, and nothing is deleted. You pack the whole package either way, and the merge works out what changed from the keys. See the import report for the merge outcomes.

This works in the browser and over MCP. On /dashboard/import the owner chooses Update a website I already have and confirms a preview of the merge; the import_site MCP tool does the same headlessly with mergeIntoWebsiteId and needs only the content:write scope.

No API key is required for any Site Kit command.

The recommended one-line agent setup:

npx @snabbsajt/cli@latest skills install --agent auto