Svelte + Ionic Mobile App

A mobile application built with Svelte 5 and Ionic Framework, demonstrating modern mobile app development patterns including bottom tab navigation and stack-based page navigation.

Features

Part 1: Project Setup

• Svelte 5 with TypeScript
• Ionic Core integration
• Vite for fast development

Part 2: Bottom Tab Layout

• 4-tab navigation (Home, Search, Favorite, Settings)
• Custom tab icons with Ionicons
• Independent content for each tab
• Smooth tab transitions

Part 3: Stack Navigation

• ion-nav integration with Svelte
• Independent navigation stacks per tab
• Multi-level navigation (List -> Detail -> SubDetail)
• Back button support
• Custom Svelte framework delegate

Project Structure

src/
├── components/
│   └── NavWrapper.svelte          # ion-nav wrapper component
├── lib/
│   └── Counter.svelte             # Demo counter component
├── pages/
│   ├── Home.svelte                # Home tab with product list
│   ├── Search.svelte              # Search tab with search bar
│   ├── Favorite.svelte            # Favorites tab
│   ├── Settings.svelte            # Settings tab
│   └── details/
│       ├── ItemDetail.svelte      # Product detail page
│       └── SubDetail.svelte       # Nested detail page
├── utils/
│   └── svelteDelegate.ts          # Framework delegate for ion-nav
├── App.svelte                     # Root component with tabs
├── main.ts                        # App initialization
├── ionic.d.ts                     # Ionic type declarations
└── vite-env.d.ts                  # Vite & Svelte type declarations

Tech Stack

• Framework: Svelte 5 (latest with runes)
• UI Components: Ionic Core 8.7.7
• Icons: Ionicons
• Build Tool: Vite 7
• Language: TypeScript
• Styling: CSS + Ionic CSS Variables

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Type check
npm run check

# Build for production
npm run build

# Preview production build
npm run preview

Key Implementations

1. Svelte Framework Delegate

Custom framework delegate to make ion-nav work with Svelte components:

// src/utils/svelteDelegate.ts
export const svelteDelegate = {
  attachViewToDom: async (parentElement, component, props) => {
    const wrapper = document.createElement('div')
    wrapper.classList.add('ion-page')
    const instance = mount(component, { target: wrapper, props })
    parentElement.appendChild(wrapper)
    return wrapper
  },
  removeViewFromDom: async (_, childElement) => {
    const instance = instanceMap.get(childElement)
    if (instance) unmount(instance)
    childElement.remove()
  }
}

2. Navigation Wrapper

Wraps each tab content with ion-nav for independent navigation stacks:

<!-- src/components/NavWrapper.svelte -->
<script lang="ts">
  import { onMount } from 'svelte'
  import { svelteDelegate } from '../utils/svelteDelegate'

  let { root, rootParams = {} } = $props()
  let navElement = $state(null)

  onMount(async () => {
    if (navElement && root) {
      navElement.delegate = svelteDelegate
      await navElement.setRoot(root, rootParams)
    }
  })
</script>

<ion-nav bind:this={navElement}></ion-nav>

3. Stack Navigation

Push new pages onto the navigation stack:

const handleItemClick = async (itemId: number, itemName: string) => {
  const nav = document.querySelector('ion-nav') as HTMLIonNavElement
  if (nav) {
    const module = await import('./details/ItemDetail.svelte')
    await nav.push(module.default, { itemId, itemName })
  }
}

UI Components Used

• ion-app - Root application container
• ion-tabs - Tab navigation container
• ion-tab-bar - Bottom tab bar
• ion-tab-button - Individual tab buttons
• ion-nav - Stack navigation controller
• ion-header / ion-toolbar - Page headers
• ion-content - Scrollable page content
• ion-list / ion-item - List components
• ion-card - Card layouts
• ion-button - Action buttons
• ion-searchbar - Search input
• ion-toggle - Toggle switches
• ion-back-button - Back navigation button

Key Features Explained

Independent Navigation Stacks

Each tab maintains its own navigation stack:

Home Tab:                Search Tab:
├── Home (root)         ├── Search (root)
└── ItemDetail          └── ItemDetail
    └── SubDetail           └── SubDetail

Switching between tabs preserves the navigation state.

Accessibility

All interactive elements include:

• ARIA roles (role="button")
• Keyboard support (tabindex="0", onkeydown)
• Proper semantic HTML

TypeScript Support

Full TypeScript support with custom declarations for:

• Ionic Core components
• Svelte modules
• HTMLIonNavElement interface

Learning Resources

This project follows tutorials from nextbeat-engineering on Medium:

• Part 1: Setup and Introduction
• Part 2: Layout with Bottom Tabs
• Part 3: Stack Navigation with ion-nav

Contributing

Feel free to open issues or submit PRs for improvements!

License

MIT

Acknowledgments

• Ionic Framework (https://ionicframework.com/)
• Svelte (https://svelte.dev/)
• nextbeat-engineering for the tutorial series