{"id":26112954,"url":"https://github.com/swssr/flowui","last_synced_at":"2026-04-09T07:56:07.958Z","repository":{"id":281511069,"uuid":"945381752","full_name":"swssr/flowUI","owner":"swssr","description":"A SwiftUI-inspired library for building web interfaces with a fluent API.","archived":false,"fork":false,"pushed_at":"2025-03-09T16:03:17.000Z","size":59,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-09T16:25:24.526Z","etag":null,"topics":["declarative","frontend","swiftui","typescript","ui","web-components"],"latest_commit_sha":null,"homepage":"https://flow-ui.swssr.co","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/swssr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-03-09T09:34:13.000Z","updated_at":"2025-03-09T16:03:20.000Z","dependencies_parsed_at":"2025-03-09T16:25:35.094Z","dependency_job_id":"93f68acd-01fc-4d5e-adc5-5f73773f4d41","html_url":"https://github.com/swssr/flowUI","commit_stats":null,"previous_names":["swssr/flowui"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swssr%2FflowUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swssr%2FflowUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swssr%2FflowUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swssr%2FflowUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swssr","download_url":"https://codeload.github.com/swssr/flowUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242786643,"owners_count":20185012,"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":["declarative","frontend","swiftui","typescript","ui","web-components"],"created_at":"2025-03-10T03:54:09.694Z","updated_at":"2025-12-31T00:46:54.386Z","avatar_url":"https://github.com/swssr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FlowUI\n\nA SwiftUI-inspired library for building web interfaces with a fluent API.\n- v0.0.5\n\n\u003e All wishful thing for now :')\n\n```typescript\nimport { VStack, Text, Button, State, mount } from '@notswssr/flowui';\n\nfunction Counter() {\n  const count = new State(0);\n  \n  return VStack(\n    Text(\"Counter\")\n      .font(.headline)\n      .padding(\"bottom\", 20),\n      \n    Button(\"+\")\n      .onTap(() =\u003e count.value++)\n      .padding(10),\n      \n    Text(\"0\")\n      .bind(count, (value, component) =\u003e {\n        component.text(value.toString());\n      })\n  );\n}\n\nmount(Counter(), \"#app\");\n```\n\nA bit more advance counter with new two data binding\n```typescript\nfunction CounterExample() {\n    const counter = new State(0);\n\n    const CountButton = (label: string) =\u003e Button(label)\n        .padding(\"all\", 10)\n        .foregroundColor(Color.white)\n        .backgroundColor(Color.blue)\n        .frame({ width: \"max-content\" })\n        .cornerRadius(6)\n\n    return HStack(\n        CountButton(\"-\")\n            .onTap(() =\u003e counter.value--),\n\n        Text(\"Count\")\n            .foregroundColor(Color.red)\n            .bindTo(counter),\n\n        CountButton(\"+\")\n            .onTap(() =\u003e counter.value++),\n\n        Divider(),\n\n        // You can now transform state into a component e.g text node and also format the value like below\n        counter\n            .format(x =\u003e `Hello, the count is: ${x}`)\n            .to(Text(\"\")),\n    )\n    .frame({ width: \"100%\" })\n}\n\n```\n\n## Features\n\n- 🔗 **Fluent API**: Chainable, SwiftUI-inspired syntax\n- 🧩 **Component Composition**: Build complex UIs from simple components\n- 🔄 **State Management**: Reactive state with simple bindings\n- 🎨 **Theming System**: Light/dark modes and customizable themes\n- ✨ **Animations**: Transitions and animations for dynamic interfaces\n- 📱 **Responsive Design**: Mobile-first grid and layout components\n- 🚀 **No Build Step Required**: Use directly in the browser\n- 🔍 **TypeScript Powered**: Full type safety and autocompletion\n\n## Installation\n\n```bash\nnpm install @notswssr/flowui\n```\n\n## Basic Usage\n\n### Creating a Simple Component\n\n```typescript\nimport { Text, Button, VStack, mount } from '@notswssr/flowui';\n\nfunction HelloWorld() {\n  return VStack(\n    Text(\"Hello, World!\")\n      .font(Font.headline())\n      .foregroundColor(Color.blue),\n    Button(\"Click Me\")\n      .onTap(() =\u003e alert(\"Button clicked!\"))\n      .padding(10)\n  )\n  .padding(20)\n  .backgroundColor(Color.gray.opacity(0.1))\n  .cornerRadius(10);\n}\n\nmount(HelloWorld(), \"#app\");\n```\n\n### State Management\n\n```typescript\nimport { Text, Button, VStack, State, mount } from '@notswssr/flowui';\n\nfunction Counter() {\n  // Create state\n  const count = new State(0);\n  \n  // Build UI\n  return VStack(\n    Text(\"Counter\")\n      .font(Font.headline())\n      .padding(\"bottom\", 20),\n      \n    Button(\"Increment\")\n      .onTap(() =\u003e count.value++)\n      .padding(10),\n      \n    Text(\"0\")\n      .bind(count, (value, component) =\u003e {\n        component.text(value.toString());\n      })\n  );\n}\n\nmount(Counter(), \"#app\");\n```\n\n## Core Components\n\n### Layout Components\n\n- **VStack**: Vertical stack layout\n- **HStack**: Horizontal stack layout\n- **ZStack**: Depth stack for overlapping elements\n- **Spacer**: Flexible space\n- **Grid**: Responsive grid layout\n- **ScrollView**: Scrollable container\n\n```typescript\nVStack(\n  Text(\"Header\"),\n  HStack(\n    Text(\"Left\"),\n    Spacer(),\n    Text(\"Right\")\n  ),\n  Grid({ xs: 1, md: 2 }, 16, [\n    Card({ title: \"Card 1\", content: Text(\"Content 1\") }),\n    Card({ title: \"Card 2\", content: Text(\"Content 2\") })\n  ])\n)\n```\n\n### Basic Components\n\n- **Text**: For displaying text\n- **Button**: Interactive button\n- **TextField**: Text input field\n- **Toggle**: Boolean toggle switch\n- **Image**: Image display with loading state\n\n```typescript\nVStack(\n  Text(\"Login Form\")\n    .font(Font.headline()),\n    \n  TextField(\"Username\")\n    .padding(\"bottom\", 10),\n    \n  TextField(\"Password\")\n    .padding(\"bottom\", 20),\n    \n  Toggle(rememberMe)\n    .padding(\"bottom\", 20),\n    \n  Button(\"Sign In\")\n    .padding(10)\n    .backgroundColor(Color.blue)\n    .cornerRadius(8)\n)\n```\n\n### Advanced Components\n\n- **Card**: Container with header, content, and footer\n- **List**: Efficient list for rendering collections\n- **Alert**: Contextual alerts with various types\n- **Modal**: Modal dialog windows\n- **TabView**: Tabbed interface\n- **Divider**: Horizontal rule separator\n- **Form**: Form container with submission handling\n\n```typescript\nCard({\n  title: \"User Profile\",\n  subtitle: \"Personal information\",\n  content: VStack(\n    Image(\"profile.jpg\", { width: 100, height: 100 })\n      .cornerRadius(50),\n      \n    Text(\"John Doe\")\n      .font(Font.headline()),\n      \n    Text(\"Software Developer\")\n      .foregroundColor(Color.gray)\n  ),\n  footer: Button(\"Edit Profile\")\n})\n```\n\n## Style Modifiers\n\nApply styles using chainable modifiers:\n\n```typescript\nText(\"Hello World\")\n  .font(Font.headline())\n  .foregroundColor(Color.blue)\n  .padding(20)\n  .backgroundColor(Color.gray.opacity(0.1))\n  .cornerRadius(10)\n  .border(Color.blue, 2)\n  .frame({ width: 200, height: 100 })\n```\n\nCommon modifiers:\n\n- **padding()**: Add space around content\n- **backgroundColor()**: Set background color\n- **foregroundColor()**: Set text color\n- **font()**: Set font style and size\n- **cornerRadius()**: Round corners\n- **border()**: Add border\n- **frame()**: Set dimensions\n- **style()**: Apply custom CSS\n\n## Animation and Transitions\n\nAdd animations to any component:\n\n```typescript\nButton(\"Animated Button\")\n  .onTap(() =\u003e performAction())\n  .animation(Animation.spring({ stiffness: 100, damping: 10 }))\n```\n\nAdd transitions for enter/exit animations:\n\n```typescript\nText(\"Fade In Text\")\n  .transition(Transition.opacity())\n```\n\n## Theming System\n\n### Using Themes\n\n```typescript\nimport { useTheme, VStack, Text, Button } from '@notswssr/flowui';\n\nfunction ThemeDemo() {\n  const { theme, toggleDarkMode } = useTheme();\n  \n  return VStack(\n    Text(`Current Theme: ${theme.name}`)\n      .foregroundColor(theme.colors.primary),\n      \n    Button(theme.isDark ? \"Switch to Light\" : \"Switch to Dark\")\n      .onTap(() =\u003e toggleDarkMode())\n  );\n}\n```\n\n### Creating Custom Themes\n\n```typescript\nimport { createTheme, Color, applyThemeToDocument } from '@notswssr/flowui';\n\nconst customTheme = createTheme({\n  name: 'Custom Theme',\n  colors: {\n    primary: new Color('#6200EE'),\n    secondary: new Color('#03DAC6'),\n    background: new Color('#FAFAFA')\n  }\n});\n\n// Apply the custom theme\napplyThemeToDocument(customTheme);\n```\n\n## Advanced Usage\n\n### Custom Components\n\nCreate your own components by composing existing ones:\n\n```## Coming soon``\n\n\n## Development\n\n### Quick Start\n\n1. Clone the repository\n2. Install dependencies: `pnpm install`\n3. Start development server: `pnpm dev:all`\n\nThis will:\n- Start the TypeScript compiler in watch mode\n- Launch a development server at http://localhost:5173\n\n### Development Commands\n\n- `pnpm dev` - Start the development server only\n- `pnpm watch` - Start TypeScript in watch mode only\n- `pnpm dev:all` - Start both simultaneously\n- `pnpm build` - Build the library\n- `pnpm test` - Run tests\n\n### How to Test Components\n\n1. Add your test components to `dev/app.ts`\n2. Create containers in `dev/index.html` \n3. Mount your components to test them\n4. Changes to source files will automatically reload the page\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswssr%2Fflowui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswssr%2Fflowui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswssr%2Fflowui/lists"}