# Welcome Setup Guide **Please Note:** This page contains important setup information. Please bookmark this page for future reference (). ### **Getting Started** Let's get you started with the Codelessly Editor! If you don't have a Codelessly account yet, please visit [https://app.codelessly.com](https://app.codelessly.com/) to create an account. **Open the Codelessly Editor:** {% content-ref url="/pages/utBJphbjLGO280dVMii9" %} [Start a New Project](/editor-basics/start-a-new-project) {% endcontent-ref %} # Thank you for your purchase! **Please Note:** This page contains important setup information. Please bookmark this page for future reference (). A purchase confirmation and link to this page will be sent to your email. ### **Getting Started** Congratulations on your purchase! We're thrilled to have you on this journey with us. First, let's get you access to the Codelessly Editor. **New Account**: If you don't have a Codelessly account yet, please visit [https://app.codelessly.com](https://app.codelessly.com/) to create an account. Remember to signup using your purchase email as the license is linked to your purchase email. Please reach out to support if you would like to use a different email to create an account. **Existing Account:** If you have already created a Codelessly account, your account will be automatically upgraded as long as the purchase email is the same as your account email. Please reach out to support if you purchased using a different email and your account has not been upgraded. **Open the Codelessly Editor:** {% content-ref url="/pages/utBJphbjLGO280dVMii9" %} [Start a New Project](/editor-basics/start-a-new-project) {% endcontent-ref %} # Import Figma designs into Codelessly Learn how to import design from Figma to Codelessly Codelessly allows you to effortlessly convert your Figma designs into interactive prototypes or live websites. By using the Codelessly plugin on Figma, you can streamline the import process and quickly bring your designs to life. Follow these steps to get started: ## Install the Codelessly Plugin Start by installing our plugin for Figma to import designs with just few clicks. 1. Open your Figma project. 2. Click on the ***Main Menu*** (Figma icon

) in the top-left corner and navigate to ***Plugins** > **Manage plugins...*** option. Alternatively, you can click on Resources icon (

) from the tools on the top-left side of the Figma editor.

3. In the search bar, type **Codelessly**. 4. Click on the **Codelessly** plugin from the search results. 5. Press the **Run** button to add the plugin to your Figma workspace.

## Exporting your designs Once the plugin is installed, it is very easy to export your designs. Follow these steps to export selected frames to Codelessly. 1. Select frames you want to export from Figma to Codelessly. You can select multiple frame at once too! 2. Right click on the selection and go to ***Plugins > Codelessly***.

3. This will open Codelessly plugin's window. 4. Sign-in if you are not already signed in. Once signed in, it should show your selected designs like this.

Codelessly Plugin showing selected designs

5. Select a project from dropdown to export your design to. You can click on `Create a project` to create a new project instead. 6. Optionally, Turn on `Add to existing page` option to export your designs to an existing page inside the selected project. If not enabled, a new page inside the project will be created for your exported designs. If you enable this option, a page selection dropdown will appear for you to choose in which page you want to export your designs into.

Project and Page selection configuration in Codelessly plugin

7. Click on `Export` button to start exporting your designs. Wait for it to finish exporting. It might take some time depending on the size of your designs and images used in it. 8. That's it! Head over to your project at Codelessly to see your exported designs.

Congratulations 🎉! you've successfully exported your design from Figma to Codelessly. # Publish your design as a website Learn how to publish your design as a website from Codelessly Codelessly supports publishing your design as a website with a single click. Codelessly's AutoScale technology will automatically resize your designs to fit on different screen sizes. Let's turn your designs into a website! {% hint style="info" %} When you're ready to publish to a custom domain, see our guide on [Custom deployments and publishing](/setting-up-custom-domains/linking-with-github-repository) {% endhint %} ## Quickstart After you import or create a design, you'll need to choose a unique URL for your website. 1. Click on the chevron icon

next to the publish button.

2. Click on the `Configure` button under the Website section to configure website publishing.

3. This will open the **Publish Settings** dialog with the `Website` tab selected. Under the **Home Page** section, from the dropdown, select a canvas that you want to use as home page for your website. This will be the page that will be displayed when your website is visited.

