How To Build a Todo App With Airsequel and Lowdefy

In this tutorial we will be building a very simple todo app with Lowdefy. It will load the todos via GraphQL from a SQLite database hosted on Airsequel.

This is what the final app will look like. Not pretty, but functional!

Screen Shot 2022-09-02 at 17.36.56Z.png

If you find any problems in this tutorial, please feel free to leave a comment!

Setting up the Airsequel Database

Things to know:

  • As the primary key we use the automatically generated rowid column.

First, let’s create the todo database in Airsequel’s UI. If you’re on Airsequel Enterprise you can alternatively use following steps:

  • Alternative way for Airsequel Enterprise: Upload an existing SQLite database <aside> 💡 The next steps describe how to create the database with the sqlite3 cli tool. You can of course also use one of the many graphical database management apps like e.g. DB Browser for SQLite or Beekeeper Studio.</aside>
    1. Create a schema.sql file for creating the SQLite database:

      • schema.sql

        CREATE TABLE todos (
          title TEXT NOT NULL,
          completed BOOLEAN DEFAULT (FALSE) NOT NULL
        -- Add some example todos
        INSERT INTO todos (title, completed)
          ('Buy milk', 0),
          ('Go hiking', 1);
    2. Execute SQL query to create the database:

      sqlite3 todos.sqlite < schema.sql
    3. Go to and upload the todos.sqlite file.

Or build it up from scratch:

  1. Go to (or your custom Enterprise instance)
  2. Click on “Create New SQLite Database”
  3. Rename database to “todos”
  4. Go to the “Tables” tab
  5. Rename “table_1” to “todos”
  6. Rename column “name” to “title”
  7. Add a new column “completed” with type “Boolean” and activate “Not Null”
  8. Create a few todos like “Buy milk” and “Go hiking” to make working with it easier

🎉 Your database and the corresponding GraphQL endpoint are now ready!

It should look something like this:

Screen Shot 2022-12-11 at 21.35.28Z.png

Creating the Lowdefy app

  1. Create the directory and the boilerplate code:

    mkdir lowdefy-todo-app
    cd lowdefy-todo-app
    npx lowdefy@latest init
  2. Start development server:

    npx lowdefy@latest dev

You should now see the welcome screen running at localhost:3000/welcome:


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:

  - id: graphql_api
    type: AxiosHttp
      baseURL: https://<your-company>

In order to render our todos, replace now the pages: block with following code and replace <database-id>with your database id from database setup step.

  - id: todos
    type: PageHeaderMenu
      - id: todos_request
        type: AxiosHttp
        connectionId: graphql_api
          url: /dbs/<database-id>/graphql
          method: post
            query: "{ todos { title, completed } }"

        - id: fetch_todos
          type: Request
          params: todos_request

        - id: set_todos
          type: SetState

      - id: title_main
        type: Title
          content: Todos

      - id: todo_list
        type: List
          - id: todo_container_$
            type: Box
              background: LightGray
              margin: 0.5rem
              padding: 1rem 2rem
              - id: todo_list.$.completed
                type: CheckboxSwitch
                  size: 2em
                  align: middle
                    disabled: true

              - id: todo_title_$
                type: Span
                  grow: 1
                  align: middle
                    _state: todo_list.$.title

Now, the complete file looks like this: