Using with Web Frameworks

One of WebF’s core principles is Ecosystem Compatibility. This means WebF is designed to work with your favorite web framework, not against it. Because WebF provides a standards-compliant DOM and event model, popular frameworks work out of the box.

You can create a project using Vite and select the framework of your choice during setup. The following section provides specific examples for popular frameworks.

React.js

You can use React to build your application’s UI just as you would for the web.

Here is a basic example of a counter application built with React:

src/main.jsx


import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function App() {
  const [count, setCount] = useState(0);
 
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Welcome to React on WebF!</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
 
// Standard React entry point
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React on WebF</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Deeper Integration

For a richer experience, the @openwebf/react-core-ui package provides components and hooks that are optimized for the WebF environment.

Use <FlutterGestureDetector> to handle advanced gestures.
Use useFlutterAttached to safely measure the layout of your components.

Vue.js

You can use Vue and its familiar Single-File Component (SFC) structure to build your WebF application. When creating a project with Vite, simply select vue as your desired framework.

Here is a basic example of a counter component in Vue:

src/App.vue


<script setup>
import { ref } from 'vue'
 
const count = ref(0)
</script>
 
<template>
  <div class="container">
    <h1>Welcome to Vue on WebF!</h1>
    <p>You clicked {{ count }} times</p>
    <button @click="count++">
      Click me
    </button>
  </div>
</template>
 
<style scoped>
.container {
  text-align: center;
  margin-top: 50px;
}
</style>

Preact

For developers who prefer a lightweight alternative to React, Preact is fully compatible with WebF. The component syntax is the same, just with different imports.

src/main.jsx


import { render } from 'preact';
import { useState } from 'preact/hooks';
 
function App() {
  const [count, setCount] = useState(0);
 
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Welcome to Preact on WebF!</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
 
render(<App />, document.getElementById('app'));

Svelte

Svelte’s compiler-based approach also works perfectly with WebF. When creating a project with Vite, select svelte.

Here is a basic counter in a Svelte component:

src/App.svelte


<script>
  let count = 0;
 
  function handleClick() {
    count += 1;
  }
</script>
 
<main>
  <h1>Welcome to Svelte on WebF!</h1>
  <p>You clicked {count} times</p>
  <button on:click={handleClick}>
    Click me
  </button>
</main>
 
<style>
  main {
    text-align: center;
    margin-top: 50px;
  }
</style>

Solid

Solid.js, with its fine-grained reactivity, is another excellent choice for building high-performance UIs in WebF.

src/App.jsx


import { createSignal } from 'solid-js';
 
function App() {
  const [count, setCount] = createSignal(0);
 
  return (
    <div style={{ "text-align": 'center', "margin-top": '50px' }}>
      <h1>Welcome to Solid on WebF!</h1>
      <p>You clicked {count()} times</p>
      <button onClick={() => setCount(count() + 1)}>
        Click me
      </button>
    </div>
  );
}
 
export default App;

Qwik

Qwik’s focus on resumability and lazy-loading offers a unique approach to building applications, and it is compatible with the WebF environment.

src/routes/index.tsx


import { component$, useSignal } from '@builder.io/qwik';
 
export default component$(() => {
  const count = useSignal(0);
 
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Welcome to Qwik on WebF!</h1>
      <p>You clicked {count.value} times</p>
      <button onClick$={() => count.value++}>
        Click me
      </button>
    </div>
  );
});