{"id":30358924,"url":"https://github.com/bryanbill/atomify","last_synced_at":"2025-08-19T11:14:56.298Z","repository":{"id":304020449,"uuid":"996263008","full_name":"bryanbill/atomify","owner":"bryanbill","description":"Atomify is an idiomatic Dart library for building web applications with a laser focus on simplicity and reactivity","archived":false,"fork":false,"pushed_at":"2025-08-17T08:39:04.000Z","size":145,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-17T10:19:19.461Z","etag":null,"topics":["dart","web"],"latest_commit_sha":null,"homepage":"https://github.com/bryanbill/atomify/blob/main/docs.md","language":"Dart","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/bryanbill.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2025-06-04T17:37:45.000Z","updated_at":"2025-08-17T08:39:07.000Z","dependencies_parsed_at":"2025-07-10T23:33:01.551Z","dependency_job_id":"e4043d18-1f2c-466b-a367-e964db7f8efb","html_url":"https://github.com/bryanbill/atomify","commit_stats":null,"previous_names":["bryanbill/atomify"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bryanbill/atomify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanbill%2Fatomify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanbill%2Fatomify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanbill%2Fatomify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanbill%2Fatomify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bryanbill","download_url":"https://codeload.github.com/bryanbill/atomify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanbill%2Fatomify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271143398,"owners_count":24706346,"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","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["dart","web"],"created_at":"2025-08-19T11:14:55.595Z","updated_at":"2025-08-19T11:14:56.286Z","avatar_url":"https://github.com/bryanbill.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧪 Atomify\n\n\u003e **Small. Reactive. Simple.**\n\nAtomify is an idiomatic Dart library for building web applications with a laser focus on simplicity and reactivity. Atomify breaks down UI development into atomic, composable elements that are both lightweight and powerful.\n\n## Documentation\n[Atomify Documentation](docs.md)\n\n## ✨ Why Atomify?\n\n- **🪶 Minimal Footprint**: Built to be lightweight without sacrificing functionality\n- **⚡ Reactive by Design**: State changes automatically trigger UI updates\n- **🧩 Atomic Components**: Everything is a composable `Box` - from simple text to complex layouts\n- **📦 Zero Dependencies**: Only depends on `web` and `cssify` packages\n- **🎯 Idiomatic Dart**: Leverages Dart's strengths for clean, readable code\n\n## 🚀 Quick Start\n\n### Installation\n\nAdd Atomify to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  atomify: ^0.1.0\n```\n\n### Hello World\n\n```dart\nimport 'package:atomify/atomify.dart';\n\nvoid main() {\n  App(\n    children: [\n      Container(\n        children: [\n          Text('Hello, Atomify! 👋'),\n        ],\n      ),\n    ],\n  ).run();\n}\n```\n\n## 🧱 Core Concepts\n\n### Everything is a Box\n\nIn Atomify, every UI element inherits from `Box`. This atomic approach ensures consistency and composability:\n\n```dart\n// Text is a Box\nText('Hello World')\n\n// Button is a Box  \nButton(Text('Click me'), onClick: (e) =\u003e print('Clicked!'))\n\n// Container is a Box that holds other Boxes\nContainer(\n  children: [\n    Text('Title'),\n    Button(Text('Action')),\n  ],\n)\n```\n\n### Reactive State Management\n\nAtomify makes reactivity effortless with `ReactiveRef` and `Reactive` widgets:\n\n```dart\nvoid main() {\n  final counterRef = ReactiveRef\u003cint\u003e(0);\n  \n  App(\n    children: [\n      Container(\n        children: [\n          Reactive\u003cint\u003e(\n            ref: counterRef,\n            builder: (count) =\u003e Text('Count: $count'),\n          ),\n          Button(\n            Text('Increment'),\n            onClick: (e) =\u003e counterRef.emit((counterRef.state ?? 0) + 1),\n          ),\n        ],\n      ),\n    ],\n  ).run();\n}\n```\n\n### Page Navigation\n\nBuilt-in page routing that's simple yet powerful:\n\n```dart\nfinal pageRef = PageRef();\n\nPage(\n  ref: pageRef,\n  pages: [\n    Container(id: 'home', children: [Text('Home Page')]),\n    Container(id: 'about', children: [Text('About Page')]),\n  ],\n)\n\n// Navigate programmatically\npageRef.goTo('about');\n```\n\n## 🎨 Styling\n\nAtomify integrates seamlessly with the `cssify` package for type-safe CSS:\n\n```dart\nimport 'package:atomify/atomify.dart';\n\nList\u003cCssify\u003e styles = [\n    Cssify.create(\".my-container\", {\n        \"base\": {\n            \"style\": {\n                \"background-color\": \"#f0f0f0\",\n                \"padding\": \"20px\",\n                \"border-radius\": \"8px\",\n            },\n            \"state\": {\n                \"hover\": {\n                    \"background-color\": \"#e0e0e0\",\n                },\n            }\n        },\n        \"md\": {\n            \"style\": {\n                \"padding\": \"30px\",\n            }\n        },\n    })\n];\n\nuseCss(styles);\nContainer(\n  className: 'my-container',\n  children: [\n    Text('Styled content'),\n  ],\n);\n```\n\n## 📦 Available Elements\n\nAtomify provides a rich set of atomic elements:\n\n- **Layout**: `Container`, `Box`\n- **Text**: `Text`\n- **Interactive**: `Button`, `Input`, `Link`\n- **Data**: `Table`\n- **Async**: `Async` (for handling Future data)\n- **Progress**: `Progress` indicators\n- **Reactive**: `Reactive` (for state-driven UI)\n\n## 🧩 Creating your own Box\nTo create your own custom Box, simply extend the `Box` class and implement the `render` method:\n\n```dart\nimport 'package:atomify/atomify.dart';\n\nclass CustomBox extends Box {\n  // Pass child \n  final Box? child;\n  ... // Define any properties you need\n  CustomBox({\n    this.child,\n    super.id,\n    super.className,\n    ... other properties,\n  }): super(tag: 'custom-box');\n\n  @override\n  HTMLElement render() {\n    final element = super.render();\n\n    if(child != null) {\n      element.append(child!.render());\n    }\n\n    return element;\n  }\n}\n\n\n\n## 🏗️ Architecture\n\n```\nApp\n├── Container (Layout)\n│   ├── Text (Content)\n│   ├── Button (Interactive)\n│   └── Reactive (State-driven)\n│       └── Builder Function\n└── Page (Navigation)\n    ├── Route 1\n    ├── Route 2\n    └── Route N\n```\n\n## 🎯 Real-World Example\n\n```dart\nimport 'package:atomify/atomify.dart';\n\nvoid main() {\n  final todoRef = ReactiveRef\u003cList\u003cString\u003e\u003e([]);\n  final inputRef = InputRef();\n\n  App(\n    children: [\n      Container(\n        className: 'todo-app',\n        children: [\n          Text('📝 Todo App', className: 'title'),\n          \n          Container(\n            className: 'input-section',\n            children: [\n              Input(\n                ref: inputRef,\n                placeholder: 'Add a new task...',\n              ),\n              Button(\n                Text('Add'),\n                onClick: (e) {\n                  final value = inputRef.value;\n                  if (value.isNotEmpty) {\n                    todoRef.value = [...todoRef.value, value];\n                    inputRef.clear();\n                  }\n                },\n              ),\n            ],\n          ),\n          \n          Reactive\u003cList\u003cString\u003e\u003e(\n            ref: todoRef,\n            builder: (todos) =\u003e Container(\n              className: 'todo-list',\n              children: todos.map((todo) =\u003e \n                Container(\n                  className: 'todo-item',\n                  children: [Text(todo)],\n                )\n              ).toList(),\n            ),\n          ),\n        ],\n      ),\n    ],\n  ).run(target: \"#root\", beforeRender: (){\n    // Optional: Any setup before rendering\n  });\n}\n```\n\n## 📚 Philosophy\n\nAtomify embraces the principle that **simple tools create powerful applications**. By focusing on:\n\n1. **Atomic Design**: Small, reusable components\n2. **Reactive Patterns**: Automatic UI updates from state changes  \n3. **Minimal API Surface**: Less to learn, more to build\n4. **Type Safety**: Leverage Dart's strong typing\n\nWe enable developers to build robust web applications without the complexity traditionally associated with web frameworks.\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) for details.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eBuilt with ❤️ and Dart\u003c/strong\u003e\u003cbr\u003e\n  \u003cem\u003eMaking web development atomic, one component at a time.\u003c/em\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryanbill%2Fatomify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbryanbill%2Fatomify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryanbill%2Fatomify/lists"}