NoriginMedia · yehia2amer · Jun 18, 2026 · Jul 5, 2026 · Jul 5, 2026 · Jul 5, 2026
@@ -0,0 +1,13 @@
+---
+'@noriginmedia/norigin-spatial-navigation-svelte': minor
+---
+
+Initial release of Svelte 5 spatial navigation components.
+
+Adds `<SpatialRoot>` and `<SpatialNode>` components with full feature parity to the React binding. Key features:
+
+- Renderless `<SpatialNode>` with `use:spatial` action (no wrapper div), a 1:1 port of `useFocusable`
+- Automatic parent context (no manual Provider needed)
+- `initialFocusKey` prop on `<SpatialRoot>` for timing-safe initial focus
+- Full TypeScript types
+- All core features: boundaries, callbacks, `nextFocusResolver`, accessibility labels, RTL, throttle, `focusOnPresetKey`, and the `layoutAdapter` API
@@ -20,3 +20,7 @@ coverage
 
 # Ignore turbo logs
 .turbo
+
+# Svelte kit temp
+.svelte-kit
+
@@ -7,3 +7,5 @@ coverage
 package-lock.json
 CHANGELOG.md
 **/CHANGELOG.md
+*.svelte
+.svelte-kit
@@ -11,9 +11,11 @@ This repo is a [Turborepo](https://turbo.build/) monorepo managed with [npm work
 ```
 apps/
   react-demo/        # Example React app for trying changes end-to-end
+  svelte-demo/       # Example Svelte 5 app for trying changes end-to-end
 packages/
   core/              # @noriginmedia/norigin-spatial-navigation-core
   react/             # @noriginmedia/norigin-spatial-navigation-react
+  svelte/            # @noriginmedia/norigin-spatial-navigation-svelte
   legacy/            # @noriginmedia/norigin-spatial-navigation (legacy, pre-split)
 ```
 

@@ -39,6 +39,26 @@ For more detailed documentation and usage examples, visit our [Developer Portal]
 
 [Example Source](https://github.com/NoriginMedia/Norigin-Spatial-Navigation/blob/master/apps/react-demo/src/App.tsx)
 
+## Packages
+
+| Package                                                                | Description                          |
+| ---------------------------------------------------------------------- | ------------------------------------ |
+| [`@noriginmedia/norigin-spatial-navigation-core`](./packages/core)     | Framework-agnostic navigation engine |
+| [`@noriginmedia/norigin-spatial-navigation-react`](./packages/react)   | React hooks binding                  |
+| [`@noriginmedia/norigin-spatial-navigation-svelte`](./packages/svelte) | Svelte 5 components binding          |
+
+### React
+
+```bash
+npm install @noriginmedia/norigin-spatial-navigation-core @noriginmedia/norigin-spatial-navigation-react
+```
+
+### Svelte 5
+
+```bash
+npm install @noriginmedia/norigin-spatial-navigation-core @noriginmedia/norigin-spatial-navigation-svelte
+```
+
 ## Links
 
 1. Use & benefits of using the Norigin Spatial Navigation library on Smart TVs [here](https://medium.com/p/77ed944d7be7).

@@ -0,0 +1,22 @@
+{
+  "extends": ["../../.eslintrc.json", "plugin:svelte/recommended"],
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "extraFileExtensions": [".svelte"]
+  },
+  "overrides": [
+    {
+      "files": ["*.svelte"],
+      "parser": "svelte-eslint-parser",
+      "parserOptions": {
+        "parser": "@typescript-eslint/parser"
+      }
+    }
+  ],
+  "rules": {
+    "import/no-extraneous-dependencies": "off",
+    "import/prefer-default-export": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off"
+  }
+}
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spatial Navigation Demo — Svelte 5</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,23 @@
+{
+  "name": "@noriginmedia/norigin-spatial-navigation-svelte-demo",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite dev --port 3001",
+    "build": "vite build",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "dependencies": {
+    "@noriginmedia/norigin-spatial-navigation-svelte": "^3.1.0",
+    "@noriginmedia/norigin-spatial-navigation-core": "^3.1.0",
+    "lodash-es": "^4.17.21"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@types/lodash-es": "^4.17.12",
+    "svelte": "^5.56.3",
+    "svelte-check": "^4.6.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.16"
+  }
+}