Build a website by pasting JSON

Create a website with its sections already written, by pasting a JSON document.

Starting a website means writing a hero, an about section and a footer before there is anything to look at. Importing gets you to the looking-at part: describe the sections and what they say, and the site is built with the starter design already applied.

There are two ways in:

  • On Create website, under Paste JSON, the document builds a new site.
  • In the editor of a site you already have, Import JSON in the top bar replaces every section on the page with the document's. The stylesheet, the head, and anything outside the page region are left alone, so changes you have made to the design survive.

Use Copy the prompt in either import box to get this format plus the instructions an assistant needs, then describe the business or project and paste back what it gives you.

Importing in the editor saves nothing. The new page arrives as unsaved changes, so you can look at the preview first — a published site keeps showing its current page until you save. The title and the address are not changed by an import into an existing site, so slug is ignored there and title only sets the name shown in the navigation.

The document contains no HTML. You describe sections and their words; Magpie writes the markup into the starter design. The result is an ordinary website afterwards — edit it in Visual mode or Code mode like any other.

An imported site is not published. The address it will live at is real and public, so putting it there stays something you do deliberately.

The whole document is checked before anything is saved. If any part of it does not fit the format below, no website is created and the problem is reported with the exact section that caused it.

The document

{
  "title": "Ridgeway Cycles",
  "slug": "ridgeway-cycles",
  "theme": { "background": "#f5f1e8", "text": "#1d1d1b", "accent": "#b74232" },
  "nav": [],
  "sections": []
}
Field Type Notes
title string, required Up to 150 characters. Also the browser tab title and the brand in the navigation.
slug string, optional The public address, 3 to 80 lowercase letters, numbers and hyphens. Worked out from the title if left out. Some addresses are reserved.
theme object, optional background, text and accent, each a hex colour such as #b74232. Any you leave out keep the starter design's.
nav array, optional Up to 20 navigation links, shown across the top. Each is { "label": "...", "href": "#about" }.
sections array, required At least one section, up to 200, in the order they appear down the page.

A href is either an anchor on this page — # followed by lowercase letters, numbers and hyphens — or a full address starting http:// or https://. Nothing else is accepted.

Sections

Every section names a type and supplies the fields that type uses. type defaults to text.

type Use it for Required Also takes
hero The opening band at the top heading eyebrow, lede, button
text A band of paragraphs paragraphs id, eyebrow, heading
list A band of bullet points items id, eyebrow, heading
footer The closing band text —
Field Type Notes
eyebrow string The small line above a heading, up to 60 characters.
heading string Up to 150 characters.
lede string The larger opening line in a hero, up to 500 characters.
button object { "label": "...", "href": "#about" }, on a hero only.
paragraphs array of strings Up to 100, each up to 2,000 characters.
items array of strings Up to 200, each up to 500 characters.
id string An anchor for this section, so a nav link can point at it. Lowercase letters, numbers and hyphens, starting with a letter.
text string The footer line, up to 500 characters.

Give a section an id whenever a nav link or a hero button points at it.

A complete example

{
  "title": "Ridgeway Cycles",
  "slug": "ridgeway-cycles",
  "theme": { "background": "#f5f1e8", "text": "#1d1d1b", "accent": "#b74232" },
  "nav": [
    { "label": "What we do", "href": "#services" },
    { "label": "Visit", "href": "#visit" }
  ],
  "sections": [
    {
      "type": "hero",
      "eyebrow": "Since 1994",
      "heading": "Ridgeway Cycles",
      "lede": "Repairs, wheel building and second-hand bikes in Hebden Bridge.",
      "button": { "label": "What we do", "href": "#services" }
    },
    {
      "type": "list",
      "id": "services",
      "eyebrow": "Services",
      "heading": "What we do",
      "items": ["Full service, back within 48 hours", "Hand-built wheels", "Bike fitting", "Second-hand bikes, checked and guaranteed"]
    },
    {
      "type": "text",
      "id": "visit",
      "eyebrow": "Visit",
      "heading": "Find us",
      "paragraphs": ["12 Market Street, Hebden Bridge.", "Open Tuesday to Saturday, 9am to 5.30pm. Closed Mondays."]
    },
    { "type": "footer", "text": "Ridgeway Cycles, Hebden Bridge" }
  ]
}

If an import is rejected for a reason you can't work out, Contact support.

Updated September 13, 2026

Related articles