Selection:

{}

Nodes:

[
  {
    "id": "hero_1",
    "type": "hero",
    "layout": 1,
    "title": {
      "text": "Svedit",
      "annotations": []
    },
    "description": {
      "text": "A tiny library for building rich content editors with Svelte 5.",
      "annotations": []
    },
    "image": ""
  },
  {
    "id": "heading_1",
    "type": "text",
    "layout": 2,
    "content": {
      "text": "Text and structured content in symbiosis",
      "annotations": []
    }
  },
  {
    "id": "paragraph_1",
    "type": "text",
    "layout": 1,
    "content": {
      "text": "Unlike most rich text editors, Svedit isn't restricted to a linear character-based model for addressing content and cursor positions. For that reason we can combine text-ish content like a paragraph or heading with structured, form-like content.",
      "annotations": []
    }
  },
  {
    "id": "story_1",
    "type": "story",
    "layout": 1,
    "image": "/images/editable.svg",
    "title": {
      "text": "Visual in‑place editing",
      "annotations": []
    },
    "description": {
      "text": "Model your content in JSON, render it with Svelte components, and edit content directly in the layout. You only have to follow a couple of rules to make this work.",
      "annotations": []
    },
    "buttons": []
  },
  {
    "id": "link_1",
    "type": "link",
    "href": "https://editable.website"
  },
  {
    "id": "story_2",
    "type": "story",
    "layout": 2,
    "image": "/images/lightweight.svg",
    "title": {
      "text": "Minimal viable editor",
      "annotations": []
    },
    "description": {
      "text": "The reference implementation uses only about 2000 lines of code. That means you'll be able to serve editable web pages, removing the need for a separate Content Management System.",
      "annotations": [
        {
          "start_offset": 100,
          "end_offset": 118,
          "node_id": "link_1"
        }
      ]
    },
    "buttons": []
  },
  {
    "id": "image_grid_item_1",
    "type": "image_grid_item",
    "image": "/images/svelte-framework.svg",
    "title": {
      "text": "Svelte-native editing",
      "annotations": []
    },
    "description": {
      "text": "No mingling with 3rd-party rendering API's.",
      "annotations": []
    }
  },
  {
    "id": "image_grid_item_2",
    "type": "image_grid_item",
    "image": "/images/annotations.svg",
    "title": {
      "text": "Annotations are nodes, not marks",
      "annotations": []
    },
    "description": {
      "text": "Addressable by path, schema‑defined, copy&paste-safe.",
      "annotations": []
    }
  },
  {
    "id": "image_grid_item_3",
    "type": "image_grid_item",
    "image": "/images/graphmodel.svg",
    "title": {
      "text": "Graph‑first content with nested nodes",
      "annotations": []
    },
    "description": {
      "text": "From simple paragraphs to complex nodes with nested arrays and multiple properties.",
      "annotations": []
    }
  },
  {
    "id": "image_grid_item_4",
    "type": "image_grid_item",
    "image": "/images/dom-synced.svg",
    "title": {
      "text": "DOM ↔ model selections match",
      "annotations": []
    },
    "description": {
      "text": "Avoids flaky mapping layers found in other editors.",
      "annotations": []
    }
  },
  {
    "id": "image_grid_item_5",
    "type": "image_grid_item",
    "image": "/images/cjk.svg",
    "title": {
      "text": "Unicode‑safe, composition‑safe input",
      "annotations": []
    },
    "description": {
      "text": "Works correctly with emoji, diacritics, and CJK.",
      "annotations": []
    }
  },
  {
    "id": "image_grid_item_6",
    "type": "image_grid_item",
    "image": "/images/timetravel.svg",
    "title": {
      "text": "Transactional editing with time travel",
      "annotations": []
    },
    "description": {
      "text": "Every change is safe and undoable.",
      "annotations": []
    }
  },
  {
    "id": "image_grid_1",
    "type": "image_grid",
    "layout": 1,
    "image_grid_items": [
      "image_grid_item_1",
      "image_grid_item_2",
      "image_grid_item_3",
      "image_grid_item_4",
      "image_grid_item_5",
      "image_grid_item_6"
    ]
  },
  {
    "id": "story_3",
    "type": "story",
    "layout": 1,
    "image": "/images/nested-blocks-illustration.svg",
    "title": {
      "text": "Nested nodes",
      "annotations": []
    },
    "description": {
      "text": "A node can embed a node_array of other nodes. For instance the list node at the bottom of the page has a node_array of list items.",
      "annotations": []
    },
    "buttons": []
  },
  {
    "id": "story_4",
    "type": "story",
    "layout": 2,
    "image": "/images/node-cursors.svg",
    "title": {
      "text": "Node cursors",
      "annotations": []
    },
    "description": {
      "text": "They work just like text cursors, but instead of a character position in a string they address a node position in a node_array.\n\nTry it by selecting one of the gaps between the nodes. Then press ↵ to insert a new node or ⌫ to delete the node before the cursor.",
      "annotations": []
    },
    "buttons": []
  },
  {
    "id": "link_2",
    "type": "link",
    "href": "https://svelte.dev"
  },
  {
    "id": "emphasis_1",
    "type": "emphasis"
  },
  {
    "id": "story_5",
    "type": "story",
    "layout": 1,
    "image": "/images/svelte-logo.svg",
    "title": {
      "text": "Made for Svelte 5",
      "annotations": []
    },
    "description": {
      "text": "Integrate with your Svelte application. Use it as a template and copy and paste Svedit.svelte to build your custom rich content editor.",
      "annotations": [
        {
          "start_offset": 20,
          "end_offset": 26,
          "node_id": "link_2"
        },
        {
          "start_offset": 80,
          "end_offset": 93,
          "node_id": "emphasis_1"
        }
      ]
    },
    "buttons": []
  },
  {
    "id": "button_1",
    "type": "button",
    "label": {
      "text": "Get started",
      "annotations": []
    },
    "href": "https://github.com/michael/svedit"
  },
  {
    "id": "story_6",
    "type": "story",
    "layout": 2,
    "image": "/images/extendable.svg",
    "title": {
      "text": "Alpha version",
      "annotations": []
    },
    "description": {
      "text": "Expect bugs. Expect missing features. Expect the need for more work on your part to make this work for your use case.\n\nFind below a list of known issues we'll be working to get fixed next:",
      "annotations": []
    },
    "buttons": [
      "button_1"
    ]
  },
  {
    "id": "list_item_1",
    "type": "list_item",
    "content": {
      "text": "It's a bit hard to select whole lists or image grids with the mouse still. We're looking to improve this. However by pressing the ESC key (or CMD+A) several times you can reach parent nodes easily.",
      "annotations": []
    }
  },
  {
    "id": "list_item_2",
    "type": "list_item",
    "content": {
      "text": "Copy and pasting from and to external sources is not yet supported, but soon will be.",
      "annotations": []
    }
  },
  {
    "id": "list_item_3",
    "type": "list_item",
    "content": {
      "text": "Works best in Chrome, as Svedit uses CSS Anchor Positioning for overlays.",
      "annotations": []
    }
  },
  {
    "id": "list_item_4",
    "type": "list_item",
    "content": {
      "text": "Mobile support ist still experimental. As of 0.3.0 Svedit works on latest iOS and Android, but the UX isn't optimized yet.",
      "annotations": []
    }
  },
  {
    "id": "list_1",
    "type": "list",
    "list_items": [
      "list_item_1",
      "list_item_2",
      "list_item_3",
      "list_item_4"
    ],
    "layout": 3
  },
  {
    "id": "link_3",
    "type": "link",
    "href": "https://github.com/michael/svedit/"
  },
  {
    "id": "link_4",
    "type": "link",
    "href": "https://michaelaufreiter.com"
  },
  {
    "id": "link_5",
    "type": "link",
    "href": "https://mutter.co"
  },
  {
    "id": "story_7",
    "type": "story",
    "layout": 1,
    "image": "/images/github.svg",
    "title": {
      "text": "Star us on GitHub",
      "annotations": []
    },
    "description": {
      "text": "Please star Svedit on GitHub or watch the repo to be notified about updates. Svedit is made by Michael Aufreiter and Johannes Mutter and is licensed under the MIT License.",
      "annotations": [
        {
          "start_offset": 0,
          "end_offset": 28,
          "node_id": "link_3"
        },
        {
          "start_offset": 95,
          "end_offset": 112,
          "node_id": "link_4"
        },
        {
          "start_offset": 117,
          "end_offset": 132,
          "node_id": "link_5"
        }
      ]
    },
    "buttons": []
  },
  {
    "id": "page_1",
    "type": "page",
    "body": [
      "hero_1",
      "heading_1",
      "paragraph_1",
      "story_1",
      "story_2",
      "image_grid_1",
      "story_3",
      "story_4",
      "story_5",
      "story_6",
      "list_1",
      "story_7"
    ],
    "hero": "hero_1",
    "keywords": [
      "svelte",
      "editor",
      "rich content"
    ],
    "daily_visitors": [
      10,
      20,
      30,
      100
    ],
    "created_at": "2025-05-30T10:39:59.987Z"
  }
]