docs: replace codesandbox embed with repl (#122)

* docs: Animations

* docs: add confetti gun

* docs: update basic example on home page

* docs(deps): Add stackblitz sdk to deps

* chore: update yarn.lock

* docs: use vue repl

* docs: remove stackblitz sdk

* docs: basic repl example

* docs: use repl for examples/index.md (basic example)

* docs: pass ext to repl

* docs: add copy plugin

* docs: use import map instead of dynamic imports

* docs: use repl for custom node example

* docs: hide repl errors

* docs: use repl for custom connectionline example

* docs: use repl for edges example

* docs: exclude repl from ssr

* docs: use repl for nested example

* docs: use repl for stress example

* docs: rename customNode to custom-node

* docs: use repl for update-edge example

* docs: use repl for update-node example

* docs: use repl for validation example

* docs: use repl for save-restore example

* docs: scale down minimap in repl examples

* docs: use repl for dnd example

* docs: use repl for empty example

* docs: use repl for hidden example

* docs: use repl for interaction example

* docs: use repl for multi example

* docs: add pinia example with stackblitz

* docs: update basic example

* docs: update examples

* docs: remove transition from intro

* docs: update features

* update: README.md

* docs: scope css

docs/src/examples/save.md

@@ -5,27 +5,21 @@ pageClass: examples
 
 # Save & Restore
 
-::: warning BREAKING CHANGE
-__Changes from 0.3.x to 0.4.x__
-The "built-in" storage feature has been fully removed.
+There is no built-in persistent storage feature, however you can use your own storage implementation.
+
+::: tip State Management Libraries
+  Check the [pinia](/examples/pinia) example to see how to use Vue Flow with a state management library.
 :::
 
-There is no built-in storage feature, however creating a save & restore feature is simple.
+This example demonstrates save & restore functionality using the [`LocalStorage`](https://developer.mozilla.org/de/docs/Web/API/Window/localStorage) of the browser.
 
-This example demonstrates save & restore functionality using the `LocalStorage` of the browser.
-You are of course free to implement your own logic (for example fetching the data from an API that's connected to a database).
+You can extend on this basic idea however you like, i.e. fetch data that you transform into elements which are then passed to Vue Flow or 
+some other business logic you would like to handle.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-save-restore-example-1u7u6t?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Save & Restore Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-save-restore-example-1u7u6t?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Save & Restore Example"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="saveRestore"></Repl>
+    </Suspense>
+  </client-only>
 </div>