3. Under the **Publish Site** section, set a custom slug for your website. Use a subdirectory name of your choice. This will be the URL for your website. 4. Click on the **Save & Publish** button to save your configuration. Codelessly will now deploy your website.

5. Congratulations!🎉 Your website is live on the Internet now! Click on the **Open Link** button to view your published website.

## Publishing Updates Codelessly supports 1-Click publishing. To publish updates, click on the chevron dropdown button and make sure the checkbox in the website section is selected. Hit the Publish button to update your website.

With 1-Click publishing, you can simply press the publish button whenever you want to publish changes! ### Publishing on your own Custom Domain We support integrating with third-party platforms like [Netlify](https://www.netlify.com/) and [Vercel](https://vercel.com/) and Github for publishing to custom domains. See our [Custom Deployments and Publishing](/setting-up-custom-domains/linking-with-github-repository) guide for more info. # Start a New Project ### **1. Create a New Project** Press the "+" button to create a new project.

Give your project a name.

# Editor Tools Learn the basic design tools available in the Editor. The tools panel on the left side of the editor contains a variety of tools to help you out with the basic needs of this UI Editor.

### Cursor Tool

When you open any project in Codelessly, this tool will be selected by default.

The cursor tool allows you to select, move, resize, and interact with nodes on the canvas in general. Click on the arrow

to select cursor tool. Alternatively you can use the keyboard shortcut `V` to select it. ### Rectangle and Oval Tools

This tool allows you to draw a rectangle or oval as the name indicates. * Rectangle `R` * Oval `O` Click on the tiny arrow button on the right of the tool to switch between rectangle tool and oval tool. You can also use keyboard shortcuts shown above to do the same. Once you select the tool, you can hold down your pointer and drag on the root canvas to create the box. The box is created once you release your pointer. ### Text Tool Select the text tool

from the tools panel or use the shortcut `T` to switch to Text tool. While text tool is selected, 1. You can click anywhere on the canvas to create Text that wraps its content horizontally and vertically.

2. Click and drag to create Text with your desired fixed size.

### Canvas Tool This tool allows you to create screens for your app or website. It behaves like a canvas/frame inside which you can build your UI and then publish it. You can think of canvas as screens on user facing devices like mobiles, tablets, and laptops. A canvas ideally fills the screen on the device it is running when you publish your app or website. While Codelessly is completely freeform in nature allowing you to put anything almost anywhere on the root canvas, it is important that you put your final designs in a canvas so that you can publish them later. UI needs to be inside a canvas to be eligible for publishing. Please read [Creating Your First Layout](/editor-basics/creating-your-first-layout) to learn how layouts work in Codelessly and to understand why we have two types of canvases and why they're different. Select the freeform canvas tool by clicking on this

button in tools panel or using the keyboard shortcut `C`. You can click anywhere on the root canvas to create a canvas for you to get started with or you can click and drag to create a canvas of your desired size just like how other tools work here. This tool will create a freeform canvas, which allows you to put things inside relative coordinates to the canvas's top-left corner. To move nodes into to a canvas, just select the node you want to move, then drag & drop it on to the canvas.

{% hint style="info" %} Note that you can't put a canvas inside another canvas. {% endhint %} ### Auto Canvas Tool This tool also creates a canvas but unlike the canvas tool, this will create an auto canvas with rows and columns. This type of canvas allows you to put nodes inside with a relative positioning that is relative to each other rather than the canvas itself. For example, you can put a node on the right, left, top or bottom of another node just like how rows and columns behave in any design system. \ \ While normal canvases can do this too, an auto canvas is best when you want to create responsive UIs right off the bet. Select auto canvas tool by clicking on this

button in the tools panel or using keyboard shortcut `A`.

# Creating Your First Layout This page will introduce you to the fundamentals of using the Codelessly Editor. ### What you'll learn: 1. The difference between freeform layouts and auto layouts. 2. Ways to create rows and columns. 3. Creating an auto canvas & freeform canvas. ### Creating Rows & Columns There are two ways to create Rows & Columns. #### CTRL/CMD key By holding down the CTRL/CMD key while dragging a node over another node, you will see an insertion UI that gives you feedback on what you want to do. For nodes that don't support nodes being inserted inside of them, you will only see edge-highlighting with an indicator on what will happen when you release the cursor. If you release your cursor while hovering near the **bottom or top edges** of a node, both nodes will be wrapped inside of a newly created **Column**. If you release your cursor while hovering near the **left or right edges** of a node, both nodes will be wrapped inside of a newly created **Row**.

