diff --git a/src/types/edge.ts b/src/types/edge.ts
index bd990251..d0f2980f 100644
--- a/src/types/edge.ts
+++ b/src/types/edge.ts
@@ -3,9 +3,13 @@ import { ArrowHeadType, ElementId, Position } from './flow'
 import { EdgeTextProps } from './components'
 import { SourceTargetNode } from './node'
 
+// eslint-disable-next-line no-use-before-define
+export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step']: Component<EdgeProps> }
+export type EdgeTypes = (keyof DefaultEdgeTypes | string)[]
+
 export interface Edge<T = any> {
   id: ElementId
-  type?: string
+  type?: EdgeTypes[number]
   source: ElementId
   target: ElementId
   sourceHandle?: ElementId
@@ -54,12 +58,11 @@ export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
   borderRadius?: number
 }
 
-export type EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeSmoothStepProps, any, any, any, any, any> | string
-export type EdgeTypes = string[]
-
 export interface EdgePositions {
   sourceX: number
   sourceY: number
   targetX: number
   targetY: number
 }
+
+export type EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeProps, any, any, any, any, any> | string
diff --git a/src/types/node.ts b/src/types/node.ts
index 6ef9797a..62e34efc 100644
--- a/src/types/node.ts
+++ b/src/types/node.ts
@@ -1,5 +1,6 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
-import { XYPosition, ElementId, Position } from './flow'
+import { DraggableOptions } from '@braks/revue-draggable'
+import { XYPosition, ElementId, Position, SnapGrid } from './flow'
 import { HandleElement } from './components'
 
 export interface VFInternals {
@@ -13,10 +14,27 @@ export interface VFInternals {
   }
 }
 
+export interface NodeProps<T = any> {
+  id: ElementId
+  type?: string
+  data?: T
+  selected?: boolean
+  connectable?: boolean
+  xPos?: number
+  yPos?: number
+  targetPosition?: Position
+  sourcePosition?: Position
+  dragging?: boolean
+}
+
+export type NodeComponent = Component<NodeProps> | DefineComponent<NodeProps, any, any, any, any> | string
+export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: Component<NodeProps> }
+export type NodeTypes = (keyof DefaultNodeTypes | string)[]
+
 export interface Node<T = any> {
   id: ElementId
   position: XYPosition
-  type?: string
+  type?: NodeTypes[number]
   class?: string
   style?: CSSProperties
   data?: T
@@ -57,19 +75,3 @@ export type NodeDimensionUpdate = {
   nodeElement: HTMLDivElement
   forceUpdate?: boolean
 }
-
-export interface NodeProps<T = any> {
-  id?: ElementId
-  type?: string
-  data?: T
-  selected?: boolean
-  connectable?: boolean
-  xPos?: number
-  yPos?: number
-  targetPosition?: Position
-  sourcePosition?: Position
-  dragging?: boolean
-}
-
-export type NodeComponent = Component<NodeProps> | DefineComponent<NodeProps, any, any, any, any> | string
-export type NodeTypes = string[]
diff --git a/src/utils/store.ts b/src/utils/store.ts
index 7aea7820..6ecbbf7e 100644
--- a/src/utils/store.ts
+++ b/src/utils/store.ts
@@ -1,28 +1,27 @@
-import { Component } from 'vue'
 import { isEdge, isNode, parseEdge, parseNode } from './graph'
 import {
   ConnectionMode,
-  EdgeProps,
   Elements,
   FlowState,
   NextElements,
   NodeExtent,
   GraphNode,
-  NodeProps,
   PanOnScrollMode,
   Node,
   Edge,
+  DefaultNodeTypes,
+  DefaultEdgeTypes,
 } from '~/types'
 import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
 import { createHooks } from '~/composables'
 
-export const defaultNodeTypes: Record<string, Component<NodeProps>> = {
+export const defaultNodeTypes: DefaultNodeTypes = {
   input: InputNode,
   default: DefaultNode,
   output: OutputNode,
 }
 
-export const defaultEdgeTypes: Record<string, Component<EdgeProps>> = {
+export const defaultEdgeTypes: DefaultEdgeTypes = {
   default: BezierEdge,
   straight: StraightEdge,
   step: StepEdge,