{"id":23105706,"url":"https://github.com/luk3d/flutjs","last_synced_at":"2025-07-19T02:33:16.234Z","repository":{"id":57700079,"uuid":"453825024","full_name":"LUK3D/Flutjs","owner":"LUK3D","description":"JavaScript framework for creating beautiful, fast and lightweight websites Inspired by flutter ☜(ﾟヮﾟ☜) ","archived":false,"fork":false,"pushed_at":"2022-09-14T00:20:55.000Z","size":567,"stargazers_count":28,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-04T16:25:43.224Z","etag":null,"topics":["flutter","front-end","javascript","javascript-framework","single-page-app"],"latest_commit_sha":null,"homepage":"https://www.flutjs.luk3d.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LUK3D.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-30T23:06:23.000Z","updated_at":"2023-08-15T09:37:45.000Z","dependencies_parsed_at":"2023-01-18T06:45:49.596Z","dependency_job_id":null,"html_url":"https://github.com/LUK3D/Flutjs","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/LUK3D/Flutjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LUK3D%2FFlutjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LUK3D%2FFlutjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LUK3D%2FFlutjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LUK3D%2FFlutjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LUK3D","download_url":"https://codeload.github.com/LUK3D/Flutjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LUK3D%2FFlutjs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265876963,"owners_count":23842956,"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":["flutter","front-end","javascript","javascript-framework","single-page-app"],"created_at":"2024-12-17T00:54:15.679Z","updated_at":"2025-07-19T02:33:16.216Z","avatar_url":"https://github.com/LUK3D.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Flutjs Logo](./Logo.svg)\n\n# Welcome to Flutjs project 😀\n\nFlutjs is a javascript framework for creating beautiful, fast and lightweight websites.\nAs the name suggests, Flutejs is based on Flutter for its simplicity and easy learning curve and the ability to easily extend.\n\n## Getting Stated:\n\nTo get start with Flutjs just follow the steps below:\n\n### With boilerplate\n\nJust go to [Flutjs Template Ts](https://github.com/LUK3D/flutjs-template-ts) repository and click on \"Use This repository\" and you are good to go.\n\n\n### With Nodejs:\n\n1 - Install the latest version of Nodejs.\n\n2 - Start new nodejs project\n\n  `npm init`\n\n3 - Install Flutjs with npm or yarn:\n\n\u003enpm\n\n`npm i @luk3d/flutjs`\n\u003eyarn\n\n`yarn add @luk3d/flutjs`\n\nCongrats!! 🎉 You have Installed Flujs successfully on your project. Now jump to hello world section the create a simple Flutjs website/webApp.\n\n\n\u003cimg src=\"./docs/screenshots/flutjsCounterApp.png\" width=\"500px\"\u003e\n\n\n\n\n### With Vanilla JS:\n\n\nAdd this link to the header tag of your html page:\n```html\n\u003cscript type=\"moduel\" src=\"https://cdn.jsdelivr.net/npm/@luk3d/flutjs@0.2.0/dist/flutjs.min.js\"\u003e\u003c/script\u003e\n```\n\u003eNOTE: you need to check the latest vesio here:\n[Flutjs Latest](https://www.jsdelivr.com/package/npm/@luk3d/flutjs?path=dist)\n\n\n## Simple Counter App: ⚡\n\n```js\n/**Basic Flutjs App With Tailwind */\n\n\nWindiApp({\n  title: \"Flutjs test\",\n\n  home: Scaffold({\n    appBar: AppBar({\n      backgroundColor: Colors.Blue[500],\n      foregroundColor: Colors.Gray[100],\n      title: Text(\"Welcome to Flutjs\"),\n      elevation: 2,\n    }),\n    body: Stack({\n      children: [\n        Container({\n          color: Colors.Gray[50],\n          width: 100,\n          height: 100,\n          child: Expanded({\n            child: Column({\n              mainAxisAlignment: MainAxisAlignment.center,\n              crossAxisAlignment: CrossAxisAlignment.center,\n              children: [\n                //Binding The widget to the State\n                counterState.Bind(\n                  Container({\n                    key: \"counter\",\n                    child: Text(\"{counter}\", {\n                      textStyle: TextStyle({\n                        fontWeight: FontWeight.w700,\n                        fontSize: 40,\n                        color: Colors.Gray[500],\n                      }),\n                    }),\n                  })\n                ),\n              ],\n            }),\n          }),\n        }),\n        Container({\n          key: \"addButton\",\n          child: Positioned({\n            bottom: 20,\n            right: 20,\n            child: Container({\n              padding: EdgeInsets.symmetric({ horizontal: 13, vertical: 20 }),\n              decoration: BoxDecoration({\n                color: Colors.Sky[500],\n                borderRadius: BorderRadius.all(Radius.circular(100)),\n              }),\n              child: Text(\"+\", {\n                textStyle: TextStyle({\n                  fontWeight: FontWeight.w600,\n                  fontSize: 20,\n                  color: Colors.White,\n                }),\n              }),\n            }),\n          }),\n        }),\n      ],\n    }),\n  }),\n );\n\n```\n\n\u003e NOTE: Just like in Flutter, every component is a widget...\n\n\n\n## UPDATES TABLE 🚀\n\nDate | Updates|\n-|-|\n 19-02-2022| `Text Widget` now supports `textStyle` property. Once compiled all values added on the textStyle attr will be translated to css attr of the text element |\n 16-02-2022| The `App Widget` now fills the width and height of the screen by using 100% of `vw` and `vh` `css` units |\n 16-02-2022| The `Extended Widget` now replaces himself with his child once compiled |\n 16-02-2022| `Width` and `Height`  Where added on the widget constructor. |\n 16-02-2022| Html output improvement |\n\n  \n\n## Under Development:🚧\n\n- A Set of widgets like Material Design components.\n- Route management\n- State management\n- Decorations (TextStyle, BoxDecoration etx...)\n- Icons Library..\n- Routing\n- Custom cli tool for fast project creation.\n- VsCode Extension for auto completion and snippets for fast coding...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluk3d%2Fflutjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluk3d%2Fflutjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluk3d%2Fflutjs/lists"}