Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/danielitoCode/compose_svelted/llms.txt

Use this file to discover all available pages before exploring further.

NavHost is the rendering surface of the Compose Svelted navigation system. It subscribes to a NavController’s backstack store, resolves the top entry against its list of registered routes, and displays the matching Svelte component inside an AnimatedContent wrapper. When the backstack changes — because navigate() or popBackStack() was called — the transition plays and the new screen appears. NavHost owns no navigation logic of its own. All state lives in the controller you pass to it. This separation means you can create the controller at any point in the component tree, pass it down as a prop or through Svelte context, and mount NavHost wherever makes sense in your layout.

​
Props

PropTypeDefaultDescription
navControllerNavControllerrequiredThe controller whose backstack this host renders.
routesArray<{ route: { path: string }, component: any }>requiredRoute-to-component mappings. Build this array with composable().
transitionContentTransitionfade(320)The animated transition played between screen changes.
modifierModifierModifier.empty()Applied to the outer container div of the host.

​
composable(route, factory)

import { composable } from '@danielito1996/compose-svelted';

composable<T>(route: Route<T>, factory: () => any): { route: Route<T>, component: any }
composable is a small helper that binds a route object to a component. The factory argument is a zero-argument function that returns the component class — the lazy-function form means you can use dynamic imports in a future version without changing the call site. For static imports the factory is simply () => MyScreen. 
composable(Home, () => HomeScreen)
Pass an array of composable() calls to the routes prop of NavHost. The order of entries in the array does not matter; NavHost matches by route.path, not by position.

​
Props received by every screen

Each component rendered by NavHost automatically receives two props regardless of whether it declares them:
PropTypeDescription
navControllerNavControllerThe same controller instance passed to NavHost. Use it to call navigate() or popBackStack().
navBackStackEntryNavBackStackEntryThe current { route, args } entry. Read args to access any payload passed during navigation.
Declare the props you need with export let in the screen’s <script> block. You are not required to declare both.

​
Transitions

NavHost delegates animation to AnimatedContent internally. The transition prop accepts a ContentTransition value — a descriptor that AnimatedContent interprets when the targetState (the current route path) changes. Three built-in transitions are available out of the box: 
import { fade, slideHorizontal, scaleFade } from '@danielito1996/compose-svelted';

fade(320)         // cross-fade, accepts an optional duration in ms (default 300 ms)
slideHorizontal() // slide left/right, fixed 300 ms duration
scaleFade()       // scale + fade, fixed 220 ms duration
Pass any of these to the transition prop of NavHost: 
<NavHost
  navController={navController}
  transition={slideHorizontal()}
  routes={[...]}
/>

​
Complete working example

The following files form a minimal but fully functional navigation flow: a login screen, a home screen, and a details screen with a typed argument.

​
Route definitions

routes.ts
export const Login   = { path: 'login' };
export const Home    = { path: 'home' };
export const Details = { path: 'details' };

​
Navigation wrapper

MainNavigationWrapper.svelte
<script lang="ts">
  import {
    NavHost,
    composable,
    rememberNavController,
    Modifier,
    slideHorizontal
  } from '@danielito1996/compose-svelted';
  import { Login, Home, Details } from './routes';
  import LoginScreen   from './LoginScreen.svelte';
  import HomeScreen    from './HomeScreen.svelte';
  import DetailsScreen from './DetailsScreen.svelte';

  const navController = rememberNavController(Home.path);
</script>

<NavHost
  navController={navController}
  modifier={Modifier.fillMaxSize()}
  transition={slideHorizontal()}
  routes={[
    composable(Login,   () => LoginScreen),
    composable(Home,    () => HomeScreen),
    composable(Details, () => DetailsScreen)
  ]}
/>

​
Login screen

LoginScreen.svelte
<script lang="ts">
  import { Column, Button, Text, Modifier, Arrangement, Alignment } from '@danielito1996/compose-svelted';
  import { Home } from './routes';

  export let navController;
</script>

<Column
  modifier={Modifier.fillMaxSize().padding(32)}
  verticalArrangement={Arrangement.Center}
  horizontalAlignment={Alignment.CenterVertically}
>
  <Text>Login Screen</Text>

  <Button
    modifier={Modifier.marginTop(24)}
    onClick={() => navController.navigate(Home.path)}
  >
    Sign in
  </Button>
</Column>

​
Home screen

HomeScreen.svelte
<script lang="ts">
  import { Column, Button, Text, Modifier, Arrangement, Alignment } from '@danielito1996/compose-svelted';
  import { Details } from './routes';

  export let navController;
</script>

<Column
  modifier={Modifier.fillMaxSize().padding(32)}
  verticalArrangement={Arrangement.Center}
  horizontalAlignment={Alignment.CenterVertically}
>
  <Text>Home Screen</Text>

  <Button onClick={() => navController.navigate(Details.path, { id: 42 })}>
    Go to Details (id=42)
  </Button>

  <Button onClick={() => navController.popBackStack()}>
    Logout
  </Button>
</Column>

​
Details screen

DetailsScreen.svelte
<script lang="ts">
  import { Column, Button, Text, Modifier, Arrangement, Alignment } from '@danielito1996/compose-svelted';

  export let navController;
  export let navBackStackEntry;

  const { id } = navBackStackEntry?.args ?? {};
</script>

<Column
  modifier={Modifier.fillMaxSize().padding(32)}
  verticalArrangement={Arrangement.Center}
  horizontalAlignment={Alignment.CenterVertically}
>
  <Text>Details Screen</Text>
  <Text>ID received: {id}</Text>

  <Button onClick={() => navController.popBackStack()}>
    Back
  </Button>
</Column>

​
Internal architecture notes

NavHost renders its active component inside AnimatedContent. The targetState passed to AnimatedContent is the route string of the current top backstack entry. Any time that string changes, AnimatedContent plays the configured ContentTransition and swaps the rendered component. The container div wrapping AnimatedContent always has width: 100%; height: 100%; position: relative applied, with the modifier styles appended on top. Pass Modifier.fillMaxSize() from the parent to let the host expand to fill its allocated space.
Core V2 navigation is stable and closed for new features. Core V3 will introduce nested navigation graphs and directional transitions (e.g. distinguishing a forward slide from a back-pop slide). Upgrade instructions will be published alongside the V3 release.

Build docs developers (and LLMs) love

Get started for freeTalk to us