Core building blocks of application development demo

Empower application development in Webflow with these building blocks
EXAMPLE 1
React to user input - Click event
EXAMPLE 2
React to user input - Form input
EXAMPLE 3
React to user input - Form submissions
EXAMPLE 4
Communicate with a database
EXAMPLE 5
Authentication and login experience
EXAMPLE 6
Access control rules and permissions
EXAMPLE 7
State management and user preferences
EXAMPLE 8
Third-party libraries - Chart JS or Quill

Example 1:

When a user clicks the CTA, change the CSS styles of another element
React to a user's input

Listen to events in real time within your application. Choose the logic that runs after the user interacts with the interface.

Generate a new color

Example 2:

Read user input and update text on the page based on the input

Listen to events in real time within your application. Choose the logic that runs after the user interacts with the interface.

React to a user's input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Hi there, how is it going?

Example 3:

Access, read, and make actions based on form submissions
React to a user's input

Listen to events in real time within your application. Choose the logic that runs after the user interacts with the interface.

<hidden input — get current page path>
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Raw data
Rendered components
Form submission results
{
nickname: "Pete"
favorite color: "Blue"
page: "https://fs-wized.webflow.io/demo-dram-edit"
}
Form submission results in a component
{Nickname} is an absolute legend!
Is {color} everyone's favorite color?

Example 4:

Use Wized to communicate with any backend database.
Connect to any backend

Integrate your Webflow project to any backend with a REST API using Wized.

Step 1 — Select a backend
Xano
Firebase
Supabase
AWS
Step 2 — Send data to Xano
<hidden input — get current page path>
Something went wrong
A new item was successfully created
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Step 3 — Get, and render data
Get data from Xano
Rendered components
  • Your submissions will be listed here...
  • Delete
    Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.
Raw Xano data
Xano response
Nothing to display yet
Step 2 — Send data to Firebase
<hidden input — get current page path>
A new item was successfully created
Something went wrong
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Step 3 — Get, and render data
Get data from Firebase
Rendered components
  • Your submissions will be listed here...
  • Delete
    Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.
Raw Firebase data
Firebase response
Nothing to display yet
Step 2 — Send data to Supabase
<hidden input — get current page path>
Something went wrong
A new item was successfully created
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Step 3 — Get, and render data from Supabase
Get data from Supabase
Rendered components
  • Your submissions will be listed here...
  • Delete
    Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.
Raw Supabase data 
Supabase response
Nothing to display yet
Step 2 — Send data to AWS
<hidden input — get current page path>
Something went wrong
A new item was successfully created
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Step 3 — Get, and render data
Get data from AWS
Rendered components
  • Your submissions will be listed here...
  • Delete
    Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.
Raw AWS data
AWS response
Nothing to display yet

Example 5:

Authenticate users with multiple auth sign-in methods
Authenticate users to provide unique login experiences

Unlock the possibilities: seamlessly connect with email, passwords, or social login.

Select sign-in methods for the form below:
There was an error
Continue with Google
Continue with Github
Continue with Facebook
Any auth or SSO solution
Need something custom? Let us know!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Example 6:

Access control rules
Set user permissions within the application

Set up user tiers, and choose which features each user can access.

Fakeapp
  • Projects
  • Clients
  • Invoices
  • Messaging

HEEEY!? Log in first!

Logout
Your projects
Dummy text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Name
Progress
Next task
Budget
Dummy text
Design sitemap
$14,500
Dummy text
Dummy text
Rows per page: 8

Example 7:

Using state management for personalization

Manage application state

Enable your users to personalize the design, save their preferences, and create delightful experiences for your users.

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Example 8:

Add charts to your app with the Charts JS library
Add more functionality with Wized JavaScript API

Want unique functionalities specific to you? Extend Wized using your own code. From visual enhancements to chart integrations, our API has you covered for feature growth.

Start using Wized today

Sign up now