If you hold down the CTRL/CMD key while dragging a node inside of another node that can support children inside of it, you will see the **Alignment Insertion UI**.

#### Smart Suggestions By positioning the nodes in the **layout of a Row or Column**, you will see a *Smart Suggestion* to convert your selection into one or the other.

### Freeform vs Auto Codelessly supports two positioning systems, Freeform and Auto. Switching between them is very easy and intuitive, just hold down Ctrl / Cmd while dragging a widget! The layout system will automatically switch between Freeform and Auto. #### Freeform A freeform layout is one in which all elements use exact pixel coordinates relative to their parent elements to place themselves. If you're a familiar with common design tools such as Figma, Freeform is the positioning system most design tools use. Freeform is excellent for design but is not responsive. For designs to resize to multiple screen sizes, you'll need to use Auto layout. #### Auto With Auto layouts, your screens are built with **Rows** and **Columns**. Each element is placed in some structured fashion such that the **Rows** and **Columns** control the positioning and sizing of each element. On top of that, each element might size itself with its own rules. We'll learn more about how elements can size themselves differently in the next sections. ### Creating an Auto Canvas This is the tools panel. You can hover over each tool to see their name and description. Select the canvas tools and drag in the editor box area to create a new canvas.

### Build Your First Layout with Auto Canvas AutoCanvas is as simple as drag and drop. You will not need to hold down your CTRL/CMD key since items you drag into an Auto Canvas will go into Auto Layout mode by default. Building layouts has never been easier!

To start, drag a widget into the AutoCanvas where it says "Drop a widget here"

**Column** - Create a column by dragging to the top or bottom edge.

**Row** - Create a row by dragging to the left or right edge.

### What are canvases? You can think of canvases as the screen that your layouts will be displayed inside of. In other words, you can think of it as the dimensions of the display that your app will live inside. Canvases also hold additional functionality: * They scope your data & variables. Read me about those in the upcoming sections. * You can publish your canvas through the **Codelessly Cloud UI** service. * You can preview your layout directly in the editor as if it were published with the ability to preview how your layout reacts to different device shapes. * Support for Flutter's built-in App Bars, Navigation Bars, and Floating Action Buttons (FABs) as direct Scaffold properties. #### What's the difference between a Freeform Canvas and an Auto Canvas? A freeform canvas

is a blank canvas that lets you position nodes with **absolute pixel coordinates** anywhere inside. They are **not** responsive and your layouts will not resize, reposition, adapt, or respond to any different size the canvas is set to. They do, however, respond well to the **AutoScale responsiveness mode**. Read more about the responsive modes in the upcoming sections. An auto canvas

, on the other hand, is a **Column** by default. Layouts you build will immediately go into **Auto Layout mode** and will attempt to be as responsive as possible, as if you were holding down your CMD/CTRL key when dragging items inside. It's recommended to start with an **AutoCanvas** as it is designed to be beginner friendly. If you have a complex layout that mixes absolute positioned and layout widgets, start with a Freeform canvas instead. It eventually boils down to your use-case, and our layout engine fully supports mixing both systems inside of each other. # Using Components Learn how to use and customize components available in the Editor.

Codelessly has a wide range of pre-built, high quality and highly customizable components that you can directly use in your layouts to quickly build UIs. These components are available in the components library. ### Components Here's a list of all the available components. * Icon * Button * TextField * Checkbox * Switch * Radio * Slider * App Bar * Navigation Bar * Scaffold * Floating action button * Divider * Loading Indicator * List Tile * Expansion Tile * Accordion * List View * Page View (Carousel) * Tab Bar * Embedded Video * Embedded Web View * Progress Bar * External Component Click on this `+` button in the tools panel on the left of the editor to open components library.

