diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
index 6efa519..754595f 100644
--- a/.github/workflows/push.yml
+++ b/.github/workflows/push.yml
@@ -17,7 +17,7 @@ jobs:
       - name: 🚧 Build
         run: bun run build
       - name: 🧪 Test
-        run: bun test
+        run: bun run test
       - name: 📢 Release
         uses: tobua/release-npm-action@v3
         with:
diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index 06adcd3..0000000
--- a/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-node_modules
-package-lock.json
-bun.lockb
-dist
-tsconfig.json
diff --git a/demo/configuration.ts b/demo/configuration.ts
new file mode 100644
index 0000000..50eaff9
--- /dev/null
+++ b/demo/configuration.ts
@@ -0,0 +1,41 @@
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+
+export const rsbuild = defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './index.tsx',
+    },
+    define: {
+      'process.env.PUBLIC_URL': '"/"',
+    },
+  },
+  html: {
+    title: 'epic-router Demo',
+    favicon: '../logo.png',
+  },
+  output: {
+    assetPrefix: '/',
+  },
+  tools: {
+    rspack: {
+      resolve: {
+        alias: {
+          react: 'preact/compat',
+          'react-dom/test-utils': 'preact/test-utils',
+          'react-dom': 'preact/compat',
+          'react/jsx-runtime': 'preact/jsx-runtime',
+          'react/jsx-dev-runtime': 'preact/jsx-dev-runtime',
+        },
+      },
+    },
+  },
+})
+
+export const gitignore = 'recommended'
+
+export const typescript = {
+  extends: 'web',
+  files: ['index.tsx'],
+}
diff --git a/demo/index.tsx b/demo/index.tsx
index 667b94e..f6156a9 100644
--- a/demo/index.tsx
+++ b/demo/index.tsx
@@ -1,6 +1,7 @@
-import { render } from 'preact'
+import { Page, back, create, forward, go } from 'epic-router'
+import { connect } from 'epic-state/preact'
 import { Exmpl } from 'exmpl'
-import { Router, Page } from 'epic-router'
+import { render } from 'preact'
 
 const Overview = () => <span>Overview</span>
 const About = () => <span>About</span>
@@ -8,7 +9,7 @@ const Article = ({ id }: { id: string }) => <span>Article: {id}</span>
 const Nested = () => <span>Nested</span>
 const Custom404 = () => <span>Page not found!</span>
 
