Building Apps on Webflow | Coding on Webflow | Sygnal-U

Coding on Webflow

Building Apps on Webflow

Overview
Building Apps on Webflow
001
Popular App Patterns
User-Specific Data Patterns
051
User Directory Site Pattern
052
Using Codepen
What Does CodePen Give You?
100
Using CodePen with Webflow for Script Dev
10:20
101
Using CodeSandbox.io
CodeSandbox.io
300
Using Github.dev
GitHub.dev
400
Webflow Dev Stacks
Webflow Development Stacks
500
Webflow + HTMX
501
WWX - Webflow + Wized + Xano
502
WR - Webflow + React
504
Libraries
Useful Libraries
600
Libraries
Svelte
600
Libraries
Webflow + Vue.js
600
Leveraging CodePen Effects in Webflow
Migrating CodePen Effects into Webflow
16:45
801
No items found.
Published
July 17, 2023
Updated
November 2, 2024
in lightbox
Webflow has an excellent designer, is it good for building apps?

Every day I see people wanting to build applications on Webflow, which is not an app design framework. They don't understand the difference between a site designer and an app designer.

Let's fix that.

What's the difference?

Site builders like Webflow give you the tooling for great page design. They generate the HTML, CSS, animations, and navigation needed to deliver an attractive experience.

App builders have a very different focus: functionality.

Apps are characterized by complex, interactive interfaces, data integration, and business logic, that work together to to achieve a goal. Google Docs, Facebook, Amazon, Spotify, Netflix, and Airtable are examples.

So is the Webflow designer itself.

The capabilities needed to build an app often includes;

  • User-specific data, tied to a user account. Some of that data is secured and only accessible to the user and the business. Other data ( auction listing, classifieds, profile info ) needs to be publicly available on the site.
  • User-specific UX, consoles and lists
  • Complex logic and business rules as to how the system should behave
  • Back-end processes like email notifications and external system integrations
  • Typically, security concerns

Where are Webflow's limits?

To understand the challenges of building an app on Webflow, here's a breakdown of some key capabilities that are needed to support app development.

What this means

If you look at these limitations, you'll quickly understand why it's difficult to build applications like;

  • Auction sites
  • Classified listing sites
  • Apartment listing services
  • Education ( LMS ) systems with courses and student profiles
  • "Credit"-based payment systems, e.g. pay $10/mo, get "credits" for 20 video downloads.

... and many more.

Webflow is not designed to support these types of applications.

But if you're determined enough, you can make it work.

Bridging the Gaps

So now you know Webflow's limits, and you want to forage ahead anyway, what are your options?

Webflow + Wized + Xano ( WWX )

Probably the best Webflow-centric framework for app development is Wized + Xano, which offers a programming environment that works on top of a Webflow site.

It provides for secure user authentication, external data access, business logic, dynamic interfaces, basically everything I listed above that Webflow lacks for app dev.

It's targeted at nocode developers, and adds a lot of conveniences, for a price.

Memberstack + Make + CMS / Airtable

For skilled Javascript developers, another good solution is Memberstack ( for memberships and user identification ), Make ( for data transport and server-side logic ) and optional Airtable ( for data storage and to simplify admin data management ).

The CMS can be used here as well, particularly for data that is not user-specific.

Notes for a Full-Stack Engineer

For FSE's who are considering Webflow-

  • WF is primarily about about flexibility in design. Generate slick, responsive HTML and CSS from a WYSIWYG designer. Think of it as the photoshop of the web.
  • Hosting, CMS, and other hosted features like Localization and ECom are now more central to WF's revenue gen, but the platform is NOT designed for building complex full stack sites. It's a fairly narrow spectrum of in-build capabilities, and a lot of the process is about learning where those walls are.
  • Once you find the walls, your process is either about choosing which websites work well on WF, or climbing those walls by learning 3rd party integration options. This is the same approach as WP marketplace, though WF is early days on apps and apps capabilities. Same as Shopify too, you get core features, and then you pay 3rd parties to extend.
  • If you need complete flexibility, use WF to gen your HTML/CSS then export and build your own back end, this is often the most popular approach for full stack devs especially if you do not intend to change the design often, or are building something like a SaaS.
  • Site search is free, but limited in configurability. There are other free/cheap site searches you can integrate.
  • Authentication depends on what you want. Most people build something custom e.g. Firebase or Supabase, or choose a full-fledged paid membership platform like Memberstack or Outseta.

Webflow is great for building award winning sites, for quick admin and republish, for simple CMS work, for quick build-publish cycles ( once you're experienced ).

Any time you want app-like functionality... user accounts, ecom history, serious content security, middle tier logic... any full stack engineer should simply export and then build the back end exactly how you like.

FAQs

Answers to frequently asked questions.

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.