You can drag & drop any component you want directly to the canvas from components library.

All these components support full customization of how they look and function. To access component properties, select a component and click on the floating `Settings` button right next to it.

You can alternatively click on `Open` button in Component Settings banner at the top of the properties panel on the right.

This opens up the component settings panel. This panel contains an interactive preview of the component at the top which provides visual aid while customizing them.

# Working with Size Fits Learn the concept of Size Fits and its role in responsiveness. Size Fits form the basis of Codelessly's auto-layout system. It's a fundamental concept that helps you achieve that pixel-perfect responsiveness. To summarize, Size Fits let you define how a node **fits** inside a frame, row, or column. Whether it takes up all the available space or wraps around its children, taking the minimum space possible. Or, you can even provide it a fixed size manually. Size Fits can be defined per axis, **horizontal** and **vertical**. Simply select the desired Size Fit from the dropdown, or, use the *Size Fit Selector*.

## Fixed Size By default, nodes are **fixed in size**. This means that they do not adjust their size according to the parent layout. So, if a node is fixed size on the horizontal axis, it retains its width.

If a node is fixed size on the vertical axis, it retains its height.

## Fill Parent This fit expands the node to the size of its direct parent. So, if a node is set to fill parent on the horizontal axis, it expands its width to that of its parent.

If a node is set to fill parent on the vertical axis, it expands its height to that of its parent.

## Wrap Content Contrary to ***fill parent***, this fit depends on a node's children rather than its parent. If a node has children, ***wrap content*** sets the node's dimensions to that of its children. So, if a node wraps content horizontally, its width shrinks to that of its children.

If a node wraps content vertically, its height shrinks to that of its children.

# Working with Variants Learn how to use variants to create dynamic UI that adapts to the state of the app.

Variants in Codelessly are different states and variations of a component or layout. Variants allow you to switch between them dynamically, making the resulting UI more interactive and stateful. Think of variants as alternate versions of your components. For example, * A Button with an enabled and a disabled state. * Light and dark modes for a component. * Loading, data, error, or empty sections of your UI. > Nodes with variants are highlighted in pink when selected. ### Creating a variant 1. Select the node you want to create a variant for. 2. Click on the little arrow button

in the selected node's name tooltip floating above it to reveal variants dropdown. 3. Click on the `New Variant` button at the bottom of the dropdown to go into the variant creation flow.

Creating a new variant from the node's tooltip.

4. This will open the `Create New Variant`dialog. Fill in the name for your new variant.

5. Check the `Copy from current variant` option if you want to duplicate your current layout for your new variant as a starting point. You may want to do this if you want to keep any parts of your original layout structure and just modify some elements instead of recreating it from scratch. Alternatively if the entire layout is going to be different in its new state, you may want to keep this checked off, allowing you to start with a blank placeholder instead of your last layout as its variant. 6. Click on the `Create` button when you finish configuring your options and you will immediately see the new variant you've created. If this is the first variant you've created for your selected node and all the children inside of it, The selection box will have changed its color to indicate that it's a variant. If you have not checked the `Copy from current variant` option while creating the new variant, an empty variant will be created with a placeholder inside.

You can drag & drop any node/layout inside to make it part of this variant. This allows you to build up your variant from scratch. If you did check the `Copy from current variant` button, you will see the exact same node layout structure you had before but with the pink highlight. In fact, your original node structure got duplicated and you now have two variants that look identical. One is the original, and the currently visible one is the duplicate that you can freely modify without affecting the original. ### Switching between variants Once you've created your variant, you can switch between it and your original creation using the variants dropdown chevron in the node's name tooltip.

All your variants will be shown in this dropdown and you can create a new one or switch between existing ones as you like. To preview all the variants, click on `View All` button

in the variants dropdown to reveal variants dialog.

This will open Variants dialog where you can see all the variants with each one's associated preview.

You can rename or delete a variant by clicking on the triple-dots

. > Tip: Double click on the variant name to rename it. Variants are identifiable via their names. You can switch between these variants on user interaction by setting a `Set Variant` action from actions panel. Check out the upcoming actions guide for more details.

