Migration from Framework7 v8 to v9

In this article we will walk through most of the breaking changes to check what needs to be done to migrate your app from Framework7 v8 to Framework7 v9.

You can also check the full changelog here

iOS Theme Updates

Framework7 v9 brings all new iOS 26 styles across all components:

Updated visual design to match the latest iOS design language
Refined spacing, typography, and visual elements
Improved consistency across all iOS theme components

Material Theme Updates

The Material theme has been significantly updated with the latest Material You specifications:

Color schemes updated to latest Material You spec
New Vibrant color scheme - provides more colorful and dynamic appearance
New Monochrome color scheme - provides neutral, grayscale appearance
Updated look for Range slider with better visual feedback
Updated look for Progressbar with refined animations
Reworked page transitions with improved effects and direction handling

The dynamicNavbar functionality has been removed. This feature allowed automatic navbar transitions between pages.

Remove dynamicNavbar parameter from your app configuration
Navbar transitions will now work automatically based on the standard page transition logic
No additional configuration is needed - navbars will transition naturally with pages

Back Link Text

The default back link text has been changed:

Previously: Back links showed "Back" text by default
Now: Back links use icon only by default (no text)
This provides a cleaner, more modern interface
If you need back link text, you'll need to explicitly add it in your markup:

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link back">
                <i class="icon icon-back"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="title">Page Title</div>
    </div>
</div>

Photo Browser

Photo Browser has been simplified by removing theme mode options:

Removed both light and dark mode specific settings
Photo Browser now uses the same light or dark mode as your app
It automatically adapts to your app's current theme
Remove any theme parameter from Photo Browser configuration
Remove any light/dark specific styling overrides

Autocomplete

Autocomplete component has been updated for a cleaner interface:

Removed default "Cancel" text
Now uses icon only for the cancel button
Provides more consistent interface across all components
If you need custom cancel text, you'll need to explicitly add it using the closeButtonText parameter

Smart Select

Smart Select component has been updated similarly:

Removed default "Cancel" text
Now uses icon only for the cancel button
Provides cleaner, more modern interface
If you need custom cancel text, you'll need to explicitly add it using the closeButtonText parameter

Searchbar

Searchbar component has been updated:

Removed default "Cancel" text
Now uses icon only for the cancel button
Aligns with iOS design patterns
If you need custom cancel text, you'll need to explicitly add it using the disableButtonText parameter

Timeline

Removed Horizontal Timeline

The Horizontal Timeline style has been removed:

Only vertical timeline is now supported
This aligns with modern design patterns and improves consistency
If you were using horizontal timeline, you'll need to refactor to use vertical timeline
Consider using alternative layouts like Grid or Cards for horizontal content presentation

React

Framework7 React has been updated to support React 19:

Updated to the latest React 19 API
Improved TypeScript types
Better compatibility with React 19 features
Make sure to update your React dependencies to version 19 or later
Check React 19 release notes for React-specific changes

Vue

Framework7 Vue continues to support the latest Vue 3 API:

Improved TypeScript types
Better compatibility with Vue 3 composition API
Ensure you're using Vue 3 for full compatibility

Svelte

Framework7 Svelte has been updated to Svelte 5:

Updated to the latest Svelte v5 API
Improved reactivity system
Better TypeScript support
Make sure to update your Svelte dependencies to version 5 or later
Check Svelte 5 migration guide for Svelte-specific changes
Update your component syntax to use Svelte 5's new runes system if needed

Touch Effects

Framework7 v9 updates touch interaction effects with theme-specific implementations:

Touch Ripple (Material Theme)

touch.mdTouchRipple parameter has been renamed to touch.touchRipple
Touch Ripple now works only in Material theme
touch.iosTouchRipple has been removed

Touch Highlight (iOS Theme)

A new Touch Highlight effect has been introduced for iOS theme:

New touch.touchHighlight parameter (default: true) - enables native iOS-like highlight on touch
New touch.touchHighlightElements parameter - CSS selector of elements to apply highlight effect
Provides a more native iOS experience
Use no-touch-highlight class to disable for specific elements

Update your app parameters:

// v8
const app = new Framework7({
  touch: {
    mdTouchRipple: true,
    iosTouchRipple: false
  }
});

// v9
const app = new Framework7({
  touch: {
    touchRipple: true,      // Material theme only
    touchHighlight: true    // iOS theme only (new)
  }
});

Summary of Breaking Changes

Quick checklist for migration:

✓ Remove dynamicNavbar parameter from app configuration
✓ Update back links to explicitly include text if needed
✓ Remove Photo Browser theme parameters
✓ Update Autocomplete to include closeButtonText if cancel text is needed
✓ Update Smart Select to include closeButtonText if cancel text is needed
✓ Update Searchbar to include disableButtonText if cancel text is needed
✓ Refactor horizontal timelines to vertical layout or alternative components
✓ Update React to version 19 or later
✓ Update Svelte to version 5 or later
✓ Test your app with the new Material theme color schemes
✓ Update touch parameters: mdTouchRipple → touchRipple, remove iosTouchRipple