Coming from Craft CMS

Kwisple's content model is modelled on Craft CMS 5 on purpose: sections, reusable entry types, a field library, Matrix, global sets, drafts and live preview work the way you know them. What changes is where things live. The model is TypeScript in your repository instead of project config YAML, your templates are React or Astro components instead of Twig, and the hosting, redirects, SEO, image transforms, forms and statistics that you assembled from plugins come with the platform.

This page maps one onto the other. The running example is RANSON.N, a Next.js site rebuilt from a Craft 5 project; its cms.config.ts keeps Craft's field handles so the mapping stays visible.

Concepts

Plugins

The RANSON.N model, side by side

RANSON.N's cms.config.ts starts with: "Content model of the RANSON.N site, mirroring the Craft 5 project (migrations/, config/project). Field handles follow Craft's." What it maps:

// RANSON.N: a Craft structure section and its entry type
const dienst = defineEntryType({
  handle: "dienst",
  name: "Dienst",
  icon: "zap",
  fields: {
    dienstTekst: f.plainText({ label: "Korte beschrijving", multiline: true }),
    dienstIllustratie: f.select({
      label: "Illustratie",
      options: dienstOptions,
      default: "industrieel",
      translation: "none",
    }),
    dienstIntro: f.plainText({ label: "Intro", multiline: true }),
    // …
  },
  tabs: [
    { name: "Kaart", fields: ["dienstTekst", "dienstIllustratie"] },
    { name: "Detailpagina", fields: ["dienstIntro", "dienstStappen", "dienstCijfers"] },
    { name: "Beeld", fields: ["dienstBeeld", "dienstBeeldLabel", "dienstBeeldTekst"] },
  ],
});

defineSection({
  handle: "diensten",
  name: "Diensten",
  type: "structure",
  entryTypes: [dienst],
  uri: "diensten/{slug}",
  maxLevels: 1,
});

A migration approach

1. Create the site and the repository. Start from a starter (npm create kwisple-site@latest), kwisple login, then kwisple link and pick + Nieuwe website under the client. Only custom-code sites can be linked.
2. Translate project config into cms.config.ts. One defineSection per section, one defineEntryType per entry type, one defineGlobalSet per global set. Keep Craft's handles: your templates, your editors' habits and any import script stay recognisable. Put shared fields in cms/fields.ts.
3. Move inline template text into fields. If editors could not change it in Craft because it was hard-coded in Twig, now is the moment. Keep navigation labels and short UI phrases in code if you prefer; RANSON.N did.
4. Run kwisple dev. The development model follows every save; editors see nothing yet. Fix what validation reports (reserved handles such as title, slug, status, author; unknown tab fields; duplicate handles).
5. Port the templates. One view per entry type, switched on entry.type; one component per Matrix block type, switched on block.type (a missing block type is a TypeScript error). Keep your HTML and CSS: RANSON.N kept the Craft site's markup and class names.
6. Push the model. kwisple push; the dashboard now has the sections, and every single gets its entry.
7. Bring the content over. For text content, a site kit is the supported route: write the entries and global values as cms/seed.json and run kwisple seed. A kit carries no assets and no relations between entries; upload images in the dashboard (with alt text) and set relations there. RANSON.N's import was a one-off script on the platform side before the site moved to its own repository.
8. Forms. Declare each form with defineForm and submit from your own route handler with client.submitForm. Notifications go to the business by mail; submissions land in the Formulieren inbox.
9. Redirects. Add old Craft URLs that changed under Doorverwijzingen (redirects), so search engines and old links land on the new pages.
10. Go live. Connect the repository under Hosting & deploys, set the Site-URL and Webhook bij publiceren, add the domain and make it the Hoofdadres (primary address). See Hosting and deploys and Domains and DNS.

What has no counterpart

Habits to unlearn

• Do not reach for a plugin. Check the platform first: redirects, SEO fields, sitemaps, JSON-LD, image optimisation, forms, consent and statistics are there.
• Do not cache by hand. Every SDK read is cached and purged on publish; add your own cache only for your own expensive work.
• Do not expose the token. The SDK runs on the server; forms post to your route handler, which calls client.submitForm.
• Do not hard-code brand colours. Read them from the brand kit (--brand-* variables), see Brand kit and privacy data.

Where to go next

• Schema as code and Fields reference.
• Workflow: dev, push and changes.
• Project structure (Next.js), which ends with how the RANSON.N repository is laid out.