{"id":20292842,"url":"https://github.com/codelessly/codelesslyapi","last_synced_at":"2025-04-11T11:24:18.399Z","repository":{"id":157932620,"uuid":"617035908","full_name":"Codelessly/CodelesslyAPI","owner":"Codelessly","description":"Codelessly API reference","archived":false,"fork":false,"pushed_at":"2024-04-12T06:05:04.000Z","size":1013,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-12T14:21:11.325Z","etag":null,"topics":["codelessly","dart","dart-library","dartlang","flutter","flutter-apps","flutter-package","flutter-ui"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/codelessly_api","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Codelessly.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}},"created_at":"2023-03-21T15:18:09.000Z","updated_at":"2024-04-15T16:26:49.242Z","dependencies_parsed_at":"2023-12-26T17:30:54.155Z","dependency_job_id":"2572fe82-4df1-4b20-8f5e-4bebc901f547","html_url":"https://github.com/Codelessly/CodelesslyAPI","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FCodelesslyAPI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FCodelesslyAPI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FCodelesslyAPI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FCodelesslyAPI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Codelessly","download_url":"https://codeload.github.com/Codelessly/CodelesslyAPI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248382615,"owners_count":21094561,"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":["codelessly","dart","dart-library","dartlang","flutter","flutter-apps","flutter-package","flutter-ui"],"created_at":"2024-11-14T15:19:38.607Z","updated_at":"2025-04-11T11:24:18.380Z","avatar_url":"https://github.com/Codelessly.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"**This is a lower-level package for constructing an abstract, universal data representation of UI. If you're looking for\nthe developer SDK, use the [Codelessly CloudUI™ SDK](https://pub.dev/packages/codelessly_sdk).**\n\n# Codelessly API\n\n\u003e Flutter's layouts and widgets represented as models and JSON data.\n\nThis package is used by the Codelessly Editor and CloudUI SDK to render Flutter Widgets. These APIs enable developers to\ninteract with and manipulate user interfaces in a structured manner. It can be used to define components, layouts,\ninteractions, and styles, among other things, programmatically.\n\n## About\n\n\u003e User Interfaces (UI) as data.\n\nThis lower-level package establishes a foundation for an abstract, universally interpretable data representation of UI.\nThe API is language-agnostic, written in pure Dart with no Flutter dependencies.\n\nThis universal approach allows for broad, diverse applications across different programming languages. The result is a\nlibrary that supports the construction of complex UI structures, regardless of the programming language or development\nenvironment.\n\nFor example, we've translated this library to Javascript and Typescript and created a prototype SDK for building native\nweb UIs. We were able to deploy the same UI to Flutter and HTML simultaneously.\n\nOur goal is to continuously build a set of fundamental UI constructs that can express UI in HTML, SwiftUI, Android\nCompose, and eventually AI.\n\n## Quick Start\n\nThis package contains tools to create custom `BaseNodes`. To convert a custom `BaseNode` into UI, see the language\nspecific Flutter implementation in the [Codelessly Cloud UI SDK](https://pub.dev/packages/codelessly_sdk) package.\n\nThis is how you can create a custom `BaseNode`:\n\n```dart\nimport 'package:codelessly_api/codelessly_api.dart';\nimport 'package:codelessly_json_annotation/codelessly_json_annotation.dart';\n\npart 'custom_node.g.dart';\n\n@JsonSerializable()\nclass CustomNode extends BaseNode {\n  @override\n  final String type = 'custom_node';\n\n  MyCoolNode({\n    required super.id,\n    required super.name,\n    required super.basicBoxLocal,\n  });\n\n  factory CustomNode.fromJson(Map json) =\u003e _$CustomNodeFromJson(json);\n\n  @override\n  Map toJson() =\u003e _$CustomNodeToJson(this);\n}\n```\n\nAll nodes must extend `BaseNode`. Please refer to the documentation inside `BaseNode` for more information.\n\nThen, register your node with the `NodeJsonConverter` so that it can be properly deserialized from json. The\nNodeJsonConverter will deserialize any registered nodes into their proper types.\n\n```\nNodeJsonConverter.registerNode('custom_node', CustomNode.fromJson);\n```\n\nFor more examples, see [\n`codelessly_api/lib/api/nodes`](https://github.com/Codelessly/CodelesslyAPI/tree/main/lib/src/api/nodes)\n\n## Key Concepts\n\n### Base Classes\n\nThe base classes provided by the CodelesslyAPI include `Vec`, `RectC`, `SizeC`, `AlignC`, and others. They mirror\nFlutter's own models and offer functionalities that represent essential building blocks for Flutter widgets.\n\nThese classes encapsulate key properties and behaviors needed for vector representations (`Vec`), rectangular shapes (\n`RectC`), sizes (`SizeC`), and alignment specifications (`AlignC`). Each class is equipped with serialization and\ndeserialization capabilities, allowing them to be conveniently converted to and from JSON format. These classes\ncollectively provide a foundation for defining and manipulating UI elements in Flutter applications.\n\nClasses that mirror Flutter tend to be suffixed with a `C` for `Codelessly` or `Model` to\ndifferentiate them from their Flutter counterparts like `RectC`.\n\n- **Vec**: This class represents a two-dimensional vector with x and y coordinates.\n- **RectC**: This class represents a rectangle with a top-left position and a size. The position is represented as a\n  `Vec` object, while the size is represented as a `SizeC` object.\n\n### Components\n\nComponents represent the building blocks of the user interface. They can be anything from a single button to a complex\nform or even an entire webpage.\n\n- `ComponentModel`: A single component that holds properties of the component (`type`), its unique identifier (`id`),\n  and actions associated with it (`action`).\n\n### Actions\n\nActions define what should happen when a user interacts with a component in a certain way (for example, clicking a\nbutton or submitting a form).\n\n- `ActionModel`: Holds information about an action to perform on a user interaction. It defines the type of the action (\n  `type`), which can be things like navigating to a page, opening a link, submitting a form, etc.\n\n### Paint\n\nThe `PaintModel` is used to define styles that can be applied to components. It can represent a solid color, gradient,\nor image texture.\n\n- `PaintModel`: Defines the style properties such as the type of paint (`type`), its visibility (`visible`), and its\n  opacity (`opacity`), among others. Depending on the type of paint, it might have properties like color (`color`),\n  gradient transform (`gradientTransform`), gradient stops (`gradientStops`), or image transform (`imageTransform`).\n\n## Contributing\n\nContributions are welcome! Please open an issue to start a discussion.\n\n## Acknowledgments\n\nSpecial thanks to the Flutter community for providing the inspiration and foundation for this project.\n\n## Contact Us\n\nYou can contact us on our [website](https://codelessly.com/) or join us on\nour [Discord Server](https://discord.gg/Bzaz7zmY6q).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelessly%2Fcodelesslyapi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodelessly%2Fcodelesslyapi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelessly%2Fcodelesslyapi/lists"}