You can define conditions to switch between variants too. Checkout the upcoming Conditions guide for more information. # Using External Components Learn how to embed your own widget into Codelessly's layout. Codelessly offers a wide range of components that can be the building blocks for most of your layouts. However, there can be times when you want to use a very specific widget that is not yet available in Codelessly or you want to use a widget from a third-party package into your codelessly layout. To fulfill this use-case, we have a component called `External Component` in the components library.

As the name implies, this component behaves like an iFrame and allows you to hook your own widget into it programmatically. You can pass this widget from `CodelesslyWidget` using our Cloud UI SDK. Any custom widget can be rendered inside this external component as long as it can respect its constraints. ### Usage 1. Like other components, you can drag and drop this component in any of your layouts. 2. Open the settings panel for this component by clicking on the floating Settings button

next to it. 3. Provide a unique identifier for this component. This `id` will used to identify the component from `CodelesslyWidget` in the SDK to map it to a widget builder.

4. From the SDK side, where you are using `CodelesslyWidget`, pass your widget using the `externalComponentBuilders` constructor parameter. ```dart return CodelesslyWidget( config: CodelesslyConfig(authToken: ''), layoutID: '', externalComponentBuilders: { 'my_custom_widget': (context) { return const Placeholder(); }, }, ) ``` > Note that the `key` needs to match exactly to the unique external ID provided in the Editor. You can have as many external components as you want. You can pass any widget including `StatefulWidget` and manage its state yourself. You can provide all of them in `CodelesslyWidget` by using their unique ids. ```dart return CodelesslyWidget( config: CodelesslyConfig(authToken: ''), layoutID: '', externalComponentBuilders: { 'widget1': (context) { return const Placeholder(); }, 'widget2': (context) { return const Placeholder(); }, }, ) ``` # Size Fits Settings Learn about the advanced options of size fits to lay out the nodes exactly how you desire. Certainly, size fits are not limited to just the three basic modes as discussed in the [Working with Size Fits](/editor-basics/working-with-size-fits)section. You can further play with spacing, flex ratios and even define constraints. ## Spacing In rows and columns, we often need to add some space in between the children. That's when we use **Spacers**. You can add a spacer by hovering over a row's child in the *Spacing Section* and tapping the plus button. > GIF: Adding a spacer in a row. (coming soon) Or, if you want equal spacing between all the children, you can define it next to spacing section's header. > GIF: Define spacing for all children. (coming soon) Same goes for column. ## Alignment Alignment is an important aspect of responsiveness, especially when the row/column is set to fill parent. Children can be aligned the following ways: ### Main Axis 1. **Start**: Children are placed at the start of their parent. On the main axis, start means left for rows and top for columns. 2. **Center**: Children are aligned centrally on the horizonal axis for rows and on the vertical axis for columns. 3. **End**: Children are placed at the end of their parent. On the main axis, end means right for rows and bottom for columns. 4. **Space Between**: Children spread across their parent with equal space between them. No space added to both ends of the row/column. 5. **Space Around**: Children spread across their parent with equal space between them. Half of that space is added to both ends of the row/column. 6. **Space Evenly**: Children spread across their parent with equal space between them. Same space is added to both ends of the row/column. ### Cross Axis 1. **Start**: Children are placed at the start of their parent. On the cross axis, start means top for rows and left for columns. 2. **Center**: Children are aligned centrally on the vertical axis for rows and on the horizontal axis for columns. 3. **End**: Children are placed at the end of their parent. On the cross axis, end means bottom for rows and right for columns. 4. **Stretch**: Children expand to take up the entire space on the vertical axis for rows and on the horizontal axis for columns. ### Changing Alignment Changing alignment is simple. Just select the preferred alignment from the spacing section. > GIF: Selecting a main axis alignment and a cross axis alignment for a row and children changing their positions visibly. (coming soon) ## Flex Ratios (Coming Soon) Flex ratios help us define how much space a node takes with respect to the available space. # 3-Minute Quick Start Learn how to publish a canvas and embed it in your app. ## Quick Preview Quick preview feature lets you publish and preview a canvas in a single click. The layouts get published instantly and sync with any changes you make in the canvas. This is useful to test and debug the layouts. Select the canvas you wish to publish and press the *Quick Preview* button in the app bar.

