Creating Your First Flitter App

This guide will walk you through creating a simple Flitter app in three different environments: pure JavaScript, React (with Vite), and Svelte (with SvelteKit). We’ll create a basic app that displays a colored rectangle with some text.

Pure JavaScript

  1. Create a new file named index.html in your project directory:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Flitter App</title>
  </head>
  <body>
    <div style="width: 500px; height: 500px" id="container">
      <!-- you must set width and height to 100% -->
      <!-- you can use svg instead of canvas -->
      <canvas style="width: 100%; height: 100%;" id="view"></canvas>
    </div>
    <script type="module" src="./main.js"></script>
  </body>
</html>
  1. Create a new file named main.js in the same directory:
import {
  Widget,
  Container,
  Text,
  Center,
  AppRunner,
  TextStyle,
  Colors,
} from "@meursyphus/flitter";

const MyApp = () => {
  return Container({
    width: 300,
    height: 200,
    color: Colors.blue[500],
    child: Center({
      child: Text("Hello, Flitter!", {
        style: new TextStyle({ color: Colors.white, fontSize: 24 }),
      }),
    }),
  });
};

const appElement = document.getElementById("view"); //it must be canvas or svg
const runner = new AppRunner({ view: appElement });
/**
 * you must set resizeTarget to calculate the size of the canvas(or svg)
 */
app.onMount({
  resizeTarget: document.querySelector<HTMLDivElement>("#container")!,
});
runner.runApp(MyApp());
  1. Serve your app using a local server (e.g., with the live-server npm package).

React (with Vite)

  1. In your React project directory, open src/App.tsx and replace its content with:
import {
  Container,
  Text,
  Center,
  TextStyle,
  Colors,
} from "@meursyphus/flitter";
import Widget from "@meursyphus/flitter-react";

function App() {
  return (
    <Widget
      width="300px"
      height="200px"
      widget={Container({
        color: "blue",
        child: Center({
          child: Text("Hello, Flitter!", {
            style: new TextStyle({ color: Colors.white, fontSize: 24 }),
          }),
        }),
      })}
    />
  );
}

export default App;
  1. Run your app with npm run dev.

Svelte (with SvelteKit)

  1. In your SvelteKit project, create a new file src/routes/+page.svelte and add the following content:
<script lang="ts">
  import {
    Container,
    Text,
    Center,
    TextStyle,
    Colors,
  } from "@meursyphus/flitter";
  import Widget from "@meursyphus/flitter-svelte";
</script>

<Widget
  width="300px"
  height="200px"
  widget={Container({
    color: "blue",
    child: Center({
      child: Text("Hello, Flitter!", {
        style: new TextStyle({ color: Colors.white, fontSize: 24 }),
      }),
    }),
  })}
/>
  1. Run your app with npm run dev.

What’s Next?

Congratulations! You’ve created your first Flitter app. This simple example demonstrates the basic structure of a Flitter application and how to use some of its core widgets like Container, Center, and Text. It also shows how to use the TextStyle class to style your text properly.

In the upcoming sections, we’ll dive deeper into Flitter’s core concepts, explore more widgets, and learn about advanced features like state management and animations.

Installation What are Widgets?