You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+44-21Lines changed: 44 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,26 +1,35 @@
1
-
**This is a lower-level package for constructing an abstract, universal data representation of UI. If you're looking for the developer SDK, use the [Codelessly CloudUI™ SDK](https://pub.dev/packages/codelessly_sdk).**
1
+
**This is a lower-level package for constructing an abstract, universal data representation of UI. If you're looking for
2
+
the developer SDK, use the [Codelessly CloudUI™ SDK](https://pub.dev/packages/codelessly_sdk).**
2
3
3
4
# Codelessly API
4
5
5
-
> Flutter's layouts and widgets represented as models and JSON data.
6
+
> Flutter's layouts and widgets represented as models and JSON data.
6
7
7
-
This package is used by the Codelessly Editor and CloudUI SDK to render Flutter Widgets. These APIs enable developers to interact with and manipulate user interfaces in a structured manner. It can be used to define components, layouts, interactions, and styles, among other things, programmatically.
8
+
This package is used by the Codelessly Editor and CloudUI SDK to render Flutter Widgets. These APIs enable developers to
9
+
interact with and manipulate user interfaces in a structured manner. It can be used to define components, layouts,
10
+
interactions, and styles, among other things, programmatically.
8
11
9
12
## About
10
13
11
14
> User Interfaces (UI) as data.
12
15
13
-
This lower-level package establishes a foundation for an abstract, universally interpretable data representation of UI. The API is language-agnostic, written in pure Dart with no Flutter dependencies.
16
+
This lower-level package establishes a foundation for an abstract, universally interpretable data representation of UI.
17
+
The API is language-agnostic, written in pure Dart with no Flutter dependencies.
14
18
15
-
This universal approach allows for broad, diverse applications across different programming languages. The result is a library that supports the construction of complex UI structures, regardless of the programming language or development environment.
19
+
This universal approach allows for broad, diverse applications across different programming languages. The result is a
20
+
library that supports the construction of complex UI structures, regardless of the programming language or development
21
+
environment.
16
22
17
-
For example, we've translated this library to Javascript and Typescript and created a prototype SDK for building native web UIs. We were able to deploy the same UI to Flutter and HTML simultaneously.
23
+
For example, we've translated this library to Javascript and Typescript and created a prototype SDK for building native
24
+
web UIs. We were able to deploy the same UI to Flutter and HTML simultaneously.
18
25
19
-
Our goal is to continuously build a set of fundamental UI constructs that can express UI in HTML, SwiftUI, Android Compose, and eventually AI.
26
+
Our goal is to continuously build a set of fundamental UI constructs that can express UI in HTML, SwiftUI, Android
27
+
Compose, and eventually AI.
20
28
21
29
## Quick Start
22
30
23
-
This package contains tools to create custom `BaseNodes`. To convert a custom `BaseNode` into UI, see the language specific Flutter implementation in the [Codelessly Cloud UI SDK](https://pub.dev/packages/codelessly_sdk) package.
31
+
This package contains tools to create custom `BaseNodes`. To convert a custom `BaseNode` into UI, see the language
32
+
specific Flutter implementation in the [Codelessly Cloud UI SDK](https://pub.dev/packages/codelessly_sdk) package.
24
33
25
34
This is how you can create a custom `BaseNode`:
26
35
@@ -48,47 +57,61 @@ class CustomNode extends BaseNode {
48
57
}
49
58
```
50
59
51
-
All nodes must extend `BaseNode`. Please refer to the documentation inside `BaseNode` for more information.
60
+
All nodes must extend `BaseNode`. Please refer to the documentation inside `BaseNode` for more information.
52
61
53
-
Then, register your node with the `NodeJsonConverter` so that it can be properly deserialized from json. The NodeJsonConverter will deserialize any registered nodes into their proper types.
62
+
Then, register your node with the `NodeJsonConverter` so that it can be properly deserialized from json. The
63
+
NodeJsonConverter will deserialize any registered nodes into their proper types.
The base classes provided by the CodelesslyAPI include `Vec`, `RectC`, `SizeC`, `AlignC`, and others. They mirror Flutter's own models and offer functionalities that represent essential building blocks for Flutter widgets.
76
+
The base classes provided by the CodelesslyAPI include `Vec`, `RectC`, `SizeC`, `AlignC`, and others. They mirror
77
+
Flutter's own models and offer functionalities that represent essential building blocks for Flutter widgets.
66
78
67
-
These classes encapsulate key properties and behaviors needed for vector representations (`Vec`), rectangular shapes (`RectC`), sizes (`SizeC`), and alignment specifications (`AlignC`). Each class is equipped with serialization and deserialization capabilities, allowing them to be conveniently converted to and from JSON format. These classes collectively provide a foundation for defining and manipulating UI elements in Flutter applications.
79
+
These classes encapsulate key properties and behaviors needed for vector representations (`Vec`), rectangular shapes (
80
+
`RectC`), sizes (`SizeC`), and alignment specifications (`AlignC`). Each class is equipped with serialization and
81
+
deserialization capabilities, allowing them to be conveniently converted to and from JSON format. These classes
82
+
collectively provide a foundation for defining and manipulating UI elements in Flutter applications.
68
83
69
84
Classes that mirror Flutter tend to be suffixed with a `C` for `Codelessly` or `Model` to
70
85
differentiate them from their Flutter counterparts like `RectC`.
71
86
72
87
-**Vec**: This class represents a two-dimensional vector with x and y coordinates.
73
-
-**RectC**: This class represents a rectangle with a top-left position and a size. The position is represented as a `Vec` object, while the size is represented as a `SizeC` object.
88
+
-**RectC**: This class represents a rectangle with a top-left position and a size. The position is represented as a
89
+
`Vec` object, while the size is represented as a `SizeC` object.
74
90
75
91
### Components
76
92
77
-
Components represent the building blocks of the user interface. They can be anything from a single button to a complex form or even an entire webpage.
93
+
Components represent the building blocks of the user interface. They can be anything from a single button to a complex
94
+
form or even an entire webpage.
78
95
79
-
-`ComponentModel`: A single component that holds properties of the component (`type`), its unique identifier (`id`), and actions associated with it (`action`).
96
+
-`ComponentModel`: A single component that holds properties of the component (`type`), its unique identifier (`id`),
97
+
and actions associated with it (`action`).
80
98
81
99
### Actions
82
100
83
-
Actions define what should happen when a user interacts with a component in a certain way (for example, clicking a button or submitting a form).
101
+
Actions define what should happen when a user interacts with a component in a certain way (for example, clicking a
102
+
button or submitting a form).
84
103
85
-
-`ActionModel`: Holds information about an action to perform on a user interaction. It defines the type of the action (`type`), which can be things like navigating to a page, opening a link, submitting a form, etc.
104
+
-`ActionModel`: Holds information about an action to perform on a user interaction. It defines the type of the action (
105
+
`type`), which can be things like navigating to a page, opening a link, submitting a form, etc.
86
106
87
107
### Paint
88
108
89
-
The `PaintModel` is used to define styles that can be applied to components. It can represent a solid color, gradient, or image texture.
109
+
The `PaintModel` is used to define styles that can be applied to components. It can represent a solid color, gradient,
110
+
or image texture.
90
111
91
-
-`PaintModel`: Defines the style properties such as the type of paint (`type`), its visibility (`visible`), and its opacity (`opacity`), among others. Depending on the type of paint, it might have properties like color (`color`), gradient transform (`gradientTransform`), gradient stops (`gradientStops`), or image transform (`imageTransform`).
112
+
-`PaintModel`: Defines the style properties such as the type of paint (`type`), its visibility (`visible`), and its
113
+
opacity (`opacity`), among others. Depending on the type of paint, it might have properties like color (`color`),
114
+
gradient transform (`gradientTransform`), gradient stops (`gradientStops`), or image transform (`imageTransform`).
92
115
93
116
## Contributing
94
117
@@ -101,4 +124,4 @@ Special thanks to the Flutter community for providing the inspiration and founda
101
124
## Contact Us
102
125
103
126
You can contact us on our [website](https://codelessly.com/) or join us on
0 commit comments