This will upload the canvas and open up a dialog with all the necessary information you need to preview the canvas.

You have two options to preview the uploaded canvas: ### Loading preview in Codelessly's mobile app Tap on the *"View a preview" button*.

Scan the QR code from the mobile app's scanner to instantly preview the canvas. Alternatively, you can input the *Preview Key Code* to load the preview.

This is how the preview looks in the mobile app.

Canvas Preview in Codelessly's Mobile App

### **Embedding the preview in your app** Copy-paste the provided code to embed the canvas in your app. `CodelesslyWidget`, being a widget, can be embedded anywhere in the widget tree. ## CodelesslyWidget `CodelesslyWidget` is a widget that renders the layout by utilizing the data of the canvas you publish from the editor. It takes in the following parameters: 1. `layoutID`: ID of the published canvas. 2. `isPreview`: Whether the layout is in preview or production mode. Preview mode is meant for debugging the layout and syncs with the changes made in the editor. Widgets in production mode do not sync and are only updated when explicitly published using the *Publish* button. 3. `config`: It takes an instance of `CodelesslyConfig` that holds the information required to fetch the canvas data from the server. `authToken` is required while other parameters are optional. ## Initializing SDK Before you can use `CodelesslyWidget`, you need to initialize the SDK. To do that, simply call the `initializeSDK` method before you render any `CodelesslyWidget`. Ideally, call it in the `main` method. ```dart void main() { Codelessly.initializeSDK(); runApp(MyApp()); } ``` `initializeSDK` takes in several parameters to provide complete flexibility. For example, you can declare `config` in this method to make it the default configuration of all `CodelesslyWidget`s, unless overriden. ```dart Codelessly.initializeSDK( config: const CodelesslyConfig( authToken: authToken, ), ); ``` Similarly, you can declare `data` and `functions` to make them globally accessible. ## Example Here's an example of how you can embed a canvas in your app using Codelessly's SDK: ```dart import 'package:codelessly_sdk/codelessly_sdk.dart'; import 'package:flutter/material.dart'; void main() { WidgetsFlutterBinding.ensureInitialized(); // Initialize SDK. Codelessly.initializeSDK( config: const CodelesslyConfig( authToken: 'LDliZlRlTS5EOTAsUzsrR3VfK0coN2sqbDI9OkVMazN4YXUv', ), ); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Codelessly SDK Example', debugShowCheckedModeBanner: false, home: SafeArea( // CodelesslyWidget in preview mode. child: CodelesslyWidget( isPreview: true, layoutID: '0QsQaSzQ0A4RIzKKuN8Y', ), ), ); } } ``` The app should look like this:

Since the widget is in preview mode, whenever we make a change to the canvas in the editor, it's instantly reflected in the widget as well.

## Publishing Layouts After you have tested your layouts and are ready to make it available to your users, you can publish the layouts by pressing the *Publish* button.

{% hint style="info" %} Once a canvas is published, it is pushed to the users' devices and remains accessible unless deleted explicitly. {% endhint %} # Connecting Data Learn how to connect data to the layouts and make them dynamic. ## JSON Paths The first step to connect data to a node is to declare the data's path in the node itself. We do it by placing the JSON path in between `${ }`. It looks something like this: ```dart ${books.chapters.titles[0]} ``` In case of the example weather app, we declare the JSON path that points to a temperature.

Next up, providing the data to the layout in the SDK. ## Data Field `CodelesslyWidget` takes in data using the `data` parameter which is of type `Map`. You can provide the data in the form of a JSON and the widget will be able to use its values internally. ```dart CodelesslyWidget( data: const { 'weather': { 'temp': 20, 'humidity': 34, 'wind': 6, }, } ); ``` Run the app. It should retrieve `temp`'s value from the data and substitute it in place of the JSON path.

Currently, the editor supports adding dynamic data to text and image URLs. # Calling Functions Learn how to call custom functions in the SDK. ## *"Call Function"* Action Actions are meant to make the UI more functional. Using actions, you can navigate to a different page, change state of a widget, launch URLs, etc. In this case, we need to call a custom function in the SDK. So, we use the *Call Function* action. Head over to *Develop Tab* located in the app bar.

