Flitter

A powerful framework inspired by Flutter, supporting both SVG and Canvas to...

ChartingCanvasSVGReactSvelte
meursyphus/flitterflitter.dev@meursyphus/flitter

README

Flitter


Flitter is a powerful framework inspired by Flutter, supporting both SVG and Canvas to create high-performance graphics and user interfaces. It is designed to easily implement complex data visualizations, interactive charts, diagrams, and graphic editors in web applications.


Key Features


- Render Object Tree: Flitter uses a render object tree for efficient rendering, allowing easy management and manipulation of complex layouts.

- Declarative Programming: Following a declarative paradigm, the screen automatically updates when values change, simplifying application state management.

- Optimized Rendering: Re-rendering, painting, and layout recalculations are managed by the renderer pipeline, with optimizations applied to update only necessary parts.

- Box Model Layout: Users can easily compose layouts using the familiar Box model.

- SVG and Canvas Support: Supports both SVG and Canvas, meeting various graphic requirements. Developers can choose the appropriate renderer as needed.

- Diverse Applications: Can be utilized in various fields such as charts, diagrams, data visualization, and graphic editors.

Showcase

Here are some examples of what you can create with Flitter:
Interactive ERD (Entity-Relationship Diagram)[https://easyrd.dev]

Interactive ERD

This interactive ERD demonstrates Flitter's capability to create complex, interactive diagrams. Users can manipulate entities, add relationships, and visualize database structures in real-time. This showcase highlights Flitter's strengths in:

Creating responsive, draggable elements
Handling complex user interactions
Rendering intricate diagrams with ease
Real-time updates based on user input

Installation Guide


Flitter can be used in various JavaScript environments. Here are installation and usage methods for major environments:

Pure JavaScript


  1. ```bash
  2. npm install @meursyphus/flitter
  3. ```

  1. ```javascript
  2. import { Widget, Container, AppRunner } from '@meursyphus/flitter';

  4. // Using SVG renderer
  5. const svgElement = document.getElementById('mySvg');
  6. const svgRunner = new AppRunner({ view: svgElement });
  7. svgRunner.runApp(Container({ color: 'lightblue' }));

  9. // Using Canvas renderer
  10. const canvasElement = document.getElementById('myCanvas');
  11. const canvasRunner = new AppRunner({ view: canvasElement });
  12. canvasRunner.runApp(Container({ color: 'lightgreen' }));
  13. ```

React


  1. ```bash
  2. npm install @meursyphus/flitter @meursyphus/flitter-react
  3. ```

  1. ```jsx
  2. import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';
  3. import Widget from '@meursyphus/flitter-react';

  5. const App = () => (
  6.   <>
  7.     <Widget
  8.       width="600px"
  9.       height="300px"
  10.       renderer="svg"
  11.       widget={Container({
  12.         alignment: Alignment.center,
  13.         color: 'lightblue',
  14.         child: Text("Hello, Flitter SVG!", { style: TextStyle({ fontSize: 30, weight: 'bold' }) })
  15.       })}
  16.     />
  17.     <Widget
  18.       width="600px"
  19.       height="300px"
  20.       renderer="canvas"
  21.       widget={Container({
  22.         alignment: Alignment.center,
  23.         color: 'lightgreen',
  24.         child: Text("Hello, Flitter Canvas!", { style: TextStyle({ fontSize: 30, weight: 'bold' }) })
  25.       })}
  26.     />
  27.   </>
  28. );
  29. ```