Noder

 

Remix it

 

Noder

Developer

Store

 

Remix it

 

Add logic to your Framer component

Connect nodes to create meaningful content without coding.

Insert

Layout

Text

CMS

Actions

Publish

Home

Random Card

Portfolio

Total balance

Ƶ 670.00

🍋

Ƶ

67

🍓

Ƶ

56

🍌

Ƶ

31

🍑

Ƶ

32

Transactions

25

Product

Balance

🍓

Strawberry

Ƶ56.00

🍋

Lemon

Ƶ67.00

🍌

Banana

Ƶ31.00

🍑

Peach

Ƶ32.00

🍅

Tomato

Ƶ27.00

🥑

Avocado

Ƶ30.00

🥝

Kiwi

Ƶ48.00

Sum

Count

Price

Price

Collection List

Price

Price

Price

Price

Price

Insert

Layout

Text

CMS

Actions

Publish

Pages

Layers

Assets

Random Card

Primary

Suit

Random Rank

Rows

Random Node

Value Ace Node

Value King Node

Value Queen Node

Value Jack Node

Value 10 Node

Value 9 Node

Value 8 Node

Value 7 Node

Home

Random Card

Portfolio

Total balance

Ƶ 670.00

🍋

Ƶ

67

🍓

Ƶ

56

🍌

Ƶ

31

🍑

Ƶ

32

Transactions

25

Product

Balance

🍓

Strawberry

Ƶ56.00

🍋

Lemon

Ƶ67.00

🍌

Banana

Ƶ31.00

🍑

Peach

Ƶ32.00

🍅

Tomato

Ƶ27.00

🥑

Avocado

Ƶ30.00

🥝

Kiwi

Ƶ48.00

Sum

Count

Price

Price

Collection List

Price

Price

Price

Price

Price

Position

Type

Relative

Size

Width

1fr

Fill

Height

Auto

Fit

Effect

Styles

Transition

Instant

Opacity

1

100001

Visible

Yes

No

Rotation

0°

Text

Node

Random

Tag

p

Placeholder

A

Placeholder

Abhaya LIbre

Color

#4D4C48

Size

16

16

Letter

0

-

+

Line

1.2

-

+

Paragraph

0

-

+

Align

⊢

-

⊣

⊤

-

⊥

Transform

None

Decoration

Aa

Aa

Aa

 

Code visually

Noder is a Node-based programming. A visual method where operations are represented as nodes connected to define a program's flow, offering an intuitive way to design algorithms.

Create content on‑the‑fly

Generate texts and charts dynamically.

Le tramway jaune avance lentement dans le brouillard laiteux et surchauffé de cette fin d’après midi d’été. Le trafic s’écoule sous la canicule, se disperse et se répand dans les mille recoins de Budapest. La ville piétine et les enfants assiègent les marchands de glace. La voiture passe au loin, tourne

Le tramway jaune avance lentement dans le brouillard laiteux et surchauffé de cette fin d’après midi d’été. Le trafic s’écoule sous la canicule, se disperse et se répand dans les mille recoins de Budapest. La ville piétine et les enfants assiègent les marchands de glace. La voiture passe au loin, tourne sur les grands boulevards, longe une avenue et débouche sur le pont Elisabeth.

Replace by

Dataset

Apply Math Formula

Use math formula to display statistics.

80%

Difference

Annual
Growth

120k

80k

40k

Use value's Collection

Create content dynamically from a collection of values.

Collection List

Amount

Amount

Amount

Amount

Chain multiple transformations

There's no limits to the number of nodes you can link together.

Insert

Replace by

Round

Average

Value

Unlock Framer possibilities

Now, with Noder, you can create websites that include randomness, math calculations or calculators without requiring development. See the use cases below.

Dashboards

Noder comes with mathematical nodes that allow you to perform various types of caluculations like a

 

 

 

product

 

or a

 

 

 

average

 

. By suing the values of your collections, you can build automated dashboards that will show various metrics.

Noder comes with mathematical nodes that allow you to perform various types of caluculations like a

 

 

 

product

 

or a

 

 

 

average

 

. By suing the values of your collections, you can build automated dashboards that will show various metrics.

 

    

Open in Framer

 

Insert

Layout

Text

CMS

Actions

Publish

Insert

Layout

Text

CMS

Actions

Publish

Randomness

