Installing Flitter

This guide will walk you through the process of installing Flitter in your project. We’ll focus on setting up Flitter with React, which is one of the most common use cases.

Installation Steps

  1. Create a new Vite project with React template:

    npm create vite@latest my-flitter-app -- --template react-ts
cd my-flitter-app

  2. Install Flitter and its React bindings:

    npm install @meursyphus/flitter

Basic Setup

Let’s create a simple app to verify our installation. First, we’ll set up the basic structure with React refs for the SVG element and its container. Then, we’ll initialize Flitter with a basic widget to display some text.

The example above shows how to:

  1. Create refs for both the SVG element(or canvas element) and its container
  2. Initialize the AppRunner with the SVG element
  3. Set up proper resize handling
  4. Create and render a basic widget
  5. Clean up resources when the component unmounts

Next Steps

Now that you have Flitter installed and running, we’ll explore how to create more complex applications using Flitter’s widget system in the next section.