Skip to main content

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!

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

Custom Survey App

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

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..

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.

Sign Up / Sign In Form

This app includes a simple Sign Up / Sign In form, including buttons for requesting a new password and validating your email.

Featured videos

View all

Using the Noodl Figma plugin

This video shows how to use the Noodl Figma plugin.

06.56

Watch video

Using the sign-up template

Learn how to make a complete sign-up flow, including email setup for account validation and password recovery.

19.55

Watch video

Tab Navigation Template

Learn how to build a tab menu that let's the user navigate between different pages.

02.38

Watch video

Star Rating Component

Learn how to build an animated star rating component from scratch.

07.10

Watch video