frankframework · Daan0709 · Feb 16, 2026
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main/frontend/app/components/toast.tsx b/src/main/frontend/app/components/toast.tsx
@@ -15,7 +15,7 @@ const toastBaseCard =
 const defaultStyle = 'items-end justify-end pointer-events-none'
 const toastStyles = {
   ERROR: {
-    container: 'items-center justify-center bg-black/50',
+    container: defaultStyle,
     card: `${toastBaseCard} bg-error`,
     icon: '',
     defaultDuration: 2000,

diff --git a/src/main/frontend/app/root.tsx b/src/main/frontend/app/root.tsx
@@ -5,6 +5,7 @@ import type { Route } from './+types/root'
 import 'allotment/dist/style.css'
 import './app.css'
 import { useTheme } from '~/hooks/use-theme'
+import { Toast } from './components/toast'
 
 export const links: Route.LinksFunction = () => [
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
@@ -54,7 +55,10 @@ export function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
         <Links />
       </head>
       <body>
-        <ThemeProvider>{children}</ThemeProvider>
+        <ThemeProvider>
+          {children}
+          <Toast />
+        </ThemeProvider>
         <ScrollRestoration />
         <Scripts />
       </body>

diff --git a/src/main/frontend/app/routes/app-layout.tsx b/src/main/frontend/app/routes/app-layout.tsx
@@ -5,7 +5,7 @@
 import { useProjectStore, getStoredProjectName } from '~/stores/project-store'
 import { fetchProject } from '~/services/project-service'
 import LoadingSpinner from '~/components/loading-spinner'
 import { Toast } from '~/components/toast'

 export default function AppLayout() {
  const [restoring, setRestoring] = useState(!!getStoredProjectName())
@@ -45,7 +45,6 @@
           <AppContent />
         </main>
       </div>
-      <Toast />
     </FrankDocProvider>
   )
 }
diff --git a/src/main/frontend/app/routes/editor/editor.tsx b/src/main/frontend/app/routes/editor/editor.tsx
@@ -1,6 +1,5 @@
 import Editor, { type Monaco, type OnMount } from '@monaco-editor/react'
 import { useShallow } from 'zustand/react/shallow'
-import { toast, ToastContainer } from 'react-toastify'
 import SidebarHeader from '~/components/sidebars-layout/sidebar-header'
 import SidebarLayout from '~/components/sidebars-layout/sidebar-layout'
 import { SidebarSide } from '~/components/sidebars-layout/sidebar-layout-store'
@@ -14,6 +13,7 @@ import EditorTabs from '~/components/tabs/editor-tabs'
 import type { ElementDetails, Attribute, EnumValue } from '~/types/ff-doc.types'
 import { useFrankDoc } from '~/providers/frankdoc-provider'
 import { fetchConfiguration, saveConfiguration } from '~/services/configuration-service'
+import { showErrorToast, showSuccessToast } from '~/components/toast'
 
 export default function CodeEditor() {
   const theme = useTheme()
@@ -232,9 +232,9 @@ export default function CodeEditor() {
 
     try {
       await saveConfiguration(project.name, activeTabFilePath, updatedContent)
-      toast.success('Succesfully saved content')
+      showSuccessToast('Succesfully saved content')
     } catch (error) {
-      toast.error(`Error saving configuration: ${error instanceof Error ? error.message : error}`)
+      showErrorToast(`Error saving configuration: ${error instanceof Error ? error.message : error}`)
       console.error('Error saving configuration:', error)
     } finally {
       setIsSaving(false)
@@ -268,7 +268,6 @@ export default function CodeEditor() {
                 onMount={handleEditorMount}
                 options={{ automaticLayout: true, quickSuggestions: false }}
               />
-              <ToastContainer position="bottom-right" theme={theme} closeOnClick={true} />
             </div>
           </>
         ) : (

diff --git a/src/main/frontend/app/routes/projectlanding/project-landing.tsx b/src/main/frontend/app/routes/projectlanding/project-landing.tsx
@@ -10,9 +10,7 @@ import NewProjectModal from './new-project-modal'
 import LoadProjectModal from './load-project-modal'
 import { useProjects } from '~/hooks/use-projects'
 import { createProject as createProjectService } from '~/services/project-service'
-import { toast, ToastContainer } from 'react-toastify'
-import { useTheme } from '~/hooks/use-theme'
-import React from 'react'
+import { showErrorToast } from '~/components/toast'
 
 export interface Project {
   name: string
@@ -27,8 +25,6 @@ export default function ProjectLanding() {
   const [search, setSearch] = useState('')
   const [showNewProjectModal, setShowNewProjectModal] = useState(false)
   const [showLoadProjectModal, setShowLoadProjectModal] = useState(false)
-  const [localError, setLocalError] = useState<string | null>(null)
-  const theme = useTheme()
 
   const clearProject = useProjectStore((state) => state.clearProject)
   const location = useLocation()
@@ -39,7 +35,7 @@ export default function ProjectLanding() {
     }
   }, [projectsData])
 
-  const error = localError || (projectsError ? projectsError.message : null)
+  const error = projectsError ? projectsError.message : null
 
   // Reset project when landing on home page
   useEffect(() => {
@@ -52,7 +48,7 @@ export default function ProjectLanding() {
       const newProject = await createProjectService(projectName, rootPath)
       setProjects((previous) => [...previous, newProject])
     } catch (error_) {
-      toast.error(error_ instanceof Error ? error_.message : 'Failed to create project')
+      showErrorToast(error_ instanceof Error ? error_.message : 'Failed to create project')
 
       console.error('Something went wrong loading the project:', error_)
     }
@@ -75,7 +71,6 @@ export default function ProjectLanding() {
 
   return (
     <div className="bg-backdrop flex min-h-screen w-full flex-col items-center pt-20">
-      <ToastContainer position="bottom-right" theme={theme} closeOnClick={true} />
       <div className="relative mb-6 flex w-2/5 flex-row items-center">
         <div className="flex w-1/4 flex-row items-center">
           <FfIcon className="h-auto w-12" />

diff --git a/src/main/frontend/app/routes/studio/canvas/flow.tsx b/src/main/frontend/app/routes/studio/canvas/flow.tsx
@@ -30,10 +30,9 @@ import { exportFlowToXml } from '~/routes/studio/flow-to-xml-parser'
 import useNodeContextStore from '~/stores/node-context-store'
 import CreateNodeModal from '~/components/flow/create-node-modal'
 import { useProjectStore } from '~/stores/project-store'
-import { toast, ToastContainer } from 'react-toastify'
-import { useTheme } from '~/hooks/use-theme'
 import { saveAdapter } from '~/services/adapter-service'
 import { cloneWithRemappedIds } from '~/utils/flow-utils'
+import { showErrorToast, showSuccessToast } from '~/components/toast'
 
 export type FlowNode = FrankNodeType | ExitNode | StickyNote | GroupNode | Node
 
@@ -53,7 +52,6 @@ const selector = (state: FlowState) => ({
 })
 
 function FlowCanvas({ showNodeContextMenu }: Readonly<{ showNodeContextMenu: (b: boolean) => void }>) {
-  const theme = useTheme()
   const [loading, setLoading] = useState(false)
   const { isEditing, setIsEditing, setParentId, setDraggedName } = useNodeContextStore(
     useShallow((s) => ({
@@ -610,10 +608,10 @@ function FlowCanvas({ showNodeContextMenu }: Readonly<{ showNodeContextMenu: (b:
 
     try {
       await saveAdapter(project.name, xmlString, activeTabName, configurationPath)
-      toast.success('Flow saved successfully!')
+      showSuccessToast('Flow saved successfully!')
     } catch (error) {
       console.error('Failed to save XML:', error)
-      toast.error(`Failed to save XML: ${error instanceof Error ? error.message : error}`)
+      showErrorToast(`Failed to save XML: ${error instanceof Error ? error.message : error}`)
     }
   }
 
@@ -661,7 +659,6 @@ function FlowCanvas({ showNodeContextMenu }: Readonly<{ showNodeContextMenu: (b:
           </button>
         </Panel>
       </ReactFlow>
-      <ToastContainer position="bottom-right" theme={theme} closeOnClick={true} />
       <CreateNodeModal
         isOpen={showModal}
         onClose={() => setShowModal(false)}

diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
@@ -22,8 +22,8 @@ import { ChildNodeComponent, type ChildNode } from './child-node'
 import { findChildRecursive } from '~/stores/child-utilities'
 import { canAcceptChildStatic } from './node-utilities'
 import type { ElementDetails } from '@frankframework/ff-doc'
-import { toast } from 'react-toastify'
 import { DeprecatedPopover } from './components/deprecated-popover'
+import { showWarningToast } from '~/components/toast'
 
 export type FrankNodeType = Node<{
   subtype: string
@@ -109,7 +109,7 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
     (handleType: string) => {
       // Prevent adding duplicate handle types
       if (hasHandleOfType(handleType)) {
-        toast.warn(`Handle of type "${handleType}" is already present!`)
+        showWarningToast(`Handle of type "${handleType}" is already present!`)
         console.warn(`Handle of type "${handleType}" is already present!`)
         return
       }
@@ -165,7 +165,7 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
     )
 
     if (existing) {
-      toast.warn(`Handle of type "${newType}" is already present!`)
+      showWarningToast(`Handle of type "${newType}" is already present!`)
       console.warn(`Handle of type "${newType}" is already present!`)
       return
     }

diff --git a/src/main/frontend/app/routes/studio/studio.tsx b/src/main/frontend/app/routes/studio/studio.tsx
@@ -11,12 +11,9 @@ import { SidebarSide } from '~/components/sidebars-layout/sidebar-layout-store'
 import SidebarLayout from '~/components/sidebars-layout/sidebar-layout'
 import useTabStore from '~/stores/tab-store'
 import { useShallow } from 'zustand/react/shallow'
-import { ToastContainer } from 'react-toastify'
-import { useTheme } from '~/hooks/use-theme'
 
 export default function Studio() {
   const [showNodeContext, setShowNodeContext] = useState(false)
-  const theme = useTheme()
   const nodeId = useNodeContextStore((state) => state.nodeId)
 
   const { activeTab, activeTabPath } = useTabStore(
@@ -47,7 +44,6 @@ export default function Studio() {
               Path: {activeTabPath}
             </div>
             <Flow showNodeContextMenu={setShowNodeContext} />
-            <ToastContainer position="bottom-right" theme={theme} closeOnClick={true} />
           </>
         ) : (
           <div className="text-muted-foreground flex h-full flex-col items-center justify-center p-8 text-center">

diff --git a/src/main/frontend/package.json b/src/main/frontend/package.json
@@ -31,7 +31,6 @@
     "react-complex-tree": "^2.6.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.5.2",
-    "react-toastify": "^11.0.5",
     "sax-ts": "^1.2.13",
     "tailwind-merge": "^3.3.0",
     "zustand": "^5.0.3"