With the

 

 

 

Random

 

node, you can randomly pick a value from a list of your choice. This allows you to create a user experience based on randomness, adding a bit of spice to your website experience, all without a single line of code.

With the

 

 

 

Random

 

node, you can randomly pick a value from a list of your choice. This allows you to create a user experience based on randomness, adding a bit of spice to your website experience, all without a single line of code.

 

    

Open in Framer

 

Insert

Layout

Text

CMS

Actions

Publish

Insert

Layout

Text

CMS

Actions

Publish

Calculators

You can retrieve a

 

 

 

value

 

from a Typer form and apply any transformation available from the Nodes. This opens up the possibility to create more advanced form like ROI calculators or interactive forms.

You can retrieve a

 

 

 

value

 

from a Typer form and apply any transformation available from the Nodes. This opens up the possibility to create more advanced form like ROI calculators or interactive forms.

 

Preview

 

Insert

Layout

Text

CMS

Actions

Publish

Insert

Layout

Text

CMS

Actions

Publish

A Node for every possibility

Each node covers a specific purpose and works with others. You can combine them in various ways, opening endless possibilities.

Text

Display text output

i

Remix it

Bar Chart

Arrange datasets into bar charts

Mabe by

Remix it

Value

Input a number or text value

i

Remix it

Datasets

Input values from CSV format

i

Remix it

Form

Input value from a Typer form

Mabe by

Remix it

absolute

Return the absolute value of a number

i

Remix it

round

Round the number to the nearest integer

i

Remix it

truncate

Truncate the number by removing any fractional digits.

i

Remix it

count

Count the item amount.

i

Remix it

sum

Return the sum of all values.

i

Remix it

average

Return the average of all values.

Mabe by

Remix it

multiply

Multiply all the values by each other.

i

Remix it

divide

Divide all the values by each other.

i

Remix it

Max

Returns the largest number

i

Remix it

Min

Returns the smallest numbers

i

Remix it

Random

Return a random item from the selection

i

Remix it

 

See All Nodes

 

 

See All Nodes

 

 

 

Develop your Node

Looking for a specific node for your project? You can create yours! Everyone can develop their own nodes that work with the ecosystem.

 

Try it out

 

Remix it all for free

The Nodes are free. Don't wait! Remix the full kit of Nodes now.

 

Remix it

 

 

 

Develop your Node

Looking for a specific node for your project? You can create yours! Everyone can develop their own nodes that work with the ecosystem.

 

Try it out

 

Insert

Layout

Text

CMS

Actions

Publish

Home

MyNode.tsx

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

import { ControlType, addPropertyControls } from "framer"

import { useNodeInput, useNodeOutput, Node } from "framer-nodes"


export function Product({input}) {

const [values] = useNodeInput(input);

const [output, setOuput, deleteOutput] = useNodeOutput(

values.reduce((total, value) => total * value, 1)

);


useEffect(() => {

return () => { deleteOutput() }

}, [])

return <Node />

}


addPropertyControls(Product, {

input: {

type: ControlType.Array,

control: {

type: ControlType.ComponentInstance,

},

},

})

Remix it all for free

The Nodes are free. Don't wait! Remix the full kit of Nodes now.

 

Remix it

 

Insert

Layout

Text

CMS

Actions

Publish

Pages

Layers

Assets

Value

Datasets

Form

absolute

round

truncate

count

sum

average

multiply

divide

Max

Min

Random

Find

OR

Value

Datasets

Form

absolute

round

truncate

count

sum

average

multiply

divide

Max

Min

Random

Find

OR

Position

Type

Relative

Size

Width

1fr

Fill

Height

Auto

Fit

Effect

Styles

Transition

Instant

Opacity

1

100001

Visible

Yes

No

Rotation

0°

Text

Node

Random

Tag

p

Placeholder

A

Placeholder

Abhaya LIbre

Color

#4D4C48

Size

16

16

Letter

0

-

+

Line

1.2

-

+

Paragraph

0

-

+

Align

⊢

-

⊣

⊤

-

⊥

Transform

None

Decoration

Aa

Aa

Aa

FREE

 

Noder

Made by Victorien.

Contribute

Admire the work? Support me to enhance its

Buy me a coffee

Developer

Create your own node that work with the ecosystem

Documentation

Contact us

Don't hesitate to reach out if there's any question

Contact me