You should see the *Actions Panel* in the right. Now, select the node you wish to add the action to.

To add an action, tap on the *add icon* and select *"Call Function Action"* from the dropdown.

Next, tap on the *settings icon* to open the settings window.

Enter the custom function's name in the *Function Name Field*.

Action to call a custom function is now added to the node. Now, we need to provide the function in the SDK. ## Functions Field We can provide custom functions to the `CodelesslyWidget` using its `functions` parameter which is of type `Map>`. Map's key is the name of the function and value is `CodelesslyFunction` class that takes in the function itself in its constructor. `CodelesslyFunction` has a parameter `call` which is a function with generic return type `T`. Here's an example of how we can declare functions in the widget. ```dart CodelesslyWidget( functions: { 'expandForecastPage': CodelesslyFunction((context, ref, params) {...}), } ); ``` `ref` is an instance of `CodelesslyContext` that you may use to access data and other functions from the SDK. `params` is a Map that contains any parameters passed by the function when it is called. These parameters can be defined on the function call from the Editor.

Now, node can access the function and call it on relevant trigger (*click* in this case). # Linking with Github Repository Learn about linking a Codelessly project with a Github repository for custom deployment and publishing. [Codelessly](https://codelessly.com/) supports Cloud UI publishing and deployments with a [Github](https://github.com/) Repository. You can link your [Github](https://github.com/) account with [Codelessly](https://codelessly.com/) and allow [Codelessly](https://codelessly.com/) to create a repository on your behalf and push starter code for website publishing. ### Benefits * You can choose your own deployment pipeline and third-party provider for it. * This enables you to use a custom domain for your website (if your third-party provider allows it) * Includes pre-built website so you just have to publish and you're done. * Also includes Flutter code if you wanna build it and then deploy on different platforms including web. ### What this repository will include? The repository we create will contain 1. **A fully configured Flutter project:** You can then integrate it into your build pipeline (e.g. [CodeMagic](https://codemagic.io/), [Github Actions](https://github.com/features/actions), [Bitrise](https://bitrise.io/), etc) to build the Flutter project and publish your app/website. 2. **A pre-built bundle of your website:** You can use it directly to publish on services that support static website publishing like [Netlify](https://netlify.com), [Vercel](https://vercel.com/), or any other third-party service you want to use. ## Get Started Let's get you set up with [Github](https://github.com/) repository for your project. ### Connecting with [Github](https://github.com/) 1. Open [Codelessly](https://codelessly.com/) editor and head to `Settings>Github Integration`. and 2. Click on `Connect to Github` button. It will open a webpage for you to authenticate your [Github](https://github.com/) account with Codelessly. 3. Once you authenticate, it will ask you to Install our [Github](https://github.com/) app: `Codelessly App`. Please finish the installation. 4. Once finished, head back to [Codelessly](https://codelessly.com/) editor and you will see that you're authenticated now. It will show your **user name** and **avatar** instead of `Connect to Github` button. You have successfully connected your [Github](https://github.com/) account with Codelessly. 🎉
> Note: Codelessly Github App is required for this to work. Avoid uninstalling it changing its permissions unnecessarily. ### Linking Project with [Github](https://github.com/) Repository After you connect [Codelessly](https://codelessly.com/) with your [Github](https://github.com/) account, you need to link your project to a specific repository on [Github](https://github.com/) so we can push code and updates and set everything up for you. 1. Open a project that you want to connect to a [Github](https://github.com/) repository. 2. Click on arrow button

next to publish button and click on `Go to Settings`.

