Guide
- How-to
- Logic
Guide
- How-to
- Logic
Guide
- How-to
- Logic
How to Add Logic To Your Framer Sites
In this Framer tutorial, I'm revealing a powerful tool called Noder that lets you add logic to your Framer sites without coding. You'll learn how to transform static elements into dynamic ones through practical examples like smart CMS collections and automatic avatar generation.
Posted by
Nandi
Table of contents
Getting started
I’ve always wanted to push my sites beyond just static pages, to make them dynamic, interactive, and smarter.
Recently, I found a tool that makes this incredibly easy: Noder. And get this, it lets you add logic to your Framer sites without writing a single line of code.
Let me show you exactly how it works and how I’m using it.
What is Noder?
Getting started
I’ve always wanted to push my sites beyond just static pages, to make them dynamic, interactive, and smarter.
Recently, I found a tool that makes this incredibly easy: Noder. And get this, it lets you add logic to your Framer sites without writing a single line of code.
Let me show you exactly how it works and how I’m using it.
What is Noder?
Getting started
I’ve always wanted to push my sites beyond just static pages, to make them dynamic, interactive, and smarter.
Recently, I found a tool that makes this incredibly easy: Noder. And get this, it lets you add logic to your Framer sites without writing a single line of code.
Let me show you exactly how it works and how I’m using it.
What is Noder?
Noder.
Noder.
Noder.
Noder is a no-code logic layer for Framer.
Created by Victorien, Noder comes with pre-built nodes that fall into three main categories:
Input: your raw data (e.g., a full name)
Transform: functions to process that data (e.g., find the first word)
Output: the final result (e.g., display the first name)
Think of it like this:
Input: John Doe
→ Transform: Use a “Find” node with a regex definition
→ Output: John
Example of using Noder
Let’s say you’re working with a CMS collection of creators.
Previously, I had to manually add two fields for every person:
Full name (e.g., “John Doe”)
First name (e.g., “John”)
That meant double the work every time I updated my CMS.
With Noder, I only need the full name field. Then I use nodes to extract just the first word. Here’s how:
Start with a Value node. This holds your full name—e.g., “John Doe”
Connect a Find node. This uses a regex to grab the first word. (I literally just asked AI to write the regex for me.)
Connect an Output node. This displays only the first name, like “John”
Once that’s working inside a component, you can expose the full name as a variable, so you can dynamically pull it from the CMS. Now I don’t need the extra “first name” field in the CMS at all. I just bind the full name and let Noder handle the rest.
No coding. Just connecting nodes.
Noder is a no-code logic layer for Framer.
Created by Victorien, Noder comes with pre-built nodes that fall into three main categories:
Input: your raw data (e.g., a full name)
Transform: functions to process that data (e.g., find the first word)
Output: the final result (e.g., display the first name)
Think of it like this:
Input: John Doe
→ Transform: Use a “Find” node with a regex definition
→ Output: John
Example of using Noder
Let’s say you’re working with a CMS collection of creators.
Previously, I had to manually add two fields for every person:
Full name (e.g., “John Doe”)
First name (e.g., “John”)
That meant double the work every time I updated my CMS.
With Noder, I only need the full name field. Then I use nodes to extract just the first word. Here’s how:
Start with a Value node. This holds your full name—e.g., “John Doe”
Connect a Find node. This uses a regex to grab the first word. (I literally just asked AI to write the regex for me.)
Connect an Output node. This displays only the first name, like “John”
Once that’s working inside a component, you can expose the full name as a variable, so you can dynamically pull it from the CMS. Now I don’t need the extra “first name” field in the CMS at all. I just bind the full name and let Noder handle the rest.
No coding. Just connecting nodes.
Noder is a no-code logic layer for Framer.
Created by Victorien, Noder comes with pre-built nodes that fall into three main categories:
Input: your raw data (e.g., a full name)
Transform: functions to process that data (e.g., find the first word)
Output: the final result (e.g., display the first name)
Think of it like this:
Input: John Doe
→ Transform: Use a “Find” node with a regex definition
→ Output: John
Example of using Noder
Let’s say you’re working with a CMS collection of creators.
Previously, I had to manually add two fields for every person:
Full name (e.g., “John Doe”)
First name (e.g., “John”)
That meant double the work every time I updated my CMS.
With Noder, I only need the full name field. Then I use nodes to extract just the first word. Here’s how:
Start with a Value node. This holds your full name—e.g., “John Doe”
Connect a Find node. This uses a regex to grab the first word. (I literally just asked AI to write the regex for me.)
Connect an Output node. This displays only the first name, like “John”
Once that’s working inside a component, you can expose the full name as a variable, so you can dynamically pull it from the CMS. Now I don’t need the extra “first name” field in the CMS at all. I just bind the full name and let Noder handle the rest.
No coding. Just connecting nodes.
Connecting Nodes.
Connecting Nodes.
Connecting Nodes.
Why this matters
This isn’t just about names. Once you understand how Noder works, you can build logic for:
Custom avatar generation
Text transformations
Math operations
And much more
All without code.
Why this matters
This isn’t just about names. Once you understand how Noder works, you can build logic for:
Custom avatar generation
Text transformations
Math operations
And much more
All without code.
Why this matters
This isn’t just about names. Once you understand how Noder works, you can build logic for:
Custom avatar generation
Text transformations
Math operations
And much more
All without code.
Noder capabilities.
Noder capabilities.
Noder capabilities.
Wrapping up
If you’ve ever wished Framer had more logic tools, this is your moment. Explore the node library (Input, Transform, Output). Start building smarter Framer sites.
And for even more in-depth take on Noder, I made a full tutorial on how to add logic to your sites.
Noder has seriously changed how I think about building in Framer.
Wrapping up
If you’ve ever wished Framer had more logic tools, this is your moment. Explore the node library (Input, Transform, Output). Start building smarter Framer sites.
And for even more in-depth take on Noder, I made a full tutorial on how to add logic to your sites.
Noder has seriously changed how I think about building in Framer.
Wrapping up
If you’ve ever wished Framer had more logic tools, this is your moment. Explore the node library (Input, Transform, Output). Start building smarter Framer sites.
And for even more in-depth take on Noder, I made a full tutorial on how to add logic to your sites.
Noder has seriously changed how I think about building in Framer.
