---
pageClass: examples

---

# Basic

This is a basic example to help you familiarize with the basic features of Vue Flow. 

On the bottom left you see the viewport-controls and on the bottom right the minimap.
You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types.

<div class="mt-6">
  <iframe src="https://codesandbox.io/embed/vue-flow-basic-example-3hq147?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FBasic.vue&moduleview=1&theme=dark"
     class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
     title="Vue Flow: Basic 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-basic-example-3hq147?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FBasic.vue&moduleview=1&theme=light"
     class="block dark:hidden h-full w-full min-h-[75vh]"
     title="Vue Flow: Basic 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>
</div>
