Flitter Installation and Setup

Flitter is a library that can be installed via npm and used immediately.

Supported Frameworks

Flitter officially supports the following environments:

  • Vanilla JavaScript - Use with pure JavaScript without frameworks
  • React - Easy integration as React components
  • Svelte - Natural use as Svelte components
  • Vue - Use with Vue 3 Composition API
  • SolidJS - Perfect integration with reactive systems
  • Qwik - Use with optimized loading

Installation Guide

Select the framework you want to use from the tabs below to view installation methods and basic usage examples:

Installation

npm install @meursyphus/flitter @meursyphus/flitter-react

Usage Example

import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';
import Widget from '@meursyphus/flitter-react';

const App = () => (
  <Widget
    width="600px"
    height="300px"
    renderer="canvas" // or "svg"
    widget={Container({
      alignment: Alignment.center,
      color: 'lightblue',
      child: Text("Hello, Flitter!", { 
        style: TextStyle({ 
          fontSize: 30, 
          fontWeight: 'bold' 
        }) 
      })
    })}
  />
);

export default App;

💡 Important Notes

  • • You can switch between "canvas" and "svg" renderers
  • • The Widget component handles sizing and lifecycle automatically
  • • All Flitter widgets can be composed within the widget prop

Other Package Managers

# Using Yarn
yarn add @meursyphus/flitter @meursyphus/flitter-react

# Using PNPM
pnpm add @meursyphus/flitter @meursyphus/flitter-react

Choosing a Renderer

Flitter supports two types of renderers:

Canvas Renderer

  • Advantages: High performance, pixel-level control, suitable for complex animations
  • Disadvantages: Text selection not possible, SEO unfriendly
  • Use cases: Games, complex visualizations, animation-heavy applications

SVG Renderer

  • Advantages: Vector graphics, text selection possible, SEO friendly, CSS styling possible
  • Disadvantages: Potential performance degradation with complex animations
  • Use cases: Charts, diagrams, static visualizations

Server-Side Rendering

// When using server-side mode:
// 1. First renders as SVG on the server
// 2. Hydrates with the specified renderer on the client
<Widget 
  renderer="canvas"     // Client renderer
  ssr={{                 // Enable SSR and specify size
    size: {
      width: 800,      // Width to render on server
      height: 600      // Height to render on server
    }
  }}
  widget={...} 
/>

TypeScript Support

Flitter is written in TypeScript and provides complete type support.

import { Container, ContainerProps, EdgeInsets, Text } from '@meursyphus/flitter';

const props: ContainerProps = {
  color: 'lightblue',
  padding: EdgeInsets.all(20),
  child: Text('Hello, TypeScript!')
};

const container = Container(props);

Next Steps

Once installation is complete, create your first Flitter application through the Hello World example.

Community Support

Need help or have questions?

Introduction Hello World