[McGuire] There's a pattern in all great stories. We're at Point A. We want to get to Point
C. But to get there, we have to go through Point B. And this goes back to Aristotle's Poetics. Aristotle said this: all great stories are
made up of intention...and obstacle. In order to fulfill a character's intention,
they must first overcome a great obstacle. [Grimur] Uh...Let's pause for a second. [McGuire] What’s up? [Grimur] You know Aristotle didn't say any
of those words. [McGuire] Aristotle wrote Poetics. [Grimur] But you said those words in English. [McGuire] Can you prove… [Grimur] ...here we go... [McGuire] that he didn’t say these words? [Grimur] Can I prove — let me get this right. Can I prove that Aristotle didn’t speak
English? [McGuire] It’s not impossible. [Grimur] He was in the fourth century. [McGuire] Okay, improbable. [Grimur] ...BC. [McGuire] What Aristotle was GETTING at, though,
is something that affects all great storytelling. Luke wants to save the princess. The Empire gets in the way. Intention...and obstacle. Elsa wants to live a normal life, but there's
a curse in the way of doing that. Intention...and obstacle. Every book you’ve ever loved, every tale
you’ve ever heard has followed this same pattern. There’s a thing they want or need. A “what-if.” And an obstacle in the way of getting it. The story gets interesting when our characters
attempt to overcome their obstacles. This happens in the real world, too. To send a long-distance message to someone,
you used to need a telegraph operator, and they’d use Morse code to transmit the message. Now we just pick up the phone...to call, or
text, or even see the person's face. Designers creating magazine layouts would
need scissors, and glue… teams of typesetters. (This is literally where we get the term “cut
and paste” from.) But now they just use InDesign or Canva to
make this happen directly. Doing computations used to require a room-sized
mainframe and a knowledge of programming languages like Pascal and C — but now billions of
people can use spreadsheets that give them computing superpowers. To edit videos, you literally had to cut and
splice film together, or swap out VHS tapes using really expensive hardware. Now almost everyone has a film studio in their
pocket. What does any of this have to do with Aristotle? Overcoming these obstacles is where things
start to get REALLY interesting. Here's how. Whenever we've had even a tiny revolution
in these technologies, it's usually been achieved by democratizing something that was previously
exclusive to a smaller group. It shrinks Point B so much that whoever's
at Point A can reach out and touch Point C. We've seen this same pattern for a while in
creating user interfaces. Since long before the work at Xerox PARC,
we've been trying to find better ways to use direct manipulation to bring designs to life. For most of the HISTORY of computing, it's
required a translation step to go from design to code. We know that because a designer designs a
UI...and they hand it off for development to bring that design to life. And there’s a LOT of back and forth in this
translation step. Because after it’s first built, you could
have just one or two changes... or 30. Back and forth we go. Round and round, all because we have to translate
our ideas from Point A to get us to Point C. The fact that you even NEED that translation
step means most people can’t ever GET to point C without writing code. And that’s because translation (the work)
to get from A to C requires B, which can be highly specialized, and hard to learn, and
expensive. And so very few hold the keys to this process. So many of those who can imagine creating...
don’t have the necessary tools to make it real. So... Let’s do a thought experiment. A what-if. What if DESIGNERS had the power to create
software directly? What if they could do this without requiring
a translation step to bring their ideas to life? What if instead of writing the code for an
interactive website animation, a designer could build and deliver the whole thing from
end to end? What if anyone could turn something like a
spreadsheet into a fully-functional mobile application? What if creating a new product didn’t require
learning tons of development frameworks – but instead, you could build it directly based
on rules and workflows you define? And what if powerful websites and web apps
were built completely visually? Instead of writing code in a text editor,
what if we could build our designs directly? And the code...would write itself? And what if delivering all we create to the
world didn’t require manual deployment — and we could just push this stuff directly to
production? What if the obstacles that are holding so
many people back...could be overcome? In other words, the BIG “what-if” we’re
trying to answer is this... What if more people were empowered to create
things directly WITHOUT translation? Could we build a bridge from Point A to Point
C that didn’t always require going through Point B? That’s why we’re here today. How do we envision the future? Will building software and creating with no-code
evolve with the same inevitability as communication, and print design, and graphic design, and
3D animation, and photography, and game design, and video editing, and illustration? [Grimur] Yeah, yeah, yeah — it’s uh...it’s
a little long. [McGuire] It’s empowering. [Grimur] The music ended like 8 minutes ago. [McGuire] How would you do it? [Grimur] How would I end it? [McGuire] Mmhmm. [Grimur] I’d just cut to black. [McGuire] Okay. And then? [Grimur] And then I’d show the No-Code Conf
logo. [Stacy] No-Code Conf logo... Here it is. [Grimur] Mmhmm, mmhmm okay okay. Almost there. Let’s uh. Miguel can we add the chord at the end? [Miguel] I'm way ahead of you. [Grimur] Perfect. [Vlad] Welcome to No-Code Conf 2021, everyone! Thank you all so much for coming today – we
have people joining us from over 135 countries. That’s just... unbelievable! I mean, I believe it (because this movement
is growing really fast and the numbers are right there for us to see), but it still feels
surreal to me! I'm here at the Palace of Fine Arts in San
Francisco, where we're going to be hosting a bunch of breakout sessions, in addition
to dozens and dozens of virtual sessions from people across the world and across the no-code
space. I'm so excited about the agenda for both days
of the conference this year. Two years ago, we hosted the very first No-Code
Conf not too far from where I’m standing today – and the world has changed so much
since then. Today, even more of how we live our lives,
how we do our work, and how our economies operate relies on the internet – which is
powered by software, which is written in code. But it’s still the case that less than half
of one percent of the world can write code directly – meaning that the vast, vast majority
of innovation in software (the stuff that’s transformed our lives and the entire world
around us)... – it’s come from just this tiny group of people. And it’s mostly this tiny group of people
who have been able to realize the huge economic opportunity that comes from solving problems
through software. With the no-code movement, we don’t want
to take that power away from anyone… but rather also put it into the hands of the billions
of people on this planet who don’t code. What drives us... is pretty simple: we believe...that
if we can remove a lot of the obstacles that stand in the way of most people creating software
for the internet (if we multiply the number of people who could build for the web) – we
can unlock so much more creative and economic potential, and make the craft of software
development more human in the process. What would shattering that code barrier enable? How much complexity would that eliminate? Most importantly, how many real human beings
could we empower? And what previously unimaginable possibilities
would we see come to life...because a hundred times as many people could harness the incredible
power of software development? That’s why we're all here today at No-Code
Conf: we want to push the limits of what we can all bring to life with no-code. Removing the obstacles in our way to empower
more and more people — designers, entrepreneurs, teams, entire companies — to bring ideas,
and experiences, and entire products to life in a fundamentally more intuitive way. And since our last conference, we’ve seen
rapid acceleration in the no-code space. Tools like Figma and Framer are transforming
the way people design and prototype user interfaces. Companies like Glide and Adalo are bringing
the learning curve way down to create powerful mobile apps. Airtable is bringing us the power of data
to solve for what previously required complex databases. Voiceflow is transforming the way people build
for voice and chat. Bubble and Unqork are enabling companies to
build complex web applications. Productivity tools like Notion and Coda are
even bringing traditionally code-like solutions to docs and wikis. Even Apple is putting the power of no-code
automation into the hands of every iPhone and Mac user with Shortcuts. And people are starting to connect and combine
a lot of these tools to do what was previously only possible with code. Services like Zapier and Parabola are helping
us connect different tools together — different services that trigger actions based on what
people configure visually. In fact, most of what people are able to do
in these tools today used to require teams of engineers to solve. With all of this, more manual work is being
automated, people are making a living, new businesses are being built, existing businesses
are transforming how they work — all of this, because these no-code tools empower
more people to create directly without a translation layer in the middle. And what we've clearly seen is that it’s
way more than a trend. Not only is no-code elevating the power of
computing to a visual interface. But just like we witnessed in the early days
of the internet (when it transformed from a hobby to a powerful way to connect and build
and do more), we're seeing no-code being used across the entire world to benefit the lives
and businesses of millions of people. We’re even starting to see companies create
formal full-time roles with titles like “No-Code Developer” and “Visual Developer” – which
would have been really hard to believe even just a couple years ago. And despite the label “no-code” that has
come to represent this category of tools. I mean, it’s in the conference name — it’s
actually all powered by code under the hood. Surprise surprise, hope I’m not shocking
anyone here! What we’re actually doing is taking the
systems that software engineers have created, refined, and battle-tested over the last 50
years (and taking many of the code-based APIs that are used by engineers today), and adding
an intuitive user interface on top of them. This doesn’t remove any of the actual code
behind the scenes, but instead it hides it behind a visual interface. And that brings all the power of those code-based
primitives to the rest of the world that doesn't code. So there’s actually not much magic under
the hood. We are taking proven software engineering
principles and concepts and building blocks, and making them accessible via direct manipulation. So what are those core software engineering
concepts, you might ask? Well, they fall into three major pillars of
software development: The first is UIs (user interfaces), which
we talked about in the intro. This is how people interact with a website
or application. For the web, frontend engineers use technologies
like HTML, CSS, JavaScript (and frameworks like React) to build UIs with code. The second pillar is data – or a store of
all the structured records behind the scenes. It could be all the content stored in a CMS
for a marketing website, or all the users and photos and comments stored in a database
for a huge service like Instagram. Backend engineers typically set up databases
like MySQL and Mongo to store and retrieve all this data. And the third major pillar is logic – or
all the custom decisions and workflows and actions that happen when a user does something
through a UI, or something in the database changes. Logic is basically, IF this happens...THEN
something else happens as a result. For Airbnb, it might be logic that runs all
the payment and booking code. If someone hits the "Reserve" button, THEN
send a text message to the host of that property. For Youtube, IF someone uploads a new video,
THEN insert a new record into their video database and trigger emails to certain subscribers. Each application has tons and tons of custom
logic, and software developers use programming languages and frameworks like Node.js and
Ruby on Rails to write all this logic in code. No-code tools are taking all this code complexity
– across UI, data, logic, and infrastructure – and dramatically simplifying it by hiding
and automating all the things that can be automated. Let’s just take Webflow as one example…
and how we’ve started to tackle some of these pillars. Webflow, of course, focuses on the first two
pillars — UI and data. In fact, when we launched Webflow in 2013,
we unlocked the ability for people to harness the power of HTML and CSS to build websites
and UIs visually. It unlocked the same tags and styling properties
that developers were using, but made them available through an interface that automatically
generated production-ready code behind the scenes. And what happened when designers discovered
that they could create the same kind of super custom, highly-interactive, production websites
as some of the best developers in the world? Creative output exploded, and millions more
people started building high-end responsive websites directly without having to translate
to code. A few years later, we expanded into data by
building our own CMS. But we didn’t just build a traditional CMS
that only stores basic things like pages and blog posts. Instead, we decided to make it really flexible
(like the databases that developers use) so that you could create pretty much any kind
of database structure or schema, regardless of what kind of content you might be storing
in it. This meant that you could now create and manage
a database without code. (Airtable did this too, by the way.) So what developers were creating with programming
frameworks and SQL (things like creating, updating, and deleting records via code) was
now accessible to non-coders who also wanted to harness the power of building with data. But the true power emerged when we combined
these two powerful pillars together. We made it seamless to pull live CMS data
from the database directly into the UI – and design WITH that live data right on the canvas. While the two concepts of UI and Data are
really powerful separately, bringing them TOGETHER created something far greater than
the sum of their parts...while STILL resulting in exactly the same end product – a production
website or application that is powered by live data. Gone is the obstacle and the friction of translating
all this to code manually. Now Webflow's just one example of this trend
of moving development into the visual realm — because we're seeing people connect all
sorts of no-code tools together to do amazing things. I mentioned Zapier earlier – they’re leading
the charge here to help connect multiple tools and services, all through a point-and-click
UI. But the idea here is a powerful one: the connection
of just two of these pillars of software development unlocks so much more than either one of them
in isolation. And since our last conference, the no-code
space has grown tremendously. Terms like "visual development" and "citizen
developers" are becoming more commonplace. The tide is clearly starting to shift when
it comes to no-code no longer being seen as a hobby or a toy — it’s finally being
seen as a powerful tool for individuals and companies to solve really important technical
and business problems faster. But with all the progress made so far, we
still have a long way to go to bring the full power of software development to no-code tools
and platforms. It’s really the very early days of this
movement taking shape, but that’s also what makes it really exciting to me – because
the vast majority of what we need to create to empower the world to build for the web
is yet to be invented. But before we go deeper on what the future
of no-code might have in store for us, I want to pass it over to Bryant and the team back
at Webflow’s San Francisco office for an update on Webflow's customers and community
– and to talk about some really exciting things that we’ve been working on. Bryant? [Bryant] Thank you, Vlad. I'm really excited to share some of the progress
that's been made since our last No-Code Conf. And we'll start with our customers. At Webflow, we 've seen massive growth in
terms of designers, developers, marketers — people who use Webflow and who rely on
robust, powerful tools to create and host world-class websites. Together, this community has published over
a million new websites since our last conference. And our customers are using Webflow to build
these powerful interfaces, and they're combining them with data... to produce world-class and
award-winning sites...without writing code. With freelance designers like Nirav Suthar
— who in just 14 months not only surpassed the $100,000 mark in freelance revenue using
Webflow, but started working with clients like Gumroad and Johnson & Johnson. An absolutely incredible portfolio. And that's just one of thousands and thousands
of stories of freelancers and agencies who aren't just building on Webflow; they're making
a living and growing entire businesses with Webflow at the core. And of course, we're seeing this at companies
like Mural, whose marketing team uses Webflow to build out their main dot com. Since moving to Webflow, not only have they
10x'ed their development speed (because they're not having to use up valuable engineering
time), but since launching on Webflow, they've doubled their conversion rate. And seen an absolutely huge lift in their
self-serve revenue. Attentive is using Webflow to power their
dot com. They migrated from WordPress and did a full
rebrand on Webflow, and they saw a substantial lift not only to traffic, but SEO rankings
and impressions. Zendesk is using Webflow. Dell's on Webflow. Upwork — PricewaterhouseCoopers — Discord
— what we're seeing over and over: whether we're talking to solo freelancers, or agencies,
marketing teams, or major enterprises — we're seeing story after story about how Webflow's
empowering more people to build and launch production sites that are transforming their
entire businesses. Today we're going to take this so much further...as
we're expanding what we can do — the power you have...on the Webflow platform. And to talk about collaboration, I'm excited
to pass it over to JZ. [JZ] Thanks, Bryant. A theme that comes up over and over with so
many of our customers...is how people are using Webflow together. Whether you're building Webflow sites with
clients, sharing creative work with other people, collaborating with freelancers and
contractors — or you're using Webflow across your business... we're constantly hearing
from our customers who are building and maintaining mission-critical sites with others. So the first thing we want to announce today...is
an expansion of how teams work together in Webflow. This summer, we started this shift by bringing
collaboration right into the Webflow Designer — meaning different people can edit content
while the primary designer is developing. We also launched the ability to request and
give control — all while previewing who is collaborating and working live. And that was laying the groundwork for what
we're announcing today, and what will follow in early 2022. So. Today, we're announcing two different things. The first is simplified workspaces. And the second is roles and permissions. Let's start with workspaces. We're consolidating individual and team account
plans into a single concept: and that's workspaces. This removes the hassle of account setup as
you and your team — and as your business scales. So whether you're a freelancer adding collaborators,
an agency managing a more complex group, or even a large business with tons of collaborators
across different departments, you can quickly and easily add seats...to keep your Webflow
workspace agile and efficient. And here's where it gets interesting: with
roles and permissions, we can now structure how we want to get work done. In other words, we care about who can do what. Because if you're like some people like Grimur,
who will remain nameless, you could accidentally unpublish a production site that's visited
by literally hundreds of millions of people. So maybe you want to control that access. Who can publish? Who can manage account settings like billing? Who can add team members to the workspace? With roles and permissions, you can structure
how you want to get work done with your team...or your clients. Control over who can do what. So. We're announcing the shift from individual
and team account plans into "workspaces." (Webflow scales with your team...as your team
scales.) And you control who can do what in your workspace...with
roles and permissions. Now. This work sets up so many of our upcoming
investments in collaboration: being able to add teammates only to specific sites, the
ability to add roles exclusively for commenting and annotation, and the ability to add specific
roles for content (these are content-only team members you can add...to your workspace.) We know that for so many of our customers,
working better together with their teams...and with their clients is so important. And with today’s announcements of workspaces
and roles & permissions and our upcoming investments in collaboration, we’re more excited than
ever about teams in Webflow. To take us through our next major Webflow
announcements, I'm going to pass it over to Vlad. [Vlad] Thanks, JZ. So with collaboration in Webflow, you can
build and launch production sites, combining all the power of UI and data that you've come
to expect from Webflow...together with your team and your clients. So that’s collaboration. But we're just getting started. Because today, we're going to share product
announcements across all three of the major pillars of software development that I mentioned
earlier, starting of course, with UIs – or user interfaces. JZ? [JZ] Thanks, Vlad. We're thrilled with how Webflow's being used
by our customers. Whether it's designers, agencies, marketing
teams, and really companies of all sizes — what we hear over and over are stories of how our
customers are using Webflow — not just because it's a visual development platform — but
because of it's power. And when it comes to building UIs, so much
of that power is found in Webflow's Style panel: where we can tweak precise style and
layout properties by directly manipulating the same CSS that developers usually write
by hand. Arquay? [Arquay] Thanks, JZ. As software engineers, we're constantly referencing
MDN and the CSS spec and cheat sheets when we're building out UIs for our product. And that's why the CSS Preview tool in the
Designer is really interesting to us. Federico (by the way this is Federico) — Federico
built this feature, and it's a great way to not only see the CSS that's being generated,
but it's a great reference as we're actually developing. In fact, Federico literally used Webflow to
design and iterate on this user interface. So he used Webflow to design and build the
tool he's building to preview the CSS...using the CSS tool he built. Are you following that (thought?) [JZ] I'm completely following. [Arquay] And we do this all the time. It's not so much that Webflow is some kind
of web builder — that's not its advantage. Webflow's advantage is that while we're using
the Style panel to define these properties...the code is writing itself. So. Is it really no-code? [JZ] Yes. [Arquay] No. Well, yes. We're manipulating styles directly, and the
CSS code is being generated automatically (without the need to translate anything). So what we're doing here is taking all the
power of, let's say, CSS Grid: we design and iterate right here on the canvas...and the
CSS is generated for us. So when we publish for the world to see, the
CSS that's generated is exactly what ends up in production. (That's the power of direct manipulation. It's not overly abstracted or built in complex
templates or presets. That relationship is 1:1 — from the Style
panel to the CSS that's generated.) But it's not just that the CSS is generated. All the code is compiled automatically — so
there's no need to pass it off to a developer to get this into production. (It's already done with the press of a button.) [JZ] It's two presses. [Arquay] Two presses of a button. But the other advantage with that...is if
we want to integrate our own, custom CSS? We can usually just add it on top of what
we define in the Style panel, because all of this is exactly what a developer would
write. That's the power of developing user interfaces
in Webflow...without having to manually write the code. JZ? [JZ] Thank you, Arquay. Today, I'm really excited to announce that
we're adding two additions to the Style panel to unlock even more for building powerful
UIs. The first...is blending modes. If you use tools like Photoshop, this will
feel like second nature. Because when elements or layers stack on top
of each other, blending lets us achieve different kinds of looks based on the mode we select. If we had to code this manually, not only
would we have to reference the syntax (or copy it to the clipboard), but we'd have to
remember which blending mode does what. And that's a huge pain for designers and developers. To show you how we're solving this in the
Webflow Designer, I'm going to pass it over to Sara. [Sara] Thank you, JZ. Blending modes usually apply to an element
in the foreground, and what they end up looking like is based on the elements BEHIND them. So, for this example, you can make a selection...and,
of course, we have all our CSS (all our styles)...RIGHT here in the Style panel. But now we can go down and add our blending
mode. And...instead of guessing WHICH mode does
what, the result is previewed...live on the canvas (right as I scroll through each of
them). So I can just HOVER over – and that's the
one I want. Looks good. And because we have things like the Webflow
Interactions engine, we can combine things like animations, which we can see RIGHT here
in Preview. Back to you, JZ. [JZ] Thanks, Sara. With blending modes, not only can we stack
different blended elements together, but we can add complex interactions to these elements
— all of this native to Webflow. And blending modes is available to all Webflow
users today. But that's just the first one. The second addition to the Webflow Style panel...is
backdrop filters. With backdrop filters, you can take any element
you want, and control what happens to transparent areas inside that boundary. We see this used very creatively on the web,
notably on Apple.com for their navigation. And not only does Webflow support blur, but
it also supports multiple filters which we can then layer...and combine together to create
incredible visual effects. To show an example of backdrop filters in
action, I'm going to pass it back over to Sara. [Sara] Okay, second demo of the day. Here I have my navigation. And using the background color, we already
set the opacity...so it’s a bit transparent. As we scroll? We can SEE the content behind, but the contrast
is high enough that we can still see the foreground against the background. But let's go down and add a backdrop filter. And from here, let's set our blur...and watch
this! NOW when we scroll though the page, everything
behind the navbar is blurred. And it gets BETTER. Because we can STACK filters. Let's add another effect on TOP of this. (Let's increase the saturation.) And again, we can preview EXACTLY what this
looks like in real time. We can also SWITCH...between visible...and
hidden...for EACH effect. So we can stack as many as we want to achieve
ALL kinds of looks. This...is just the beginning. And we can't WAIT to see what you build next. [JZ] Thanks, Sara. Backdrop filters ships in beta today, with
support in most major browsers. Now. For a lot of the stuff we're showing here,
we reached out to some of our Webflow Experts (these are expert partner agencies and freelancers). And in just two days, they explored different
ways to use backdrop filters and blending modes, and the results...are incredible. The Webflow Designer gives us full control
over building beautiful, custom user interfaces. And all of this...outputs the same code a
developer would write. Meaning you can build natively in Webflow,
integrate custom code on top of these properties, or even hand off directly to a developer. And that's building powerful user interfaces
in Webflow. And now I'll hand it back...to Vlad. [Vlad] Thanks, JZ. Webflow's setting the standard for the combination
of speed and creative control. With a full suite of direct style and layout
properties, and now the addition of blending modes and backdrop filters, Webflow's continuing
to give designers and design teams the kinds of superpowers that software engineers have
today. But this is just the start. Before, we talked about how building user
interfaces this way (especially with all this control) — unlocks so much creative and
economic potential. But it's when we combine these capabilities
with data...that things start to really take off. And I'm really excited to talk about data
for a few reasons. First off, when it comes to data, we've seen
incredible sites come to life with the Webflow CMS. For the first time ever, designers can design
with dynamic data with the full control over custom styling and layout...but without having
to write CSS, or spin up databases, or figure out how to write API calls to pull data into
the UI. And everyone from solo freelancers to major
businesses have noticed. CMS sites have expanded dramatically on the
Webflow platform. In fact, the vast majority of sites hosted
by Webflow use the power of our visual CMS. But the second reason I'm excited is because
we're seeing entire businesses grow on Webflow Ecommerce. And of course we see ecommerce products (whether
it's selling physical goods, or digital products, or services)... we see ecommerce here as a
more specialized manifestation of data. And payments are a key building block of bringing
these use cases to life. We're seeing custom stores popping up — all
that ecommerce data is securely managed in the backend, and it's directly connected to
the UI. That means more and more designers are developing
custom ecommerce solutions by using that data to (build completely custom interfaces.) [Sara] Uh–excuse me, Vlad? Are you there? [Vlad] Who's this? [Sara] It's – not important, you keep saying
"all that data." It's just...it's "those data." [JZ] Wait, is it really "those data"? [Arquay] Yeah, kinda is. [Vlad] That means more and more designers
are developing custom ecommerce solutions by using those data to build completely custom
interfaces. But the third reason I'm excited. Is because I get to announce that we've been
going through an architectural overhaul...of our entire data infrastructure. And this changes not only how content is loaded
in the Webflow Designer, but it directly leads to major performance wins for sites with a
lot of CMS items and ecommerce products. To talk about how this works, and how it'll
unlock even more potential for building interfaces based on data, I'm going to pass it back over
to Arquay. [Arquay] Thanks, Vlad. The changes to our data architecture are all
about performance. And the way it works is this: let's say we
have a large site with a ton of CMS data. The advantage of managing something like this
in Webflow is that you can visually develop these complex page designs, and you can bind
(you can point) the elements in your design to the data in the CMS. And our customers are pushing the Webflow
CMS to new limits. And they're using this data infrastructure
on everything from dynamic, CMS-driven sites, to powerful, custom e-commerce experiences. But today, we're announcing that we're rearchitecting
the way CMS data is used in the Webflow Designer, so you can do more...and you can work faster
in larger and more complex sites. And I'll pass it to JZ to talk about how this
affects the product experience. [JZ] Thanks, Arquay. The results...are substantial. On complex sites, loading up a project in
the Webflow Designer is now up to 15 times faster. And we’re seeing 6 times less memory usage
in the browser. And a staggering...86 times less bandwidth
needed on load. Our partners at Finsweet may have said it
best: "Our biggest projects now load so much faster — projects with 3,000+ CMS items
now feel like lightweight 100 item projects." Now. It's not just speed. All of this has resulted in dramatically increased
stability...and performance...on sites with more data. The Webflow CMS is empowering our customers
to create some of the most powerful dynamic experiences — and they're doing it visually
— without needing to manually spin up database instances, without needing to patch and maintain
the server infrastructure — without needing to write SQL or make custom API calls. [Arquay] Now, for these changes and enhancements,
we've been testing with larger sites with select customers already. And today, we're starting to open up early
beta access to these features, so more people can start experiencing these dramatic improvements
with our new data architecture. And we're really excited to build on top of
this. We're already investing in building out better
bulk item workflows and increasing maximum items in dynamic sites to support much larger
data sets. But this is only our first announcement in
data. Because the second one...is the ability to
create... users...natively in Webflow. JZ? [JZ] So much of what's built on the web — so
much of the value created on the internet is based on systems that allow people to log
in. And there are a lot of reasons — a ton of
use cases in which we want to create really impactful experiences based on who's logged
into our site. Nearly every software experience you can think
of today: from Airbnb to Netflix to MasterClass to Lyft — even Hopin — all these experiences
are based on the simple idea that the application is customized to the user who signs up and
is logged in. So far... in Webflow? This hasn't been natively possible. Even if you build a great UI and connect it
with custom data, the experience is generally the same for everyone who visits the site. This is why adding users as a core building
block in Webflow is such a big deal. By creating unique experiences based on who's
logged in, and by controlling who gets access to what, we're going so far beyond the traditionally
accepted idea of what a website is — and what it can do. Users in Webflow is based on three, core concepts. The first is the basic concept of adding a
user database to your site. And to demonstrate how this is done in Webflow,
I'm going to pass it over to McGuire. [McGuire] Thank you, JZ. Two things right off the bat: first, we're
covering a lot here with users. So we'll go through as much as we can in this
part of the keynote. And second, JZ, your laptop's been hovering
this entire time. [JZ] I know, right? [McGuire] So, let's start with adding users. In this keynote example site, aptly named
by JZ "Keynote Example Site", we have content here that we only want logged in users to
have access to. In other words, we want to make sure someone's
signed up and logged in before they can access this content. In Webflow, we can now head on over to Users. And when we add users to the site? We unlock a ton of control right out of the
box. Because if we go to the Pages panel now, we
can see a million new options. [JZ] Six new options. [McGuire] We can see six new options. From the login page, the sign up page — all
of these — we can control this experience down to the pixel. These aren't fixed-in-a-template pages, these
are rich, make-it-100%-your-own customizable pages with all the power you've come to expect
from Webflow. So if you want to build out your signup page
to fully match your brand? You can do that. Because this is all native to Webflow, you
can fully integrate your existing styling, any symbols throughout your site, and even
interactions to create custom experiences that previously required a fusion reactor
and advanced training in thermodynamics. JZ? [JZ] Thanks, McGuire. So we're just getting started...and we have
a lot more to show here with users. So once you create a user database on a site,
you can manage those users from the Webflow Designer, you can customize transactional
emails (like the ones used for resetting passwords), and fully design all the pages associated
with users. That's the first part of users in Webflow. The second part is gating content through
"access groups." Depending on whether we want our gated content
accessible to all logged in users...or just some users who come to our site...now we can
control that. McGuire? [McGuire] Thanks, JZ. From access groups, we have full control over
gating content based on who's logged in. So if we want to create an access group that
lets us say "hey, these courses can only be accessed by users who've signed up and logged
in," we can do that. (We can define what content this group has
access to.) And just like that, we've set up gated access
to some of our protected content. So if someone tries to access a link to one
of the courses, do they immediately get access to the course? No. They're prompted to log in or create an account
for your custom site. And Webflow handles all the user authentication
details and stores all the user data associated with that site...securely. JZ? [JZ] Thanks, McGuire — all of this used
to require engineers...or lots of custom integration work. But with access groups and gated content in
Webflow, we're no longer just designing static sites or even dynamic sites. We're able to start building secure, user-driven
experiences without code. Now. What about the third part of this? We showed adding user functionality and the
power that unlocks. We showed access groups and how we can gate
access to content based on what group a user belongs to. But the really interesting question is this. What if we combined different data building
blocks together? We've seen the power of combining UI and data. And we've seen examples of how CMS and Ecommerce
payments unlock superpowers. But if our major building blocks in data are
CMS items, Ecommerce products and payments, and now users...what if we combined that potential? In other words, what if Webflow Ecommerce
didn't just let us sell goods or downloads or services? What if we could sell...access to gated content? And what if we could create subscriptions
and paid memberships to access that content? Well, that's exactly what we did. [McGuire] Membership sites have transformed
the internet. With platforms like MasterClass — they've
created some of the highest quality teaching on the planet. And when you get an annual subscription, you
unlock their library of courses. The concept of paid access in Webflow? This builds right on top of what we covered
earlier: enabling user accounts, and controlling access to gated content. But now, with memberships in Webflow, you
can monetize content. (You can charge for access — whether it's
a one-time payment or even a recurring subscription.) And the sky's the limit. You can create e-learning platforms. Members-only experiences. If you're a freelancer or an agency, you can
create gated client-only sections. You can create your own version of Patreon. You can charge for premium access in in all
different categories: like health and wellness, on-demand content, and of course, premium
templates for Microsoft PowerPoint 2000 and XP. But let's (take our example...) [JZ] Wait, wait — you can't. [McGuire] What's up? [JZ] Everything was really empowering... [McGuire] Totally. [JZ] And then you said PowerPoint 2000? [McGuire] And XP. [JZ] Okay, keep going. [McGuire] So back to our example from earlier. What if from our access groups, this time,
we change the group type. (We change it from "free access" to "paid
access.") And here's what that unlocks. We can create a membership product directly
in Webflow. And we can define all the parameters for that
product (whether it's a one-time payment for lifetime access, or it's a recurring subscription
that we bill monthly...or annually.) But either way, we're all thinking the same
exact thing. How is all that stuff getting typed and clicked? Is it magic? Only partially. Grimur is typing all of this off-screen with
a second bluetooth keyboard. Which is also hovering about a meter off the
ground. But this gets so much more powerful. With MasterClass, you sign up for an annual
membership and you get full access to all of their content. So it's a similar example to what we're creating
here. However. You can also create multiple paid access groups
(different access maybe for a bronze plan or for a gold plan...) [Arquay] You skipped right over silver. [McGuire] Thanks, Arquay — if you want to
create a silver plan...you can do that. Different access to different free and paid
membership levels. JZ? [JZ] So. Native memberships in Webflow. Create unique experiences based on who's logged
in, and offer free, paid, and even tiered memberships to gated content. [Arquay] And this is all just the beginning. Because there's so much more here as part
of memberships. This isn't a feature that's in a vacuum or
in a silo. It's fully integrated throughout the product. Because of that, we get all the precision
— the same full support for the UI and data tooling we talked about earlier. That means you can build these experiences
using all the power of flexbox, CSS grid, 3D transforms, Webflow Interactions, and bold
text. [McGuire] Sorry, what? [Arquay] What's up? [McGuire] Did you say "bold text"? [Arquay] Yes. Webflow supports bold text. And now we'll pass it back to the theater
— back to Vlad. [Vlad] Thank you, Arquay. I hope you can all see how Memberships builds
on the fundamentals of bringing together full control over UI...and bridging it with user
data to control access to certain parts of a site dynamically based on who is logged
in. Today, Memberships is in beta, and we're capturing
feedback and investing heavily here to make this one of the most powerful ways to build
custom membership experiences. And it’s just the start. The concept of users is such a foundational
part of almost everything built on the web, and we’ll be sharing much more in this area
in the future. Memberships becomes the third major building
block in Webflow’s data pillar – joining both CMS and Ecommerce – to enable you to
create incredibly powerful, dynamic experiences… natively in Webflow. We can’t wait to see what you build with
it! Ok. So far we’ve covered some big updates across
the first two major web development pillars in Webflow: UI and Data. With capabilities like users and Memberships,
our vision for what's possible on the web is extending far beyond the traditional static
or even dynamic content websites. But to make our ultimate long-term vision
a reality – to bring more of the full power that software engineers have today into the
hands of everyone – we believe that UI and Data building blocks (as powerful as they
are) are not enough. And that brings me to our final Webflow announcement
today. I want to give you a preview of something
big we’ve been working on that we believe will dramatically expand the power of Webflow’s
platform. Let’s talk about the third major pillar
of software development… and that’s Logic. What if… as you’re designing UIs and working
with real data in Webflow… you also had the ability to visually declare custom workflows
that describe exactly what you want to happen when certain user events take place. What if you could declare how you want user
actions in the UI to update and change your CMS data? Or configure what you want to happen when
something gets updated in a specific CMS collection? Developers call this “business logic”,
and it makes up a massive amount of the work that’s written in code. And today, we're announcing that we’re bringing
the power of visual logic... natively in Webflow. To show you what we mean, I’m going to pass
it back over to McGuire at the Webflow Studio. [McGuire] Okay. Here's how logic works in Webflow. We'll do this in three examples. For the first one, we have a lead generation
form here which is built in Webflow — and it captures a lot of critical information. And there's a specific field here that lets
us capture the size of the organization. So. We're going to create a workflow that's going
to get triggered when this form is submitted. This visually describes all the things we
want to happen when the form is submitted. And we have so many options here. For instance, we can do something really basic
and add a simple block. This block is powerful. Because this block takes every single form
submission event. And sends an email. To Grimur. Now. Is that the pinnacle of what we can do in
logic? No. Because that's pretty boring. And you can already do that with Webflow form
submissions today. But what if we could start making decisions...based
on the data that a user submits? So let's focus on (for this example) — let's
look at the dropdown field in the form. When someone fills out the form, they're specifying
the size of their organization. So here we are in a new workflow. And here, we can actually add a condition
that says "hey, for businesses that are bigger than 500 employees, let's send an email which
will notify the VP of Sales." But, we can also define a second outcome if
that statement's false. If the business is smaller than 500 employees,
we can route the notification to Grimur. And let's say we wanted to add a final step. And send a thank you email to the person who
submitted the form. We can add one more block which will execute
regardless of whether the company is larger or smaller than 500 — because the execution
path comes together after the condition. [Arquay] With logic, we’re opening up the
ability for people to specify custom workflows based on actions and conditions they define
– so instead of just one thing happening, it can be millions of different options based
on exactly what you want your website to do. This makes what people build in Webflow so
much more powerful, because now they’re able to author business logic without having
to hire a developer or write complex code. But for our second example, we're going to
take this even further. Let's say we're building a specialized job
board in Webflow. And someone visiting this site (a business
owner) — goes to this site to post a new job. (They want this job picked up by a freelancer.) So when the business owner fills out the job
summary (all the details) — they're telling us about the project they want to post on
the job board. (Budget, geography, skills needed...all that
stuff.) Now here's where logic comes in: we can specify
exactly what we want to happen in the backend when the form is submitted. Previously, this required a developer writing
backend code, or cobbling together multiple tools and APIs to achieve this functionality. But with logic, we can specify exactly what
we want to happen based on certain conditions. First, when this form is submitted, we can
set it up so the person posting the job... receives an email. Notifying them that their job was submitted
successfully. (We know we can do that. That's a simple email block.) And. We can also specify that we want to take this
data. [Grimur] Those data. [Arquay] We can take those data. And pass all of it...to the Webflow CMS. We can do that by adding a "Create CMS Item
block" that lets us do exactly that. So here's what happens. When someone submits a job to this job board,
we can actually map the submission so that all these job details get put into a Webflow
CMS Collection. And! As an additional output, we can add another
block so the site maintainer receives an email. (An email notifying them of a new submission
to the job board....which they can approve before making the job go live on the site.) JZ? [JZ] Thanks, Arquay. For our third example, we're actually going
to combine everything we just did for the job board...but...we're going to add payments
and users to the mix. To create something that'll work like magic. [McGuire] It is magic. [JZ] And what you can– sorry, to be clear. It's not actually magic. It was hyperbole. [McGuire] Any sufficiently advanced technology
(is indistinguishable–) [JZ] ...is indistinguishable from magic. [McGuire] It's Asimov. [Arquay] Actually, it's H.G. Wells. [JZ] It's neither of those. But we are going to demonstrate what feels
like magic...with our third example. Here we are in our job board. And let's say we want to make our job board
more powerful. What if we want freelancers to be able to
pay for access...by purchasing a subscription to premium job listings that have a budget
over $100K. So not only will we have a Standard Job Listings
Collection (which we've already built), but we will also add a Premium Job Listings Collection. And here's the key: that Premium Collection? (All those high budget job listings we want
to share with freelancers paying for premium access?) We can gate that content (we can gate access
to premium listings) using memberships. So now, in our workflow (which is triggered
by the job form getting submitted), we can add a condition. And that condition lets us specify ...if the
budget is $100K or more, then...add this form data to the Premium Job Listings Collection. However. If the budget is under $100K, we can instead
add the form data to our Standard Job Listings Collection. And just like that, we can create a whole
job board with users. And we can configure how everything works
behind the scenes with logic. [McGuire] Let's just take a second here to
figure out what just happened. We have a UI that captures data. We also have this database where we want this
data to go. But logic is what connects this. Because it's taking the input from the UI,
and it's passing it directly to the database based on the logic we defined visually. [Arquay] That's right! And we're not worrying about maintaining and
debugging all that backend code, because logic in Webflow takes the rules we're setting here...and
automatically executes that logic for us. [JZ] Again, you're defining triggers based
on some feature you've built into your site. And the actions resulting from those triggers
are happening based on the rules you define visually. We're so excited about the power that logic
in Webflow unlocks. But these are just three examples that barely
scratch the surface — that only start to illustrate what logic can unlock in Webflow. Back to you, Vlad. [Vlad]
Thanks, team. And Logic will go way beyond enabling custom
workflows when forms are submitted – that’s just one of the triggers. Imagine having visual control over anything
custom you want to happen when a CMS item is updated, when an ecommerce order comes
through, or a user signs up for your new paid membership service. The sky is the limit here. We’re creating logic to be very flexible
and extensible to unlock millions of possibilities. And we’re really excited to share more about
Logic in the coming months. By adding logic to Webflow, we’re finally
unlocking all three of the major pillars of software development – and doing so in a
very integrated way that removes a ton of complexity from trying to stitch these capabilities
together through code or complex integrations. You can think of Logic as the central nervous
system that ties it all together (including UI and data) when creating powerful web experiences. And on top of all that, we’re taking care
of all the infrastructure and hosting to run this all in production. Webflow is already powering more than 10 billion
visits a month to websites that our community creates (which by the way, is more traffic
than Amazon and Twitter combined). Again, not much magic here. We’re taking the best practices and systems
developed over decades by software engineers, and making those core building blocks accessible
to more people via direct manipulation. We believe that creating a truly integrated
no-code visual development environment will remove so much of the complexity we see today
in website and software creation – which will help so much of the world gain access
to the creative and economic potential of the internet. So. We covered a lot today. In collaboration, we announced workspaces
with roles and permissions where you can easily scale your teams or collaborate with clients
in Webflow, as well as define specific roles & permissions. This will be rolling out in January. We talked about building powerful user interfaces:
create stunning, best-in-class websites and UIs with the power of Webflow. (Precise control over style and layout, our
powerful interactions engine, and now native support for CSS blending modes, and even backdrop
filters.) You can use those things in Webflow today. And of course, let’s not forget Arquay’s
favorite feature – bold text. We also covered some major improvements we’re
making to our CMS data infrastructure for managing and designing with all this data. These improvements include big performance
gains that make data-driven design faster and more efficient than ever – and pave
the way for increasing our CMS limits in the future. We also talked about memberships in Webflow. For the first time ever, you can create user
logins, gate content based on access groups, and create free and paid subscriptions…
all through our best-in-class Designer. And Memberships is just the first big step
towards helping you build more user-centered websites and applications in Webflow. And with the announcement of logic, we're
taking all of this to the next level. Combining all three facets of software development
natively to empower more people to create, to build super powerful websites, to grow
their businesses — going so far beyond what you might expect from a traditional website. We want to empower all of you to bring your
ideas to life with the power of no-code. Here's how Webflow is taking that to the next
level... When they said: You can’t create a custom
website without knowing how to code… …we said: Challenge accepted. And, just like that, people like you— designers,
creatives, and visionaries, were building professional-grade, world-class websites with
Webflow (and without code). You were the innovators— who proved the
power of Webflow. You didn't want to code— and you didn't
have to. You were creating entire web experiences and
stunning user interfaces using a visual development platform that works the way you do. ****By seeing, solving, moving, and building—without
a single line of code. But progress requires more than websites — ...so
you started to wonder… Can we do even more without code? Can we create user logins? Enable online purchases? Connect to other systems? The answer… is yes. Because we’re redefining what’s possible
once again. We’re unlocking the power of logic— and
expanding the power of design and data— …so you can achieve exponentially more. Build solutions with dynamic data. Create membership communities. Trigger actions through logic. And launch. What’s. Next.
– all with a completely visual, shockingly powerful platform that brings your ideas to
life exactly the way you intended. What used to require a team of developers
can now be done by... you. Welcome to a new era of no-code. Powered by Webflow. That’s what no-code is all about – taking
what used to require a team of developers, and bringing that power to a lot more people. And obviously it’s not just Webflow powering
this movement – there are so many people and companies here today that are applying
this no-code philosophy to bring the power of software creation to the masses. I think we all truly believe that by removing
more obstacles that stand in the way of people creating for the web (actually developing
software that solves real problems) we're unlocking so much of the creative potential
that's held back because people just don’t have the right tools to bring their ideas
to life. Together, we’re breaking the code barrier
in order to let a lot more people through the door. And walking through that door unlocks creative
expression, the ability to build new products, and build wealth for so many more people. And despite the early fears that no-code tools
would reduce the value of learning how to code, that couldn’t be further from reality. We need developers now more than ever to keep
building and improving the tools and systems based on code that no-code platforms rely
on. Also, the growth of this movement over the
last two years has actually increased the demand for software engineers. By empowering many more people and companies
to create websites and applications and bring them to market faster with no-code, we’ve
generated an even greater need for software engineers to solve more complex problems where
code is still the best solution (and will be for a long time). This space is incredibly large, and the chance
to empower the 99.5% of the world that doesn’t code to have even a fraction of the superpowers
that developers have today is full of exciting possibilities. I hope that you’re inspired by what’s
still possible – whether you’re someone who is just learning no-code tools to start
a new career or build for clients, or you’re a growing company that relies heavily on no-code
to work faster and smarter, or you’re a startup creating more no-code tools for others. We’re just getting started, and there’s
so much more discovery and innovation in the no-code space in the years ahead. But one thing is certain already because we
can see it every day in this community – the kinds of things that could only be built by
teams of engineers in the past are already being built with no-code. By you. I’m so excited about the next two days — we
have a lot in store. From the team at NCC TV (there to guide you
through ALL of this), to the over 40 talks, deep dives, and conversations from no-code
creators and leaders across the world. We have thousands and thousands of people
joining us today from over 135 different countries. We have conversations coming up with the host
of the award-winning podcast Design Matters – Debbie Millman. And my live conversation with comedian and
host of “The Daily Show”… Trevor Noah (to kick off tomorrow). I’m really grateful you’ve taken the time
to join us. Thank you, and enjoy the conference!
