{"id":11707468,"url":"https://github.com/meursyphus/flitter","last_synced_at":"2025-05-15T20:07:17.161Z","repository":{"id":226729531,"uuid":"769435195","full_name":"meursyphus/flitter","owner":"meursyphus","description":"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.","archived":false,"fork":false,"pushed_at":"2024-12-21T11:48:16.000Z","size":34872,"stargazers_count":346,"open_issues_count":8,"forks_count":13,"subscribers_count":2,"default_branch":"latest","last_synced_at":"2025-05-09T12:30:04.609Z","etag":null,"topics":["canvas","chart","diagram","editor","flutter","framework","svg","web"],"latest_commit_sha":null,"homepage":"https://flitter.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meursyphus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-09T04:18:19.000Z","updated_at":"2025-05-07T03:13:42.000Z","dependencies_parsed_at":"2024-06-21T23:40:33.966Z","dependency_job_id":"5f7ce7f6-c55e-45a6-907c-4ea6e6f91cb2","html_url":"https://github.com/meursyphus/flitter","commit_stats":{"total_commits":61,"total_committers":8,"mean_commits":7.625,"dds":"0.29508196721311475","last_synced_commit":"120b02eb56435a759bec4b9e1da7c0f91b09cbf4"},"previous_names":["meursyphus/flitter"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meursyphus%2Fflitter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meursyphus%2Fflitter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meursyphus%2Fflitter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meursyphus%2Fflitter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meursyphus","download_url":"https://codeload.github.com/meursyphus/flitter/tar.gz/refs/heads/latest","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254036842,"owners_count":22003654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","chart","diagram","editor","flutter","framework","svg","web"],"created_at":"2024-06-26T11:13:35.727Z","updated_at":"2025-05-15T20:07:12.039Z","avatar_url":"https://github.com/meursyphus.png","language":"TypeScript","funding_links":[],"categories":["MDX","TypeScript"],"sub_categories":[],"readme":"# Flitter\n\nFlitter is a powerful JavaScript rendering engine and framework inspired by Flutter, supporting both SVG and Canvas to create high-performance graphics and user interfaces. As a rendering engine, it provides fine-grained control over the rendering process, allowing developers to create complex, interactive visualizations with ease. It is designed to efficiently implement data visualizations, interactive charts, diagrams, and graphic editors in web applications.\n\n## Key Features\n\n- **Advanced Rendering Engine**: At its core, Flitter is a sophisticated rendering engine that gives developers precise control over how elements are drawn and updated on the screen.\n\n- **Render Object Tree**: Flitter uses a render object tree for efficient rendering, allowing easy management and manipulation of complex layouts. This tree-based approach, central to Flitter's rendering engine, enables optimized updates and redraws.\n\n- **Declarative Programming**: Following a declarative paradigm, the screen automatically updates when values change, simplifying application state management and reducing the complexity of manual DOM manipulation.\n\n- **Optimized Rendering Pipeline**: Re-rendering, painting, and layout recalculations are managed by the renderer pipeline, with optimizations applied to update only necessary parts. This ensures high performance even with complex, data-heavy visualizations.\n\n- **Dual Renderer Support**: As a flexible rendering engine, Flitter supports both SVG and Canvas, meeting various graphic requirements. Developers can choose the appropriate renderer as needed, switching seamlessly between vector and bitmap graphics.\n\n- **Box Model Layout**: Users can easily compose layouts using the familiar Box model, providing a intuitive way to structure complex UIs within the rendering engine.\n\n- **Diverse Applications**: Can be utilized in various fields such as charts, diagrams, data visualization, and graphic editors, leveraging the power of the underlying rendering engine.\n\n# Showcase\nHere are some examples of what you can create with Flitter:\nInteractive ERD (Entity-Relationship Diagram)[https://easyrd.dev]\n\n![Interactive ERD](https://flitter.dev/home/easyrd.jpg)\n\nThis 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:\n\nCreating responsive, draggable elements\nHandling complex user interactions\nRendering intricate diagrams with ease\nReal-time updates based on user input\n## Installation Guide\n\nFlitter can be used in various JavaScript environments. Here are installation and usage methods for major environments:\n\n### Pure JavaScript\n\n```bash\nnpm install @meursyphus/flitter\n```\n\n```javascript \nimport { Container } from \"@meursyphus/flitter\";\n\n/**\n * canvas style must be set to 100%, 100%\n * and you also must wrap div for canvas in order to calculate the size of the canvas\n */\ndocument.querySelector\u003cHTMLDivElement\u003e(\"#app\")!.innerHTML = `\n  \u003cdiv style=\"width: 100vw; height: 100vh\" id=\"container\"\u003e\n    \u003ccanvas style=\"width: 100%; height: 100%;\" id=\"view\" /\u003e\n  \u003c/div\u003e\n`;\n// Note: SVG is also supported\n// document.querySelector\u003cHTMLDivElement\u003e(\"#app\")!.innerHTML = `\n//   \u003cdiv style=\"width: 100vw; height: 100vh\" id=\"container\"\u003e\n//     \u003csvg style=\"width: 100%; height: 100%;\" id=\"view\"\u003e\u003c/svg\u003e\n//   \u003c/div\u003e\n// `;\nconst app = new AppRunner({\n  view: document.querySelector\u003cHTMLCanvasElement\u003e(\"#view\")!,\n});\n/**\n * you must set resizeTarget to calculate the size of the canvas\n */\napp.onMount({\n  resizeTarget: document.querySelector\u003cHTMLDivElement\u003e(\"#container\")!,\n});\n\napp.runApp(Container({ color: 'lightblue' }));\n```\n\n### React\n\n```bash\nnpm install @meursyphus/flitter @meursyphus/flitter-react\n```\n\n```jsx\nimport { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';\nimport Widget from '@meursyphus/flitter-react';\n\nconst App = () =\u003e (\n  \u003c\u003e\n    \u003cWidget\n      width=\"600px\"\n      height=\"300px\"\n      renderer=\"canvas\" // or svg\n      widget={Container({\n        alignment: Alignment.center,\n        color: 'lightblue',\n        child: Text(\"Hello, Flitter SVG!\", { style: TextStyle({ fontSize: 30, weight: 'bold' }) })\n      })}\n    /\u003e\n  \u003c/\u003e\n);\n```\n\n### Svelte\n\n```bash\nnpm install @meursyphus/flitter @meursyphus/flitter-svelte\n```\n\n```svelte\n\u003cscript\u003e\n  import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';\n  import Widget from '@meursyphus/flitter-svelte';\n\u003c/script\u003e\n\n\u003cWidget\n  width=\"600px\"\n  height=\"300px\"\n  renderer=\"canvas\" \u003c!-- or \"svg\" --\u003e\n  widget={Container({\n    alignment: Alignment.center,\n    color: 'lightblue',\n    child: Text(\"Hello, Flitter SVG!\", { style: TextStyle({ fontSize: 30, weight: 'bold' }) })\n  })}\n/\u003e\n```\n\n## Usage Example\n\nExample of creating a simple chart using Flitter:\n\n```javascript\nimport {\n  Container,\n  Animation,\n  Text,\n  TextStyle,\n  StatefulWidget,\n  State,\n  Alignment,\n  SizedBox,\n  Column,\n  MainAxisSize,\n  MainAxisAlignment,\n  Row,\n  CrossAxisAlignment,\n  FractionallySizedBox,\n  BoxDecoration,\n  BorderRadius,\n  Radius,\n  AnimationController,\n  Tween,\n  CurvedAnimation,\n  Curves\n} from '@meursyphus/flitter';\n\nexport default function BarChart() {\n  return Container({\n    alignment: Alignment.center,\n    color: 'lightgrey',\n    child: Column({\n      mainAxisSize: MainAxisSize.min,\n      crossAxisAlignment: CrossAxisAlignment.center,\n      children: [\n        Text('BarChart', { style: new TextStyle({ fontFamily: 'Intent', fontWeight: '600' }) }),\n        SizedBox({\n          width: 200,\n          height: 150,\n          child: Row({\n            mainAxisAlignment: MainAxisAlignment.spaceBetween,\n            children: [\n              { label: 'S', value: 60 },\n              { label: 'M', value: 20 },\n              { label: 'T', value: 30 },\n              { label: 'W', value: 90 },\n              { label: 'T', value: 70 },\n              { label: 'F', value: 50 },\n              { label: 'S', value: 40 }\n            ].map(({ label, value }) =\u003e new Bar(label, value))\n          })\n        })\n      ]\n    })\n  });\n}\n\nclass Bar extends StatefulWidget {\n  constructor(public label: string, public value: number) {\n    super();\n  }\n\n  createState(): State\u003cStatefulWidget\u003e {\n    return new BarState();\n  }\n}\n\nclass BarState extends State\u003cBar\u003e {\n  animationController!: AnimationController;\n  tweenAnimation!: Animation\u003cnumber\u003e;\n\n  override initState(): void {\n    this.animationController = new AnimationController({\n      duration: 10000\n    });\n    this.animationController.addListener(() =\u003e {\n      this.setState();\n    });\n    const tween = new Tween({ begin: 0, end: this.widget.value });\n    this.tweenAnimation = tween.animated(\n      new CurvedAnimation({\n        parent: this.animationController,\n        curve: Curves.easeInOut\n      })\n    );\n    this.animationController.forward();\n  }\n\n  override build() {\n    return Column({\n      mainAxisAlignment: MainAxisAlignment.end,\n      children: [\n        FractionallySizedBox({\n          heightFactor: this.tweenAnimation.value / 100,\n          child: Column({\n            children: [\n              Container({\n                width: 20,\n                decoration: new BoxDecoration({\n                  color: '#1a1a1a',\n                  borderRadius: BorderRadius.only({\n                    topLeft: Radius.circular(4),\n                    topRight: Radius.circular(4)\n                  })\n                })\n              }),\n              SizedBox({ height: 5 }),\n              Text(this.widget.label, { style: new TextStyle({ fontFamily: 'Intent' }) })\n            ]\n          })\n        })\n      ]\n    });\n  }\n}\n```\n\n## Why Flitter?\n\n1. **Powerful Rendering Engine**: Flitter's core strength lies in its advanced rendering capabilities, allowing for smooth handling of complex graphics and animations.\n\n2. **Easy Learning Curve**: Uses syntax similar to Flutter, allowing mobile developers to easily adapt to the web environment while leveraging a powerful web-based rendering engine.\n\n3. **High Performance**: The optimized rendering pipeline ensures smooth performance even with complex, data-intensive visualizations.\n\n4. **Flexibility**: Abstracts SVG and Canvas manipulation, allowing developers to focus on business logic while the rendering engine handles the low-level drawing operations.\n\n5. **Renderer Selection**: Can choose between SVG and Canvas renderers as needed, meeting various graphic requirements and allowing for the best performance in different scenarios.\n\n6. **Reusability**: Increases code reusability through a component-based approach, enabled by the underlying rendering engine's architecture.\n\n\n## Contributing\n\nFlitter is an open-source project. We welcome all forms of contributions including bug reports, feature suggestions, and pull requests. For more details, please visit [Discord](https://discord.gg/kUZp4SaHzF) \n\n## License\n\nFlitter is provided under the MIT license. \n\n## Learn More\n\nFor detailed documentation and examples, visit the [Flitter Official Documentation](https://flitter.dev).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeursyphus%2Fflitter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeursyphus%2Fflitter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeursyphus%2Fflitter/lists"}