Get started with Noodl

Noodl is a low code web app builder that will have you creating applications faster and smarter. It's a visual development environment that you don't need any previous coding skills to start learning. It's also great for developers who already know how to code as you can easily mix in JavaScript when appropriate, and Noodl is great for designers too, as it gives full control over the look and feel of your App. In Noodl everything is live and you edit you app while its live. This site contains all you need to get started!

Noodl basics

Build your first app

Featured guides

View all

Pages and Navigation

Learn how to build navigation systems, browser url’s and more.

Layout

Learn about Noodls powerful layout system and how to use it to create responsive UI.

UI Controls and Data

Learn how connect UI Controls to data nodes to create forms and more.

Creating a Backend

Learn how to set up a backend for your App, to store and read persistant data.

Javascript in Noodl

Learn how to use Javascript in Noodl and combine nodes with code.

Custom UI Components

Learn how to create your own re-usable components.

Featured modules

View all

Lottie

A module for using Lottie animations in Noodl.

Mapbox

Use this module to add maps and location visualisations to your app.

Chart.js

A module with components to build charts.

GraphQL

A module to help quering data using GraphQL.

QR Scanner

Scan QR codes from camera or images.

MQTT Module

Send and receive messages over the MQTT protocol in web apps.

Featured example projects

View all

Task List App

This example implements a small task list app that stores task in a database.

Custom Survey App

This app is a simple user survey. It shows how to work with navigation, visual and interaction states and custom components.

Star Rating Component

A small example that implements an animated interactive star rating component.

Navigation with URL encoded parameters

This example demonstrated how to use **Multiple levels of navigation stacks** and how to **Encode Parameters in the URL** to pass values between pages.

Suatch Google Sheets Example

A cool color picker that can helps a designer to pick good colors. Uses the Google Sheet Module.

Travel App

This app for travelers shows a number of destinations in a card like **horizontal list**. It also includes a simple **Navigation** system..

Mapbox Example

A small app that makes use of the MapBox module to implement a map with markers.

Recipe App

A small app that makes use of the MapBox module to implement a map with markers.

Modal Wizard

This example shows how to use a Component Stack in combination with a Popup to create a simple modal wizard-type of form.

CRUD Form

An example of a CRUD form. CRUD stands for Create, Read, Update and Delete, and the example shows how to do these actions using the Noodl data nodes.

Conditional Form

An example of a form using Noodl logical nodes to change contents depending on what options the user picks in the form.

Javascript Example

An example that shows how you can mix and match nodes with Javascript in Noodl. It implements a multi select list with a couple of operations on the list, such as batch delete and copy.