3. Go to `Website` tab. You will see `Link Project with Github` section. 4. Select owner of the repository from the dropdown. You can add organizations by clicking on `Add Another Organization` button in the selection dropdown and it will prompt you to install our [Github](https://github.com) app for the organization you want to use for this. 5. Specify a repository name for your project. [Codelessly](https://codelessly.com/) will take care of creating the repository and pushing code for you. 6. Hit `Save & Link` button to let [Codelessly](https://codelessly.com/) create the repository and link it with your project. 7. Once it succeeds, you can click on

button next to repository name input to open your linked repository. See deployment docs for proceeding further with your [Github](https://github.com/) repository. # Deploy on Netlify Learn how to configure & deploy your website built with Codelessly on Netlify. This guide is about deploying and publishing your project as a website on [Netlify](https://www.netlify.com/) using a Github repository linked to your project. If you haven't done so already , checkout our guide on [Linking your project to a Github Repository](https://app.gitbook.com/o/rXXdMMDhFOAfV2g6j8A1/s/x4NeiXalJWaOaV6tsK5f/~/changes/21/custom-deployments-and-publishing/linking-with-github-repository). > [Netlify](https://www.netlify.com/) is the modern development platform that allows you to build and deploy your websites from a Github repository. You must have an active account on [Netlify](https://www.netlify.com/) before starting this guide. 1. If you haven't done so already, [Link your project to a Github Repository](https://app.gitbook.com/o/rXXdMMDhFOAfV2g6j8A1/s/x4NeiXalJWaOaV6tsK5f/~/changes/21/custom-deployments-and-publishing/linking-with-github-repository). 2. Open [Netlify](https://www.netlify.com/) and login. 3. Based on whether you have used [Netlify](https://netlify.com) before or this is your first project, Either go to `Sites>Add new site>Import an existing project` or `Sites>Import from Git`. \ If you are using Netlify for the first time, you will be asked to deploy your first project. If you are in signup phase then you will be presented with **Deploy your first project** screen. Skip this step in that case. 4. Click on `Deploy with Github` option and authenticate & link with [Github](https://github.com) if it asks to. 5. Select the **owner** and **repository name** for the repository you that [Codelessly](https://codelessly.com) automatically created for you. This must match the **owner** and **repository name** you specified in **Codelessly's publish settings**. 6. Click on Deploy button and wait for it to deploy. 🎉 At this point, your deployment should be ready with a URL to access your website. Follow this guide to [use custom domain for your website on Netlify](https://docs.netlify.com/domains-https/custom-domains/#assign-a-domain-to-a-production-site). > [Netlify](https://netlify.com) automatically builds your website when it detects updates to your linked repository. Its all automatic, you don't have to worry about it. # Deploy on Vercel Learn how to configure & deploy your website built with Codelessly on Vercel. This guide is about deploying and publishing your project as a website on [Vercel](https://vercel.com/) using a [Github](https://github.com) repository linked to your project. If you haven't done so already , checkout our guide on [Linking your project to a Github Repository](https://app.gitbook.com/o/rXXdMMDhFOAfV2g6j8A1/s/x4NeiXalJWaOaV6tsK5f/~/changes/21/custom-deployments-and-publishing/linking-with-github-repository). > [Vercel](https://vercel.com/) is the modern development platform that allows you to build and deploy your websites from a [Github](https://github.com) repository. You must have an active account on [Vercel](https://vercel.com/) before starting this guide. 1. If you haven't done so already, [Link your project to a Github Repository](https://app.gitbook.com/o/rXXdMMDhFOAfV2g6j8A1/s/x4NeiXalJWaOaV6tsK5f/~/changes/21/custom-deployments-and-publishing/linking-with-github-repository). 2. Open [Vercel](https://vercel.com/) and login. 3. Skip this step if you have already used [Vercel](https://vercel.com) before. Click on `Continue with` [`Github`](https://github.com) button to start linking Vercel with your [Github](https://github.com) account. 4. Skip this step if you are using [Vercel](https://vercel.com) for the first time. Go to `Overview>Add New...>Project`. If you haven't already linked your [Github](https://github.com) account, do so by clicking on `Continue with Github` button. 5. Once you have your [Github](https://github.com) account linked, select the repository that [Codelessly](https://codelessly.com) created for your project. 6. Click on Deploy button and wait for it to deploy. 🎉 At this point, your deployment should be ready with a URL to access your website. Follow this guide to [use custom domain for your website on Vercel](https://vercel.com/docs/projects/domains/add-a-domain). > [Vercel](https://vercel.com) automatically builds your website when it detects updates to your linked repository. Its all automatic, you don't have to worry about it.