Noodl includes free hosting to build and launch your MVP! Read more about hosting features.

close button
Download
Release Notes
|
February 10, 2022

Release Notes - Late 2021 Big Update (Noodl 2.4)

2.4 Release Notes

This is a big update. We've focused on making Noodl easier to use, and faster, by improving things such as how a connection is made, extending the capabilities of the visual nodes, like Buttons and Sliders, having built-in icon libraries, and much more.

The documentation has also been updated with more tutorials and guides, check it out here: https://docs.noodl.net/2.4/#/tutorials/getting-started

Summary of updates

  • New UI nodes
  • Repeater node
  • New Visual nodes
  • Added icon picker
  • Visual states (hover, pressed, etc.)
  • Variants
  • More styling features
  • New node picker
  • Page component
  • Visual query builder
  • New user management nodes
  • Improved connection flow
  • Inspect mode in canvas
  • Updated documentation
  • And many more updates that aren't captured here yet

Updates to visual nodes and features

Update nodes for UI controls

Button: Support for label, icon and more styling features.

Checkbox: Support for label, icon and more styling features.

Dropdown: Renamed from Options. Support for label, icon and more styling features.

Radio Button: Support for label, icon and more styling features.

Slider: Renamed from Range. Support for more styling features.

Text Input: Support for label, icon and more styling features.


Renamed “For Each” to “Repeater”

The For Each node has changed color and name and is now called “Repeater”. You can now also double click on Repeater nodes to navigate the component it creates.


New visual nodes

  • New Icon node. The old Material Icon module is now deprecated in favor of the new built in “Icon” node. https://docs.noodl.net/2.4/#/nodes/ui-elements/icon/
  • New Link node. Link to URLs outside your Noodl application. https://docs.noodl.net/2.4/#/nodes/navigation/external-link/

Icon Picker

New icon picker for selecting icons in nodes like the Button, Dropdown, Text Input, etc.


Visual states

Style your elements differently depending on the state. Allows you to change the background color of a Button on hover, add an icon to a checkbox when it’s checked, and much more.


Set transitions between the different visual states

Variants

With the improved styling features, and visual states, you can often do an entire design only within the property panel. These can now be saved as “variants”.


More styling features

  • Set corner radius on individual corners
  • Set borders on individual sides

Improved color picker

Color picker has been refined and allows you to set the opacity/alpha


Improved style handling

Color styles and text styles are now created, deleted and edited directly from the property panel. The styling panel in the sidebar has been removed.


Pages

New page nodes make it easier to define an URL for your pages, and to add inputs that are extracted from the URL. (e.g. /path/to/{input-name}, or myurl?inputName=value)


Pages have their own component type

The new Page Router makes it easier to manage all your pages

Data and backend features

Visual query builder

Query the database with a new query builder.


Data nodes have been split up into multiple nodes

  • Object, Array and Model have been split up into multiple nodes. This makes it easier to search for, and easier to see what’s happening in the node graph.
  • “Model” has been renamed to “Record”
  • New nodes allow you to filter Records locally, and add or remove relations

New user management nodes

The user module has been deprecated in favor of the new built-in user nodes.


General improvements

Improved connection flow

Inputs and outputs are now visually connected to the nodes you’re connecting to. Documentation is shown when hovering over a property, and signals are marked with an icon. It’s also smarter about hiding and disabling properties that are incompatible, like a signal being connected to a boolean.


Inspect mode in the component canvas

Click on a visual element in the component canvas to select the corresponding node


New node picker

New design makes it easier to find what you’re looking for, and to learn more about all the nodes

New deploy popup


Updated tutorials and documentation

The documentation has a new look, and includes new guides and tutorials: https://docs.noodl.net/2.4/#/tutorials/getting-started

Get started for free