Building Adalo components overview

A 2023 refresh on a cheat sheet and collection of resources for creating components with Adalo

Building Adalo components overview
Do not index
Do not index
This guide offers key tips for building Adalo components and is a 2023 update of a cheatsheet I shared in 2022.
 
Jump ahead

What is Adalo?

Adalo is a no-code app tool designed for creating mobile and web apps. It's a comprehensive platform that empowers you to design, develop, publish, and scale apps for your business. In 2022, they overhauled their component marketplace, allowing developers to sell or offer free components to enhance functionality for Adalo's ever-expanding user community.

What are libraries and components?

While Adalo offers a wide range of built-in components for apps, there are still many unexplored possibilities. The Component Marketplace enables external developers to create and publish their own components as Libraries on the Adalo marketplace. A library is a collection of components that developers can bundle together. A component is a standalone functional unit within Adalo, encompassing elements like text, buttons, and images.
 

Getting started

Before you dive into component development, make sure you have these prerequisites in place:
  • macOS >= 10.10 or GNU/Linux kernel >= 2.6.32
To kickstart the creation of your library, execute the following command:
npx create-adalo-component my-component
 
Replace my-component with the name of the component you intend to create.
 
notion image
 
Next, you’ll be asked to choose between a functional and class component. Both options are suitable for Adalo component development, so you can pick the one that aligns with your personal preference.
 
notion image
 
When you run npx create-adalo-component, you'll be asked whether you'd like to use a package manager. Your choice here will determine the commands you use to manage your component.
  • If you opt for the package manager, your commands will begin with yarn, such as yarn adalo start and yarn adalo login.
  • If you choose not to use the package manager, your commands will start with npx, like npx adalo start and npx adalo login.
notion image

Adalo library structure

For each component you develop, you'll create a separate folder within the library you've set up. Here's an example of what the structure looks like:
notion image
 
You can add multiple components by creating additional folders within your library directory. Be sure to update both the adalo.json and the index.js to include these new components.

Adalo component structure

When working on a specific component, the majority of your development time will be spent in the manifest.json and index.js files. These files are crucial for defining the component's behavior and appearance within the Adalo environment.
notion image
 
 
Manifest.json
The manifest.json file is essential for configuring your component within Adalo's editor. Adalo uses this file to generate the settings displayed on the left panel in the editor, and each property defined in the manifest.json is passed down to your component as a React prop.
 
Here's an example of a manifest.json configuration and how it appears in the Adalo environment. You can find more details about the manifest.json file in Adalo's developer documentation.
{
  "displayName": "Cool Text",
  "defaultWidth": 160,
  "defaultHeight": 24,
  "components": "./index.js",
  "icon": "./example-thumbnail.png",
  "props": [
    {
      "name": "text",
      "displayName": "Text",
      "type": "text",
      "default": "Happy Hacking"
    },
    {
      "name": "color",
      "displayName": "Color",
      "type": "color",
      "default": "#00A898"
    }
  ]
}
notion image
 
 
Index.js
In the index.js file, your component comes to life and becomes functional. Any adjustments you make in the manifest.json file are reflected in your index.js code. For instance, in the example below, the index.js file renders text, and in our manifest.json, we have a color prop. Changing the color prop in the manifest will result in changes to the text displayed in the component.
 
import React from 'react';

function MyAdaloComponent(props) {
  const { color, text } = props;

  return (
    <div style={{ color: color }}>
      {text}
    </div>
  );
}

export default MyAdaloComponent;
notion image
 

Modifying the component UI and adding elements

To add elements to your components, you can create them directly in the index.js file and ensure they are referenced in the return section of the component. Here's a screenshot example:
notion image
 

Adding Actions

Adding actions to elements allows users to configure subsequent actions in Adalo. These actions appear in the properties editor, and you can define where they should occur in your code.
 
For instance, in this example, I've set up actions to occur after clicking the text element
notion image
notion image

Routing Data from your component to Adalo

If you need to share data from your component with Adalo, perhaps for users to save information for later use, you can achieve this by creating arguments. These arguments can be used in your functions when you call them, allowing users to utilize data from your components.
For instance, in my example, I've created an exampleAction with a single argument of type text. In my component's index.js, I provide the argument with the value "text." This allows for data to flow from the component to Adalo, enhancing its functionality.
notion image
notion image
In the properties editor, you can now access the data and save it in a data collection or perform other actions as needed. For more detailed information on this topic, you can refer to this source. It provides valuable insights into using arguments as magic text in Adalo components.
 

Tips for Building Components

Here are some useful tips and tricks to enhance your component-building experience:
1. Conditional Element Display
2. Customizing Component Rendering
3. Embrace Material Design
  • Adalo follows a material design system, so adhering to these design standards ensures your components seamlessly integrate with the broader Adalo ecosystem.
4. Using Style Prop
  • Utilize the style picker when defining props for text elements. It offers convenience by allowing you to access various styles easily without defining each prop individually. Here's an example:
"name": "createText",
"displayName": "Button text",
"type": "text",
"default": "Create room",
"helpText": "The text that displays on the button",
"enabled": {
  "editCreateRoomButton": true
},
"styles": {
  "fontFamily": "@body",
  "fontWeight": 600,
  "color": "@contrast:createBackgroundColor"
}
Access it when rendering the element like this:
component.styles.prop

// Example:
createRoomButton.styles.createText
Using the style argument eliminates the need to define a specific prop for each style in your component, streamlining the process. This is what it looks like in the editor
notion image

Useful Commands

Here are some essential commands to remember when working with your Adalo component:
Login to Your Adalo Account:
adalo login
Start the Development Server:
adalo dev
Publish Your Component:
adalo publish
Update Your Component's Listing:
Use these commands based on your choice of package manager (yarn or npx) when creating the component.
adalo update
 
 

Additional Resources

Explore these resources to enhance your knowledge of creating components with Adalo:
 
Feel free to reach out if you have any questions or need assistance with Adalo component development. Happy to chat anytime!
 

We build and manage software integrations for SaaS companies

Focus on your business, we'll handle integrations

Book an intro call →

Written by

Lola
Lola

Lola is the founder of Lunch Pail Labs. She enjoys discussing product, SaaS integrations, and running a business. Feel free to connect with her on Twitter or LinkedIn.