-Router.setPages(
+create(
   {
     overview: Overview,
     about: About,
@@ -17,10 +18,12 @@ Router.setPages(
     404: Custom404,
   },
   'overview',
+  connect,
 )
 
 const Button = ({ text, onClick }) => (
   <button
+    type="button"
     style={{
       border: 'none',
       outline: 'none',
@@ -40,16 +43,16 @@ render(
   <Exmpl title="epic-router Demo" npm="epic-router" github="tobua/epic-router">
     <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
       <div style={{ display: 'flex', flexDirection: 'row', gap: 10 }}>
-        <Button text="← Back" onClick={() => Router.back()} />
-        <Button text="Forward →" onClick={() => Router.forward()} />
+        <Button text="← Back" onClick={() => back()} />
+        <Button text="Forward →" onClick={() => forward()} />
       </div>
       <div style={{ display: 'flex', flexDirection: 'row', gap: 10 }}>
-        <Button text="Overview" onClick={() => Router.go('overview')} />
-        <Button text="About" onClick={() => Router.go('about')} />
-        <Button text="Article 1" onClick={() => Router.go('article', { id: 1 })} />
-        <Button text="Article 2" onClick={() => Router.go('article', { id: 2 })} />
-        <Button text="Article 3" onClick={() => Router.go('article', { id: 3 })} />
-        <Button text="Nested/Overview" onClick={() => Router.go('nested/overview')} />
+        <Button text="Overview" onClick={() => go('overview')} />
+        <Button text="About" onClick={() => go('about')} />
+        <Button text="Article 1" onClick={() => go('article', { id: 1 })} />
+        <Button text="Article 2" onClick={() => go('article', { id: 2 })} />
+        <Button text="Article 3" onClick={() => go('article', { id: 3 })} />
+        <Button text="Nested/Overview" onClick={() => go('nested/overview')} />
       </div>
       <Page />
     </div>
diff --git a/demo/package.json b/demo/package.json
index 11f12c6..8c6aafb 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -1,16 +1,23 @@
 {
-  "papua": {
-    "title": "epic-router Demo",
-    "icon": "../logo.png",
-    "publicPath": "/"
+  "name": "demo",
+  "scripts": {
+    "start": "rsbuild dev --open",
+    "types": "tsc"
   },
   "dependencies": {
-    "epic-router": "^4.1.0",
+    "@rsbuild/core": "^0.6.8",
+    "@rsbuild/plugin-react": "^0.6.8",
+    "epic-state": "^0.6.0",
     "exmpl": "^3.1.0",
-    "papua": "^5.9.7",
-    "preact": "^10.19.5"
+    "preact": "^10.19.5",
+    "typescript": "^5.4.5",
+    "zero-configuration": "^0.13.0"
   },
   "localDependencies": {
     "epic-router": ".."
-  }
+  },
+  "trustedDependencies": [
+    "zero-configuration"
+  ],
+  "type": "module"
 }
diff --git a/demo/rspack.config.js b/demo/rspack.config.js
deleted file mode 100644
index b6eae27..0000000
--- a/demo/rspack.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// Configure preact transformer.
-export default (configuration) => {
-  // NOTE react installed in parent folder will interfere.
-  configuration.resolve.alias = {
-    react: 'preact/compat',
-    'react-dom/test-utils': 'preact/test-utils',
-    'react-dom': 'preact/compat',
-    'react/jsx-runtime': 'preact/jsx-runtime',
-    'react/jsx-dev-runtime': 'preact/jsx-dev-runtime',
-  }
-
-  return configuration
-}
diff --git a/index.tsx b/index.tsx
index 0eece05..af833b2 100644
--- a/index.tsx
+++ b/index.tsx
@@ -1,10 +1,12 @@
 import { state } from 'epic-state'
-import { connect } from 'epic-state/preact'
+import type { connect as preactConnect } from 'epic-state/preact'
 import { createBrowserHistory, createMemoryHistory } from 'history'
 import queryString from 'query-string'
+import type { ComponentPropsWithoutRef, JSX } from 'react'
 import join from 'url-join'
-import type { JSX } from 'react'
-import type { Input, RouterState } from './types'
+import type { PageComponent, RouterState } from './types'
+
+let Router: RouterState = {} as RouterState
 
 const createHistory = () => {
   if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'test') {
@@ -37,14 +39,14 @@ function Code({ children }: { children: string | string[] }) {
   )
 }
 
-function Error(message: JSX.Element) {
+function ErrorPage(message: JSX.Element): PageComponent {
   return () => <div style={{ color: 'red', fontWeight: 'bold' }}>{message}</div>
 }
 
-function pathnameToRoute(Router?: RouterState, location = history.location) {
+function pathnameToRoute(location = history.location) {
   let name = location.pathname
 
-  const publicUrl = removeLeadingSlash(process.env.PUBLIC_URL ?? '')
+  const publicUrl = removeLeadingSlash((typeof process !== 'undefined' && process.env.PUBLIC_URL) || '')
   name = removeLeadingSlash(name) // Cleanup slash.
 
   if (publicUrl) {
@@ -61,7 +63,9 @@ function pathnameToRoute(Router?: RouterState, location = history.location) {
 
 function getSearchParameters(location = history.location) {
   const { search } = location
-  if (!search || search.length === 0) return {}
+  if (!search || search.length === 0) {
+    return {}
+  }
   return queryString.parse(search)
 }
 
@@ -80,110 +84,111 @@ function writePath(path: string) {
   return join('/', path)
 }
 
-export const Router = state<RouterState>({
-  // State
-  initialRoute: undefined,
-  pages: {},
-  route: pathnameToRoute(),
-  parameters: getSearchParameters(),
-  // Actions
-  go(route: string, parameters = {}, historyState: object = {}, replace = false) {
-    Router.route = route
-    Router.parameters = parameters
-
-    const searchParameters = Object.keys(parameters).length
-      ? `?${queryString.stringify(parameters)}`
-      : ''
-
-    if (route === Router.initialRoute && !Object.keys(parameters).length) {
-      // eslint-disable-next-line no-param-reassign
-      route = ''
-    }
-
-    const historyAction = replace ? history.replace : history.push
-    // WORKAROUND https://github.com/ReactTraining/history/issues/814
-    historyAction(
-      {
-        hash: '',
-        search: searchParameters,
-        pathname: writePath(route),
-      },
-      historyState,
-    )
-  },
-  back() {
-    history.back()
-  },
-  forward() {
-    history.forward()
-  },
-  initial() {
-    Router.route = Router.initialRoute
-    history.push(writePath(Router.route))
-  },
-  setPages(pages: { [key: string]: Input }, initialRoute: string) {
-    Router.pages = pages
-    Router.initialRoute = initialRoute
-
-    if (!Router.route) {
-      Router.route = initialRoute
-    }
-  },
-  reset() {
-    Router.pages = {}
-    Router.initialRoute = undefined
-    Router.route = undefined
-  },
-  addPage(route: string, component: Input) {
-    Router.pages[route] = component
-  },
-  // Retrieve current state from history, was private.
-  listener({ location }) {
-    Router.parameters = Object.assign(getSearchParameters(location), location.state ?? {})
-    Router.route = pathnameToRoute(Router, location)
-  },
-  // Derivations
-  get Page() {
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      (!Router.pages || Router.initialRoute === undefined)
-    ) {
-      return Error(
-        <span>
-          No <Code>pages</Code> or <Code>initialRoute</Code> configured, configure with{' '}
-          <Code>Router.setPages(pages, initialRoute)</Code>.
-        </span>,
-      )
-    }
-
-    if (Router.route === '') {
-      return Router.pages[Router.initialRoute]
-    }
-
-    if (!Router.pages[Router.route]) {
-      const userErrorPage = Router.pages['404']
-      if (typeof userErrorPage !== 'undefined') return Router.pages['404']
-      return Error(
-        process.env.NODE_ENV === 'production' ? (
-          <span>Page not found!</span>
-        ) : (
+export function create(pages: { [key: string]: PageComponent }, initialRoute?: string, connect?: typeof preactConnect) {
+  if (!pages || Object.keys(pages).length === 0) {
+    // biome-ignore lint/suspicious/noConsoleLog: Validation error for user.
+    console.log('Invalid pages argument provided to create().')
+    return {}
+  }
+
+  Router = state<RouterState>({
+    // State
+    initialRoute: initialRoute ?? Object.keys(pages)[0] ?? '', // Use the first page as the initial route if not provided.
+    pages,
+    route: pathnameToRoute() ?? initialRoute ?? '',
+    parameters: getSearchParameters(),
+    // Plugins, connect state to React.
+    plugin: connect,
+    // Retrieve current state from history, was private.
+    listener({ location }) {
+      Router.parameters = Object.assign(getSearchParameters(location), location.state ?? {})
+      Router.route = pathnameToRoute(location) ?? ''
+    },
+    // Derivations
+    get Page() {
+      if (process.env.NODE_ENV !== 'production' && (!Router.pages || Router.initialRoute === undefined)) {
+        return ErrorPage(
           <span>
-            Route <Code>/{Router.route}</Code> has no associated page!
-          </span>
-        ),
-      )
-    }
+            No <Code>pages</Code> or <Code>initialRoute</Code> configured, configure with <Code>Router.setPages(pages, initialRoute)</Code>.
+          </span>,
+        )
+      }
+
+      if (Router.route === '') {
+        return Router.pages[Router.initialRoute] as PageComponent
+      }
+
+      if (!Router.pages[Router.route]) {
+        const userErrorPage = Router.pages['404']
+        if (typeof userErrorPage !== 'undefined') {
+          return Router.pages['404'] as PageComponent
+        }
+        return ErrorPage(
+          process.env.NODE_ENV === 'production' ? (
+            <span>Page not found!</span>
+          ) : (
+            <span>
+              Route <Code>/{Router.route}</Code> has no associated page!
+            </span>
+          ),
+        )
+      }
+
+      return Router.pages[Router.route] as PageComponent
+    },
+  })
+
+  const removeListener = history.listen(Router.listener)
+
+  return { Router, removeListener }
+}
+
+export function go(route: string, parameters = {}, historyState: object = {}, replace = false) {
+  Router.route = route
+  Router.parameters = parameters
+
+  const searchParameters = Object.keys(parameters).length ? `?${queryString.stringify(parameters)}` : ''
+
+  if (route === Router.initialRoute && !Object.keys(parameters).length) {
+    // biome-ignore lint/style/noParameterAssign: Existing logic, might be improved.
+    route = ''
+  }
 
-    return Router.pages[Router.route]
-  },
-  // Plugins, connect state to React.
-  plugin: connect,
-})
+  const historyAction = replace ? history.replace : history.push
+  // WORKAROUND https://github.com/ReactTraining/history/issues/814
+  historyAction(
+    {
+      hash: '',
+      search: searchParameters,
+      pathname: writePath(route),
+    },
+    historyState,
+  )
+}
+
+export function back() {
+  history.back()
+}
+
+export function forward() {
+  history.forward()
+}
 
-const removeListener = history.listen(Router.listener)
+export function initial() {
+  Router.route = Router.initialRoute
+  history.push(writePath(Router.route))
+}
 
-export const unlisten = removeListener
+export function reset() {
+  Router.pages = {}
+  Router.initialRoute = ''
+  Router.route = ''
+}
+
+export function addPage(route: string, component: PageComponent) {
+  Router.pages[route] = component
+}
 
-export function Page(props: any): JSX.Element {
+export function Page(props: ComponentPropsWithoutRef<'div'>): JSX.Element {
   return <Router.Page {...props} {...Router.parameters} />
 }
diff --git a/package.json b/package.json
index ab9f487..0df97d8 100644
--- a/package.json
+++ b/package.json
@@ -7,52 +7,55 @@
   "license": "MIT",
   "author": "Matthias Giger",
   "scripts": {
-    "build": "padua build"
-  },
-  "padua": {
-    "tsconfig": {
-      "compilerOptions": {
-        "jsxImportSource": "preact"
-      }
-    }
+    "check": "biome check --write .",
+    "types": "tsc",
+    "test": "bun test --preload ./test/copy-source.ts"
   },
   "dependencies": {
+    "epic-state": "^0.6.0",
     "history": "^5.3.0",
-    "query-string": "^8.2.0",
+    "query-string": "^9.0.0",
     "url-join": "^5.0.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^13.3.8",
-    "@testing-library/preact": "^3.2.3",
-    "@types/bun": "^1.0.6",
-    "@types/history": "^4.7.11",
-    "@types/react": "^18.2.56",
-    "padua": "^3.0.0",
-    "preact": "^10.19.5"
+    "@biomejs/biome": "^1.8.3",
+    "@happy-dom/global-registrator": "^14.12.3",
+    "@testing-library/preact": "^3.2.4",
+    "@types/bun": "^1.1.6",
+    "@types/history": "^5.0.0",
+    "@types/react": "^18.3.3",
+    "epic-jsx": "^0.7.2",
+    "preact": "^10.22.1",
+    "react": "^18.3.1",
+    "zero-configuration": "^0.13.0"
   },
   "peerDependencies": {
+    "epic-jsx": ">= 0.7",
     "epic-state": ">= 0.3",
     "preact": ">= 10"
   },
   "peerDependenciesMeta": {
+    "epic-jsx": {
+      "optional": true
+    },
     "preact": {
       "optional": true
     }
   },
+  "trustedDependencies": [
+    "zero-configuration"
+  ],
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/index.js",
+  "main": "./index.tsx",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "default": "./index.tsx"
     }
   },
-  "source": "./index.tsx",
-  "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "index.tsx"
+    "*.ts",
+    "*.tsx"
   ],
   "keywords": [
     "state",
@@ -60,19 +63,58 @@
     "router",
     "web"
   ],
-  "prettier": "padua/configuration/.prettierrc.json",
-  "eslintConfig": {
-    "extends": "./node_modules/padua/configuration/eslint.cjs",
-    "rules": {
-      "@typescript-eslint/lines-between-class-members": 0,
-      "react/function-component-definition": 0,
-      "react/react-in-jsx-scope": 0
-    }
-  },
   "publishConfig": {
     "provenance": true
   },
-  "engines": {
-    "node": ">= 18"
+  "configuration": {
+    "gitignore": "bundle",
+    "vscode": "biome",
+    "biome": {
+      "extends": "recommended",
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noNodejsModules": "off"
+          }
+        }
+      },
+      "files": {
+        "ignore": [
+          "demo"
+        ]
+      }
+    },
+    "typescript": [
+      {
+        "extends": "plugin",
+        "compilerOptions": {
+          "jsx": "react-jsx"
+        },
+        "files": [
+          "index.tsx"
+        ]
+      },
+      {
+        "extends": "web",
+        "folder": "test/epic",
+        "compilerOptions": {
+          "paths": {
+            "react": ["./../../node_modules/epic-jsx"],
+            "react/jsx-dev-runtime": ["./../../node_modules/epic-jsx"]
+          }
+        }
+      },
+      {
+        "extends": "web",
+        "folder": "test/preact",
+        "compilerOptions": {
+          "jsxImportSource": "preact",
+          "paths": {
+            "react": ["./../../node_modules/preact/dist/preact.mjs"],
+            "react/jsx-dev-runtime": ["./../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs"]
+          }
+        }
+      }
+    ]
   }
 }
diff --git a/test/copy-source.ts b/test/copy-source.ts
new file mode 100644
index 0000000..3597cd4
--- /dev/null
+++ b/test/copy-source.ts
@@ -0,0 +1,20 @@
+import { execSync } from 'node:child_process'
+import { existsSync, mkdirSync, rmSync } from 'node:fs'
+import { join } from 'node:path'
+
+function copySource(folder: string) {
+  const rootDirectory = join(process.cwd())
+  const destinationDirectory = join(process.cwd(), 'test', folder, 'source')
+
+  if (existsSync(destinationDirectory)) {
+    rmSync(destinationDirectory, { recursive: true })
+  }
+
+  mkdirSync(destinationDirectory)
+
+  // Copy root files to make sure tsconfig overrides also apply.
+  execSync(`find ${rootDirectory} -maxdepth 1 -type f \\( -name "*.ts" -o -name "*.tsx" \\) -exec cp {} ${destinationDirectory} \\;`)
+}
+
+copySource('epic')
+copySource('preact')
diff --git a/test/epic/router.test.tsx b/test/epic/router.test.tsx
new file mode 100644
index 0000000..7833560
--- /dev/null
+++ b/test/epic/router.test.tsx
@@ -0,0 +1,165 @@
+/* eslint-disable react/react-in-jsx-scope */
+import '../setup-dom'
+import { expect, mock, test } from 'bun:test'
+import { render, serializeElement } from 'epic-jsx/test'
+import { state as createState, plugin } from 'epic-state'
+import { connect } from 'epic-state/connect'
+// Import from local folder to avoid using entry tsconfig (different JSX configrations required).
+import { Page, back, create, go, history, reset } from './source/index'
+
+// Clean up rendered content from other suite.
+document.body.innerHTML = ''
+
+plugin(connect)
+
+const Overview = () => <p>Overview</p>
+const { serialized: OverviewMarkup } = render(<Overview />)
+function About() {
+  return <p>About</p>
+}
+const { serialized: AboutMarkup } = render(<About />)
+const Article = ({ id }: { id: string }) => <p>Article: {id}</p>
+const Custom404 = () => <p>Page not found</p>
+const { serialized: Custom404Markup } = render(<Custom404 />)
+const { serialized: Article5Markup } = render(<Article id="5" />)
+const FragmentPage = (name: string, count: number) => (
+  <>
+    <p>{name}</p>
+    <span>{count}</span>
+  </>
+)
+
+const { Router } = create(
+  {
+    overview: Overview,
+    about: About,
+    article: Article,
+    static: <p>Hello</p>,
+    fragment: FragmentPage,
+    404: Custom404,
+  },
+  'overview',
+)
+
+const wait = (time = 1) =>
+  new Promise((done) => {
+    setTimeout(done, time * 10)
+  })
+
+const page = render(<Page />)
+
+test('State is connected.', async () => {
+  const root = createState({
+    count: 1,
+    // Derivation
+    get currentCountTripled() {
+      return root.count * 3
+    },
+    // Action
+    double: () => {
+      root.count *= 2
+    },
+  })
+
+  function App() {
+    return (
+      <div>
+        Hey {root.count} {root.currentCountTripled}
+      </div>
+    )
+  }
+
+  const markup = render(<App />)
+  expect(markup.serialized).toEqual('<body><div>Hey 1 3</div></body>')
+  expect(root.currentCountTripled).toBe(3)
+  root.double()
+  // TODO issue with derivations in epic-state as they do not update.
+  expect(serializeElement()).toEqual('<body><div>Hey 2 3</div></body>')
+  expect(root.currentCountTripled).toBe(6)
+  expect(serializeElement()).toEqual('<body><div>Hey 2 3</div></body>')
+})
+
+test('Intial page is rendered without interaction.', () => {
+  expect(page.serialized).toEqual(OverviewMarkup)
+  expect(Router.route).toBe('overview')
+  expect(history.location.pathname).toEqual('/')
+})
+
+test.skip('go: Switches to page.', async () => {
+  go('about')
+  await wait()
+  expect(serializeElement()).toEqual(AboutMarkup)
+  expect(Router.route).toBe('about')
+  expect(history.location.pathname).toEqual('/about')
+})
+
+test.skip('go: Can rerender already rendered page.', async () => {
+  // NOTE this used to require a workaround as double rendering lead to an error.
+  go('about')
+  await wait()
+  expect(serializeElement()).toEqual(AboutMarkup)
+  expect(Router.route).toBe('about')
+  expect(history.location.pathname).toEqual('/about')
+})
+
+test.skip('back: Goes back to the initial page.', async () => {
+  back()
+  back()
+  await wait()
+  expect(serializeElement()).toEqual(OverviewMarkup)
+  expect(history.location.pathname).toEqual('/')
+})
+
+test.skip('go: Switches to page with parameters.', async () => {
+  go('article', { id: 5 })
+  await wait()
+  expect(serializeElement()).toEqual(Article5Markup)
+  expect(history.location.pathname).toEqual('/article')
+  expect(history.location.search).toEqual('?id=5')
+})
+
+test.skip('go: Initial route is found on /.', async () => {
+  expect(Router.initialRoute).toEqual('overview')
+  go(Router.initialRoute)
+  await wait()
+  expect(serializeElement()).toEqual(OverviewMarkup)
+  expect(Router.route).toEqual('overview')
+  expect(history.location.pathname).toEqual('/')
+  expect(history.location.search).toEqual('')
+})
+
+test.skip('go: Missing route shows 404 fallback in page.', async () => {
+  go('missing')
+  await wait()
+  expect(serializeElement()).toEqual(Custom404Markup)
+  expect(history.location.pathname).toEqual('/missing')
+})
+
+test.skip('Props handed to Page can be accessed from pages.', async () => {
+  reset()
+
+  const Overview2 = () => <p>Overview</p>
+  const ErrorPage = ({ onError }: { onError: (message: string) => string }) => <p>sending an error {onError('whatt?')}</p>
+
+  const { serialized: Overview2Markup } = render(<Overview2 />)
+  const { serialized: ErrorMarkup } = render(<ErrorPage onError={(value = '') => value} />)
+
+  create(
+    {
+      overview: Overview,
+      error: Error,
+    },
+    'overview',
+  )
+
+  go('overview')
+
+  const errorMock = mock(() => 'whatt?')
+  expect(errorMock.mock.calls.length).toEqual(0)
+  render(<Page onError={errorMock} />)
+  expect(serializeElement()).toEqual(Overview2Markup)
+  go('error')
+  await wait()
+  expect(errorMock.mock.calls.length).toEqual(1)
+  expect(serializeElement()).toEqual(ErrorMarkup)
+})
diff --git a/test/router.test.tsx b/test/preact/router.test.tsx
similarity index 77%
rename from test/router.test.tsx
rename to test/preact/router.test.tsx
index 4510c53..6a6598c 100644
--- a/test/router.test.tsx
+++ b/test/preact/router.test.tsx
@@ -1,10 +1,15 @@
 /* eslint-disable react/react-in-jsx-scope */
-import './setup-dom'
-// eslint-disable-next-line import/no-extraneous-dependencies
-import React from 'react'
-import { test, expect, mock } from 'bun:test'
+import '../setup-dom'
+import { expect, mock, test } from 'bun:test'
 import { render } from '@testing-library/preact'
-import { Page, Router, history } from '../index'
+import { connect } from 'epic-state/preact'
+// Import from local folder to avoid using entry tsconfig (different JSX configrations required).
+import { Page, back, create, go, history, reset } from './source/index'
+
+// Clean up rendered content from other suite.
+document.body.innerHTML = ''
+
+// TODO why doesn't globally connected preact plugin work?
 
 const Overview = () => <p>Overview</p>
 const { asFragment: OverviewMarkup } = render(<Overview />)
@@ -23,7 +28,7 @@ const FragmentPage = (name: string, count: number) => (
   </>
 )
 
-Router.setPages(
+const { Router, removeListener } = create(
   {
     overview: Overview,
     about: About,
@@ -33,6 +38,7 @@ Router.setPages(
     404: Custom404,
   },
   'overview',
+  connect,
 )
 
 const wait = (time = 1) =>
@@ -41,8 +47,7 @@ const wait = (time = 1) =>
   })
 
 const serializer = new XMLSerializer()
-const serializeFragment = (asFragment: () => DocumentFragment) =>
-  serializer.serializeToString(asFragment())
+const serializeFragment = (asFragment: () => DocumentFragment) => serializer.serializeToString(asFragment())
 
 let page = render(<Page />)
 
@@ -53,7 +58,7 @@ test('Intial page is rendered without interaction.', () => {
 })
 
 test('go: Switches to page.', async () => {
-  Router.go('about')
+  go('about')
   await wait()
   expect(serializeFragment(page.asFragment)).toEqual(serializeFragment(AboutMarkup))
   expect(Router.route).toBe('about')
@@ -62,7 +67,7 @@ test('go: Switches to page.', async () => {
 
 test('go: Can rerender already rendered page.', async () => {
   // NOTE this used to require a workaround as double rendering lead to an error.
-  Router.go('about')
+  go('about')
   await wait()
   expect(serializeFragment(page.asFragment)).toEqual(serializeFragment(AboutMarkup))
   expect(Router.route).toBe('about')
@@ -70,15 +75,15 @@ test('go: Can rerender already rendered page.', async () => {
 })
 
 test('back: Goes back to the initial page.', async () => {
-  Router.back()
-  Router.back()
+  back()
+  back()
   await wait()
   expect(serializeFragment(page.asFragment)).toEqual(serializeFragment(OverviewMarkup))
   expect(history.location.pathname).toEqual('/')
 })
 
 test('go: Switches to page with parameters.', async () => {
-  Router.go('article', { id: 5 })
+  go('article', { id: 5 })
   await wait()
   expect(serializeFragment(page.asFragment)).toEqual(serializeFragment(Article5Markup))
   expect(history.location.pathname).toEqual('/article')
@@ -87,7 +92,7 @@ test('go: Switches to page with parameters.', async () => {
 
 test('go: Initial route is found on /.', async () => {
   expect(Router.initialRoute).toEqual('overview')
-  Router.go(Router.initialRoute)
+  go(Router.initialRoute)
   await wait()
   expect(serializeFragment(page.asFragment)).toEqual(serializeFragment(OverviewMarkup))
   expect(Router.route).toEqual('overview')
@@ -96,39 +101,41 @@ test('go: Initial route is found on /.', async () => {
 })
 
 test('go: Missing route shows 404 fallback in page.', async () => {
-  Router.go('missing')
+  go('missing')
   await wait()
   expect(serializeFragment(page.asFragment)).toEqual(serializeFragment(Custom404Markup))
   expect(history.location.pathname).toEqual('/missing')
 })
 
 test('Props handed to Page can be accessed from pages.', async () => {
-  Router.reset()
+  removeListener()
+  reset()
 
   const Overview2 = () => <p>Overview</p>
-  const Error = ({ onError }: { onError: (message: string) => any }) => (
-    <p>sending an error {onError && onError('whatt?')}</p>
-  )
+  const ErrorPage = ({ onError }: { onError?: (message: string) => string }) => <p>sending an error {onError?.('whatt?')}</p>
 
   const { asFragment: Overview2Markup } = render(<Overview2 />)
-  const { asFragment: ErrorMarkup } = render(<Error onError={(value = '') => value} />)
+  const { asFragment: ErrorMarkup } = render(<ErrorPage onError={(value = '') => value} />)
 
-  Router.setPages(
+  const { Router } = create(
     {
       overview: Overview,
-      error: Error,
+      error: ErrorPage,
     },
     'overview',
+    connect,
   )
 
-  Router.go('overview')
+  go('overview')
 
   const errorMock = mock(() => 'whatt?')
   expect(errorMock.mock.calls.length).toEqual(0)
   page = render(<Page onError={errorMock} />)
   expect(serializeFragment(page.asFragment)).toEqual(serializeFragment(Overview2Markup))
-  Router.go('error')
+  expect(Router.route).toBe('overview')
+  go('error')
   await wait()
   expect(errorMock.mock.calls.length).toEqual(1)
   expect(serializeFragment(page.asFragment)).toEqual(serializeFragment(ErrorMarkup))
+  expect(Router.route).toBe('error')
 })
diff --git a/test/setup-dom.ts b/test/setup-dom.ts
index c474c15..0562085 100644
--- a/test/setup-dom.ts
+++ b/test/setup-dom.ts
@@ -1,3 +1,3 @@
 import { GlobalRegistrator } from '@happy-dom/global-registrator'
 
-GlobalRegistrator.register()
\ No newline at end of file
+GlobalRegistrator.register()
diff --git a/types.ts b/types.ts
index d122b23..a6f1a51 100644
--- a/types.ts
+++ b/types.ts
@@ -1,21 +1,16 @@
-import type { ReactNode, JSX } from 'react'
-import type { connect } from 'epic-state/preact'
+import type { connect as preactConnect } from 'epic-state/preact'
+import type { Listener } from 'history'
+import type { FC } from 'react'
 
-export type Input = ReactNode | ReactNode[] | ((...args: any[]) => JSX.Element)
+// biome-ignore lint/suspicious/noExplicitAny: Generic react component.
+export type PageComponent = FC<any>
 
 export type RouterState = {
-  initialRoute?: string
-  pages: object
+  initialRoute: string
+  pages: { [key: string]: PageComponent }
   route: string
   parameters: object
-  go: (route: string, parameters?: object, historyState?: object, replace?: boolean) => void
-  back: () => void
-  forward: () => void
-  initial: () => void
-  setPages: (pages: { [key: string]: Input }, initialRoute: string) => void
-  addPage: (route: string, component: Input) => void
-  reset: () => void
-  listener: ({ location, action }) => void
-  Page: any
-  plugin: typeof connect
+  Page: PageComponent
+  plugin?: typeof preactConnect
+  listener: Listener
 }