{"id":20292841,"url":"https://github.com/codelessly/codelesslysdk","last_synced_at":"2025-10-13T16:19:39.798Z","repository":{"id":155092183,"uuid":"617054775","full_name":"Codelessly/CodelesslySDK","owner":"Codelessly","description":"Codelessly Cloud UI SDK","archived":false,"fork":false,"pushed_at":"2024-04-12T06:05:01.000Z","size":3634,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-12T15:06:29.805Z","etag":null,"topics":["cloud","cloud-ui","codelessly","dart","dart-library","dartlang","flutter","flutter-apps","flutter-package","flutter-ui","flutter-web","flutterdev"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/codelessly_sdk","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:59:16.000Z","updated_at":"2024-08-05T05:00:29.890Z","dependencies_parsed_at":"2023-10-16T16:44:48.836Z","dependency_job_id":"b0234757-2b5a-44d0-bb48-d00f2dfecb40","html_url":"https://github.com/Codelessly/CodelesslySDK","commit_stats":null,"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FCodelesslySDK","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FCodelesslySDK/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FCodelesslySDK/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FCodelesslySDK/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Codelessly","download_url":"https://codeload.github.com/Codelessly/CodelesslySDK/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248382637,"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":["cloud","cloud-ui","codelessly","dart","dart-library","dartlang","flutter","flutter-apps","flutter-package","flutter-ui","flutter-web","flutterdev"],"created_at":"2024-11-14T15:19:38.519Z","updated_at":"2025-10-13T16:19:34.754Z","avatar_url":"https://github.com/Codelessly.png","language":"Dart","readme":"![Codelessly Logo](packages/Codelessly-Logo-Text.png)\n\n# Codelessly CloudUI™ SDK\n\n[![Pub release](https://img.shields.io/pub/v/codelessly_sdk.svg?style=flat-square)](https://pub.dev/packages/codelessly_sdk) [![GitHub Release Date](https://img.shields.io/github/release-date/Codelessly/CodelesslySDK.svg?style=flat-square)](https://github.com/Codelessly/CodelesslySDK) [![GitHub issues](https://img.shields.io/github/issues/Codelessly/CodelesslySDK.svg?style=flat-square)](https://github.com/Codelessly/CodelesslySDK/issues) [![GitHub top language](https://img.shields.io/github/languages/top/Codelessly/CodelesslySDK.svg?style=flat-square)](https://github.com/Codelessly/CodelesslySDK)\n\n\u003e ### Dynamic UI and real-time updates for Flutter apps\n\n![Codelessly Publish UI](packages/Codelessly-Cover.png)\n\nSupercharge your Flutter apps with dynamic UI and real-time updates. Build and publish UI without code!\n\n- **Real-Time UI Updates:** Adjust your UI as often as you need, all in real-time. Adapt to trends, feedback, and\n  business needs on the fly.\n- **Intuitive UI Editor:** Easily create and update UI with our user-friendly Codelessly Editor.\n- **Empower Non-Technical Team Members:** Enable anyone on your team to build UI without learning how to code.\n\n## Quickstart\n\n[![Pub release](https://img.shields.io/pub/v/codelessly_sdk.svg?style=flat-square)](https://pub.dev/packages/codelessly_sdk)\n\n#### **Step 1: Import Library**\n\n```yaml\ncodelessly_sdk: ^latest_version\n```\n\n#### **Step 2: Initialize the SDK**\n\nInitialize Codelessly before calling `runApp()`.\n\n```dart\nvoid main() {\n  WidgetsFlutterBinding.ensureInitialized();\n\n  // Initialize SDK.\n  Codelessly.instance.initialize(\n    config: CodelesslyConfig(\n      authToken: AUTH_TOKEN,\n      isPreview: kDebugMode,\n    ),\n  );\n\n  runApp(const MyApp());\n}\n```\n\nThe `authToken`can be found for each project under `Publish \u003e Settings \u003e Settings`.\n\n#### **Step 3: Embed the CodelesslyWidget**\n\nEasily embed any design from the Codelessly Editor into your app using the `layoutID`.\n\n```dart\nCodelesslyWidget(\n  layoutID: LAYOUT_ID,\n)\n```\n\n**How to obtain a Layout ID**\n\n1. In the Codelessly Editor, select the **canvas** of your layout.\n2. Press the **Preview Icon** in the toolbar. ![CloudUI Preview Icon](packages/preview_icon.png)\n3. Copy the **layoutID**.\n\n![Codelessly Widget Code](packages/codelessly_widget_code.png)\n\n### Complete Example\n\nHere is a complete example:\n\n```dart\nimport 'package:codelessly_sdk/codelessly_sdk.dart';\n\nclass MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Codelessly SDK Example',\n      home: CodelesslyWidget(\n        layoutID: LAYOUT_ID,\n      ),\n    );\n  }\n}\n```\n\nThe `CodelesslyWidget` can be used like any other widget and embedded anywhere in your app. It can even be used to\nrender entire pages as the root widget!\n\nFrom dynamic forms to constantly changing sales and marketing pages, any design or layout can be streamed to your app\nvia the `CodelesslyWidget`.\n\nTo learn how to use the Codelessly editor to publish layouts, check out\nour [3-minute Quickstart Guide](https://docs.codelessly.com/getting-started/3-minute-quick-start).\n\n## Injecting Data\n\nCustomize Codelessly CloudUI™ widgets by passing data values into your layout. The UI will dynamically replace any\nvariables defined in the Codelessly editor with the provided values.\n\n```dart\nCodelesslyWidget(\n  layoutID: LAYOUT_ID,\n  data: {\n    // A map of variables, Map\u003cString, dynamic\u003e\n  },\n),\n```\n\n#### **Step 1:** Define variables in the Codelessly Editor\n\nUse the `${}` templating syntax in input fields to link data from the Codelessly editor to layouts as shown below.\n\n![Data](packages/ui_with_data_linking.png)\n\nTo link the title of a text widget to the `title` variable in the Codelessly editor, put `${title}` in the text widget’s\ntext field.\n\n\u003e **Note:** All data passed into the Codelessly widget is stored in the `data` object.\n\u003e\n\u003e You can access the `title` variable with `${title}` or `${data.title}`.\n\u003e\n\u003e Use `data` to reference nested JSON payloads. Example: ${data.productData.nested.json.path}\n\n#### **Step 2:** Pass data to the layout from your app.\n\n```dart\nCodelesslyWidget(\n  layoutID: LAYOUT_ID,\n  data: {\n    'title': 'Fast Performance',\n    'description': 'Complete projects on time and easily with our APIs. Get blazing fast performance!',\n  },\n),\n```\n\nHere, `data` parameter is a map of type `Map\u003cString, dynamic\u003e` which is used to populate information in the layout UI\nwhere `data`\nvariable is used from the Codelessly editor. The layout UI will automatically update to reflect the new data whenever\nthe `data` is updated.\n\nThis how it looks with populated data:\n\n![Data](packages/ui_with_populated_data.png)\n\n## Functions\n\nCodelessly SDK also supports calling functions for user actions such as onClick, onLongPress, etc.\n\n```dart\nCodelesslyWidget(\n  layoutID: LAYOUT_ID,\n  functions: {\n    'functionName': (context, reference, params) {\n      // TODO: Implement your function here\n    }),\n  },\n),\n```\n\n#### **Step 1:** Add a \"Call Function\" Action in the Codelessly Editor\n\nHere, we tell the button to call the native `onNextButtonClicked` function when pressed.\n\n![Defining call function action](packages/defining_call_function_action.png)\n\nIn the Codelessly Editor, you can easily add an Action to a widget. Use the `Call Function` action to invoke\n`onNextButtonClicked`.\n\n1. Switch to the `Develop` tab.\n2. Select a widget to open the `Actions` panel.\n2. Click on the `+` button to add a new action.\n3. Select `Call Function` from the list of actions.\n4. Click on the `Settings` button to bring up the `Action Settings` popup.\n5. Reference the function name in the `Function Name` field. For example, `onNextButtonClicked`.\n\n**Note:** The `CodelesslyFunction` provides a `CodelesslyContext` which provides internal access to the widget's data,\nvariables, conditions, functions, etc.\n\n**Note 2:** You can declare `data` and `functions` in the global `Codelessly` instance to make them globally accessible\nto all `CodelesslyWidget`s.\n\n## CodelesslyWidget Options\n\n```dart\nCodelesslyWidget(\n  layoutID: '0R0Qe7wgeAJMnj3MGW4l',\n  isPreview: kDebugMode,\n  config: CodelesslyConfig(\n  authToken: 'LCVyNTxyLCVxQXh3WDc5MFowLjApQXJfWyNdSnlAQjphLyN1',\n  ),\n)\n```\n\n- `layoutID`: The ID of the published canvas. The ID can be found in Quick Preview or under\n  `Publish \u003e Settings \u003e Published Layouts`.\n\n![Codelessly Published Layout ID](packages/codelessly_published_layout_id.png)\n\n- `isPreview`: Whether the layout is in preview or production mode. Preview mode is meant for debugging the layout and\n  syncs with the changes made in the editor. Widgets in production mode are only updated when published using the\n  Publish button.\n- `config`: An optional `CodelesslyConfig` that holds the information required to authenticate your layout from the\n  server.\n\n**Note:** Setting a `CodelesslyConfig` on a CodelesslyWidget overrides the global Codelessly instance settings. This\nlets you embed layouts from other projects with different auth tokens.\n\n## Environment Configuration\n\nThe CodelesslyWidget supports **Preview** and **Published** environments via the `isPreview` boolean.\n\n```dart\n// Global config.\nCodelessly.instance.initialize(\n  config: CodelesslyConfig(\n    isPreview: true,\n  ),\n);\n\n// Widget level. Overrides global settings for this widget.\nCodelesslyWidget(\n  isPreview: true\n);\n```\n\n### Preview Mode\n\n\u003e Realtime UI updates - edits made in the Codelessly Editor are mirrored immediately to the app.\n\nWhen `isPreview` is set to true, the CodelesslyWidget will stream UI updates from the Codelessly Editor in realtime. Any\nedits to the UI in the editor will update in the app immediately. We think this is a pretty amazing feature so give it a\ntry!\n\nUse preview mode to test and prototype UI quickly.\n\n#### Flavor Support\n\nA common request is to enable Preview mode in QA environments to support updating the UI on test user's devices. That\ncan be done by setting the `isPreview` value based on the flavor or runtime environment.\n\n```dart\n// Global config.\nCodelessly.instance.initialize(\n  config: CodelesslyConfig(\n    isPreview: FlavorConfig.flavor != \"prod\",\n  ),\n);\n```\n\nThis enables realtime updates on release devices in a test environment, excluding production.\n\n### Production Mode\n\n\u003e Publish UIs with absolute control over updates and versioning.\n\n`isPreview` should be set to false for production environments to prevent the UI from changing. When running in\nPublish (aka Production) mode, UI changes must be explicitly published to update the UI. This makes working in the\neditor safe and prevents undesired changes from reaching end users.\n\n**Note:** You do not need to change layoutIDs when switching from Preview to Production. Canvases have a single unique\nlayoutID that the system uses to identify layouts with. Codelessly Servers will automatically handle loading the correct\nlayout when moving from Preview to Production.\n\n## Configuration Options\n\n### CodelesslyConfig\n\n```dart\nCodelessly.instance.initialize(\n  config: CodelesslyConfig(\n    authToken: AUTH_TOKEN,\n    isPreview: kDebugMode,\n    preload: true,\n    automaticallyCollectCrashReports: true,\n  ),\n);\n```\n\nCodelesslyConfig supports the following configuration capabilities.\n\n* `isPreview`: Global enable or disable preview-mode setting.\n* `preload`: Preload layouts to improve performance. When layouts are preloaded, they load instantly and behave like\n  local widgets. `true` by default.\n* `automaticallyCollectCrashReports`: Report SDK crashes to Codelessly. `true` by default. You can optionally disable\n  this behavior.\n\n### Global Data and Functions\n\nData and functions registered in the global `Codelessly.instance` are available to all CodelesslyWidgets.\n\n```dart\nCodelessly.instance.initialize(\n  data: {'username': 'Sample User', 'paid': false},\n  functions: {\n    'openPurchasePage': CodelesslyFunction(\n      (context) =\u003e Navigator.pushNamed(context, \"PurchasePage\")),\n  },\n);\n```\n\n## Additional Resources\n\nAdditional resources and tutorials are on\nour [documentation website](https://docs.codelessly.com/getting-started/3-minute-quick-start).\n\nIf you have any questions or run into any issues, please open an issue or email us\nat [codelessly@gmail.com](mailto:codelessly@gmail.com).\n\nFor the latest information on releases and product updates, subscribe to our newsletter on\nthe [Codelessly Website](https://codelessly.com/).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelessly%2Fcodelesslysdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodelessly%2Fcodelesslysdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelessly%2Fcodelesslysdk/lists"}