Framework7 Svelte

I am excited to announce that Framework7-Svelte is finally here and available from Framework7 v5.4.0! 🎉

Now we can build cybernetically enhanced web, desktop and mobile apps with native look and feel!

If you are not familiar with Svelte:

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Svelte will make your apps faster, with less and more clear code to write, and with built-in state management and reactivity.

Usage

Usage is pretty simple, straightforward and similar to what we have in Framework7-Vue/React. For example:

<App { params }>
  <View main url="/" />
</App>

<script>
  import { App, View } from 'framework7-svelte';
  import Home from './pages/home.svelte';
  const params = {
    // ...
    routes: [
      {
        path: '/',
        component: Home,
      },
      // ...
    ],
  };
</script>
<Page>
  <Navbar large title="My App" />
  <Block strong>
    <p>Welcome to my app!</p>
    <button fill large>Button</button>
  </Block>
  <List>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
  </List>
</Page>

<script>
  import {
    Page,
    Navbar,
    Block,
    Button,
    List,
    ListItem,
  } from 'framework7-svelte';
</script>

And we will get the following output:

Getting Started

To start creating apps with Framework7 and Svelte, it is recommend to create project with Framework7 CLI, it allows to choose the framework, target platform, starter templates and many other useful things.

Just run the following command where you want to setup new project:

npx framework7-cli create --ui

And in "Framework" section choose Framework7 with Svelte:

What Is Next?

Now it is time to try it yourself, and as next steps it is recommended to check the following Framework7 v5 docs:

P.S.

If you love Framework7, please, support project by donating or pledging on Patreon: https://www.patreon.com/framework7

Your support means a lot for us!