How to build a dashboard with Airsequel and Lowdefy

In this tutorial we will be building a very simple dashboard with Lowdefy. It will load the data via GraphQL from an example SQLite database hosted on Airsequel.
This is what the final dashboard will look like:
Image without caption
Since we’re using the example database at, there is no initial database setup necessary. But feel free to use your own database since the concepts should be straight forward to apply.

Creating the Lowdefy app

The final code is also available in our example apps repsoitory.
  1. Create a new directory with the boilerplate code:
    1. shell
      mkdir lowdefy-todo-app cd lowdefy-todo-app npx lowdefy@latest init
  1. Start the development server:
    1. shell
      npx lowdefy@latest dev
You should now see the welcome screen running at localhost:3000/welcome:
Image without caption
Since Lowdefy does not have a dedicated GraphQL connector yet (, we simply use the more generic AxiosHttp module to make the necessary HTTP POST request. Therefore add following block right below the name: … line:
connections: - id: graphql_api type: AxiosHttp properties: baseURL: https://<your-company>
In order to render our dashboard, replace now the pages: block with following code:
pages: - id: characters_page type: PageHeaderMenu properties: menu: links: - pageId: characters_page type: MenuLink properties: title: Characters icon: UserOutlined requests: - id: characters_request type: AxiosHttp connectionId: graphql_api properties: url: /dbs/avatar_the_last_airbender/graphql method: post data: query: | query GetCharacters { characters { name, height_in_cm, wikipedia } } events: onEnter: - id: fetch_characters type: Request params: characters_request - id: set_characters type: SetState params: character_list: _request: blocks: - id: title_main type: Title properties: content: Characters - id: block_id_$ type: EChart properties: option: dataset: source: _state: character_list xAxis: type: category yAxis: type: value series: - type: bar encode: x: name y: height_in_cm - id: character_list type: List blocks: - id: character_container_$ type: Box style: background: white margin: 10 padding: 10 blocks: - id: character_title_$ type: Title properties: level: 3 content: _state: character_list.$.name - id: character_anchor_$ type: Anchor properties: newTab: true title: _string.replace: on: _state: character_list.$.wikipedia regex: 'https://' newSubstr: '' href: _state: character_list.$.wikipedia
And voila, you have a simple, yet effective dashboard! 🥳
You can now check out the Lowdefy Documentation for more blocks to spruce it up!