![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><path d="M 17.5 0 C 19.433 0 21 1.567 21 3.5 C 21 5.085 19.946 6.424 18.501 6.855 L 18.501 14.145 C 19.946 14.576 21 15.915 21 17.5 C 21 19.433 19.433 21 17.5 21 C 15.915 21 14.576 19.946 14.145 18.501 L 6.855 18.501 C 6.424 19.946 5.085 21 3.5 21 C 1.567 21 0 19.433 0 17.5 C 0 15.914 1.054 14.575 2.5 14.145 L 2.5 6.855 C 1.054 6.425 0 5.086 0 3.5 C 0 1.567 1.567 0 3.5 0 C 5.086 0 6.425 1.054 6.855 2.5 L 14.145 2.5 C 14.575 1.054 15.914 0 17.5 0 Z M 17.5 16 C 16.672 16 16 16.672 16 17.5 C 16 18.328 16.672 19 17.5 19 C 18.328 19 19 18.328 19 17.5 C 19 16.672 18.328 16 17.5 16 Z M 3.5 16 C 2.672 16 2 16.672 2 17.5 C 2 18.328 2.672 19 3.5 19 C 4.328 19 5 18.328 5 17.5 C 5 16.672 4.328 16 3.5 16 Z M 14.145 4.501 L 6.855 4.501 C 6.519 5.629 5.629 6.519 4.501 6.855 L 4.501 14.145 C 5.629 14.481 6.519 15.371 6.855 16.5 L 14.145 16.5 C 14.481 15.371 15.371 14.481 16.5 14.145 L 16.5 6.855 C 15.371 6.519 14.481 5.629 14.145 4.501 Z M 3.5 2 C 2.672 2 2 2.672 2 3.5 C 2 4.328 2.672 5 3.5 5 C 4.328 5 5 4.328 5 3.5 C 5 2.672 4.328 2 3.5 2 Z M 17.5 2 C 16.672 2 16 2.672 16 3.5 C 16 4.328 16.672 5 17.5 5 C 18.328 5 19 4.328 19 3.5 C 19 2.672 18.328 2 17.5 2 Z" fill="rgb(137, 87, 254)" height="21px" id="fBxEEsIjc" transform="translate(7.5 7.5)" width="21px"/><path d="M 1 8 C 0.448 8 0 7.552 0 7 L 0 1 C 0 0.448 0.448 0 1 0 L 1 0 C 1.552 0 2 0.448 2 1 L 2 7 C 2 7.552 1.552 8 1 8 Z" fill="rgb(235, 233, 240)" height="8px" id="G3_oFqgM1" transform="translate(14 14)" width="2px"/></svg>)
Highly customisable
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.
Design on the canvas
Design all fields directly on the canvas for full control over styles and effects.
Label
Nicolas
Unfocus
・Primary
Label
Value
Focus
Laura
Label
Value
Filled
Label
Placeholder
Error
Add transitions and effects
Add transition as you do as usual with any design component.
Title
Name
Surname
Make dropdown your own
You can set a custom format validation or pick one from the list.
Select
🍔
Bur
🧀
🥞
Combine it with native form
Send the form to any URL you want. You can use services like Mailchimp or Formspark. Or, send it to your own service.
Powerfull Logics
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.
Apply Math Formula
Use math formula to display statistics.
80%
Difference
Annual
Growth
120k
80k
40k
Use format validation
You can set a custom format validation or pick one from the list.
victorien.net
Typer
Format
Regex
None
Custom
Send the form to any URL
Send the form to any URL you want. You can use services like Mailchimp or Formspark. Or, send it to your own service.
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.
Multipage Forms
Now, with Noder, you can create websites that include randomness, math calculations or calculators without requiring development. See the use cases below.
Insert
Layout
Text
CMS
Actions
Publish
Calculators
Now, with Noder, you can create websites that include randomness, math calculations or calculators without requiring development. See the use cases below.
Insert
Layout
Text
CMS
Actions
Publish
Quizzes
Now, with Noder, you can create websites that include randomness, math calculations or calculators without requiring development. See the use cases below.
Insert
Layout
Text
CMS
Actions
Publish
A Component for every possibility
Each component has a specific function and works with the others. They can be combined in various ways, creating endless possibilities.
Text
Display text output
Bar Chart
Arrange datasets into bar charts
Mabe by
Value
Input a number or text value
Datasets
Input values from CSV format
Form
Input value from a Typer form
Mabe by
absolute
Return the absolute value of a number
round
Round the number to the nearest integer
truncate
Truncate the number by removing any fractional digits.
count
Count the item amount.
sum
Return the sum of all values.
average
Return the average of all values.
Mabe by
multiply
Multiply all the values by each other.
divide
Divide all the values by each other.
Max
Returns the largest number
Min
Returns the smallest numbers
Random
Return a random item from the selection
Quiz Kit
A complete solution for creating customisable forms, quizzes and calculators in Framer.
Typer
Mostly
Boolean
Documentation
Calculators Kit
Typer is now available in Beta on Figma Site.
Typer
Sum
Count
Product
Documentation
Soon