.avif)
One of the biggest questions in any development process is choosing the right tech stack. We’ve been familiar with WeWeb for quite some time, but at the end of 2024, we started using it for client projects.
So why did we choose WeWeb over other no-code platforms, despite having built hundreds of applications on them?
The most compelling advantage of WeWeb is something that has long been a pain point for clients using other no-code tools - freedom from vendor lock-in and self-hosting capabilities.
WeWeb creates PWA-ready Single Page Applications (SPA) using standard web technologies, allowing users to deploy projects on their own infrastructure for full control over hosting and deployment.
Users can export their entire project code and host it on their own servers, ensuring complete ownership and maximum flexibility.
Below, I’m sharing our insights, experiences, and key takeaways about this platform - one that no-code developers should definitely keep an eye on in 2025.
What is WeWeb?
WeWeb is a no-code front-end builder that allows users to construct user interfaces on top of existing databases and authentication systems. It was founded in 2020 by Raphael Goldsztejn, Florian Briou, and Marc Fabre.
WeWeb consistently rolls out updates and new features that enhance its functionality and user experience. Recent developments include AI integration and a co-pilot feature that enables the conversion of Figma designs into fully functional apps.
What is WeWeb for?
WeWeb is designed for building custom web applications with a strong emphasis on flexibility, API connections, and scalability. It is advantageous for:
- Building interactive front-end applications while keeping data and logic separate.
- Connecting to backends like Xano, Airtable, Supabase, Firebase, and others.
- Handling complex business logic using workflows and integrations.
- Scaling applications without the limitations of traditional no-code tools.
Is WeWeb Low-Code or No-Code?
WeWeb is low-code rather than purely no-code. While it provides a drag-and-drop editor and pre-built components, advanced customization often requires JavaScript, CSS, and API configurations. Unlike traditional no-code tools that include built-in backends (like Bubble), WeWeb focuses purely on front-end development, leaving the backend choice to the user.
Does we web creates only PWA-ready Single Page Application (SPA)?
Yes, WeWeb primarily creates PWA-ready Single Page Applications (SPAs). Here’s why:
1. WeWeb is Designed for SPAs
- WeWeb renders pages dynamically without requiring full-page reloads, which is a core characteristic of SPAs.
- It loads JavaScript-heavy front-end components that interact dynamically with backends and APIs.
- Routing in WeWeb happens on the client side, meaning navigation feels seamless without hard refreshes.
2. WeWeb Supports Progressive Web Apps (PWAs)
- WeWeb allows you to turn your web app into a PWA by enabling service workers, offline caching, and mobile optimizations.
- It ensures fast loading speeds and an app-like experience on mobile devices.
- PWA support means that users can install your web app on their devices like a native app.
3. No Native Server-Side Rendering (SSR)
- Unlike traditional multipage applications (MPAs) that reload on each navigation, WeWeb apps function like client-side SPAs.
- It does not have built-in Server-Side Rendering (SSR) like Next.js, meaning it's not ideal for SEO-heavy public-facing websites (unless combined with a backend that pre-renders content).
Can You Build Non-SPA (Multi-Page) Applications with WeWeb?
Not natively. However, there are workarounds:
- External Page Linking: You can link to external pages that are hosted separately, but each WeWeb project itself remains an SPA.
- Pre-Rendered Content (via Backend CMS): If your backend provides static pages (e.g., a Headless CMS like Strapi), you could simulate a multi-page experience.
Is WeWeb free? What are WeWeb's pricing options?
Yes, WeWeb has a free plan. WeWeb also offers paid plans.
Here is a breakdown of WeWeb's pricing options:
- Free Plan: WeWeb's free plan allows users to use all of the platform's features, but only in development mode. The free plan also includes access to templates and UI kits. The free plan is useful for learning and experimenting with the platform.
- Starter Plan: WeWeb's starter plan costs $39 per month if you choose to pay annually, or $49 per month if you choose to pay monthly. The starter plan includes a live application, a custom domain, up to four plugins, 50,000 monthly app visits, 1 GB of file storage, and code export with self-hosting. Code export is only available with the annual subscription.
- Scale Plan: WeWeb's scale plan costs $149 per month. The scale plan includes a live application, custom domains, unlimited plugins, 250,000 monthly app visits, 10 GB of file storage, code export, roles and permissions, data caching, versioning and staging, and three backups.
- Custom Plan: WeWeb also offers custom plans for larger projects with specific needs.
What unique features make WeWeb stand out from its competitors?
WeWeb distinguishes itself through several unique features:
• No Vendor Lock-In: WeWeb generates a standard PWA-ready Single Page Application, allowing users to deploy projects on their infrastructure and providing greater control over hosting and deployment.
• Self-hosting: Deploy your applications on your own infrastructure with complete code export.
• Custom components: Import your own Vue.js components into your projects.
• Enterprise-Grade Platform: The standards of code, with no code.
• Backend Agnostic: WeWeb is the only no-code front-end builder that is backend agnostic.
Other strengths of WeWeb
API-Centric Approach – WeWeb seamlessly integrates with external backends, making it ideal for projects that need flexibility in data handling.
Performance & Scalability – Since the backend is decoupled, WeWeb-built applications tend to perform better than an all-in-one, no-code platforms.
Modern UI Design – It offers high flexibility in front-end design with full control over layout, components, and animations.
Fast Development Speed – Pre-built components and workflows speed up the development process while allowing deep customization.
Optimized for PWAs – WeWeb supports Progressive Web Apps (PWAs), making it easier to build mobile-friendly web applications.
Unique Features of WeWeb Compared to Other No-Code Builders
Full Front-End Freedom – Unlike Bubble or Webflow, WeWeb does not impose backend restrictions, allowing users to connect their preferred backend.
Better API & Backend Flexibility – It excels in API connections, allowing developers to work with external data sources like Xano, Supabase, or Firebase.
Code Injection Support – Users can add custom JavaScript, CSS, and HTML, making it a hybrid between low-code and traditional coding.
Dynamic & Conditional UI – Unlike some no-code platforms that require workarounds, WeWeb natively supports dynamic conditions, making applications feel more interactive.
Faster Load Speeds – Since it separates the front-end and back-end, WeWeb apps tend to be faster and lighter compared to all-in-one no-code platforms.
WeWeb’s code export and hosting options
WeWeb offers the capability to export code and self-host applications, giving users control over their projects and avoiding vendor lock-in.
• Code Export: WeWeb allows users to export their projects as standard Vue.js applications. The exported code enables developers to deploy applications on their own infrastructure. According to weweb.io, the platform generates a PWA-ready single-page application. Code export and self-hosting are available with an annual subscription.
• Self-Hosting: WeWeb provides the option to host applications on a user's own infrastructure.
• Hosting Infrastructure: WeWeb deploys standard vue.js SPAs on a scalable AWS infrastructure. Also, WeWeb uses AWS Cloudfront for hosting.
What backend services natively integrate with WeWeb?
WeWeb natively integrates with a variety of backend services, providing flexibility in choosing the right tools for data storage, authentication, and server-side logic. These integrations streamline the process of connecting your front-end application to a backend, making it easier to build dynamic and data-driven web applications.
Key backend services that offer native integrations with WeWeb include:
Xano
WeWeb and Xano are described as a "lovely couple," indicating a particularly strong integration. Xano is a no-code backend platform that simplifies database management, API creation, and integration with external services.
Supabase
WeWeb offers native integrations with Supabase for both data manipulation and user authentication. Supabase is an open-source Firebase alternative that provides a PostgreSQL database, authentication, real-time subscriptions, and storage.
Airtable
WeWeb natively integrates with Airtable, a cloud-based spreadsheet and database tool.
WeWeb Auth: WeWeb provides its own native authentication.
Auth0: WeWeb provides native integration for Auth0.
OpenID: WeWeb provides native integration for OpenID.
Beyond these native integrations, WeWeb can connect to any backend service that exposes a REST API, GraphQL API, or SOAP API. This broad compatibility allows you to integrate with a wide range of services, even if a native integration is not available.
When integrating with Supabase, WeWeb supports real-time data updates, allowing your application to reflect changes in the data source instantly. However, it's important to note that real-time functionality is disabled by default in Supabase for performance and security reasons.
To use external data in WeWeb, you typically need to add a data source plugin and create collections. For example, the Supabase Data Source Plugin requires your Supabase project URL and public API key. After adding the plugin, you can create a collection and choose the table from which to pull data.
WeWeb also supports industry-standard authentication methods to secure your data. It offers native integrations with authentication providers like Xano Auth, Supabase Auth, Auth0, and supports custom token-based authentication systems using the JWT standard. With these authentication integrations, you can implement user roles and permissions to control access to different parts of your application.
By offering native integrations with popular backend services and the ability to connect to any API, WeWeb provides you with the flexibility to choose the right tools for your project and build dynamic, data-driven web applications.
Choosing the right backend is just as crucial as selecting the right front-end builder. If you're exploring WeWeb for your next project, you'll need a scalable and flexible backend to bring your app to life.
Check out our guide on the best no-code backends to integrate with your WeWeb application.
How does WeWeb integrate with external data sources?
WeWeb is designed to connect with external data sources, a capability that is central to its role as a front-end builder for web applications. Its capacity to integrate with various backends and APIs allows developers to create dynamic applications without being confined to a single ecosystem.
Here are the key aspects of WeWeb's integration with external data sources:
• Native Integrations: WeWeb offers native integrations with popular tools and platforms such as Airtable, Xano, and Supabase. These integrations simplify the process of connecting to these services, often requiring just a few clicks to set up authentication and data access.
• API Connectivity: WeWeb can connect to any service that has an API, including REST, GraphQL, and SOAP APIs. This allows developers to access data from a wide range of sources, even if there isn't a native integration available.
• Data Manipulation: Once connected to a data source, WeWeb allows you to perform CRUD (Create, Read, Update, Delete) operations. This means you can not only display data from external sources but also allow users to modify that data through your WeWeb application.
• Data Collections: In WeWeb, you can create "Collections" to define the data you want to fetch from your backend. When creating a Collection, you specify the data source and the specific data you want to retrieve. For instance, if using a REST API, you would provide the API endpoint. WeWeb then retrieves data from the specified source and makes it available for use in your application.
• Authentication: WeWeb supports industry-standard authentication methods to secure your data. It offers native integrations with authentication providers like XANO Auth, Supabase Auth, Auth0, and others, and supports custom token-based authentication systems using the JWT standard.
• Data Source Plugin: To use external data in WeWeb, you need to add a data source plugin. For example, the Supabase Data Source Plugin requires your Supabase project URL and public API key. After adding the plugin, you can add a Collection and choose the table from which to pull data.
• Realtime Data: WeWeb supports real-time data updates with Supabase, allowing your application to reflect changes in the data source instantly. Note, however, that this functionality is disabled by default in Supabase for performance and security reasons.
• Data Display: Once you've fetched data from an external source, you can display it in your WeWeb application using various UI elements. For example, you can use the Data Grid element to display data in a table format, with built-in inline editing capabilities.
• Data Security: WeWeb allows you to protect sensitive data by implementing roles and permissions. You can restrict access to certain data or functionalities based on a user's role.
• Variables: Variables can store data within the WeWeb application. When you click a button, the app should know what to do. That logic is configured in workflows.
• Data Types: The platform supports the use of varied data types and the handling of large datasets.
How does WeWeb handle user roles and permissions?
WeWeb provides capabilities for managing user roles and permissions, allowing you to control access to different parts of your application and tailor the user experience based on their role.
Here's a detailed overview of how WeWeb handles user roles and permissions.
Native Authentication Methods
WeWeb allows you to protect sensitive data from unauthorized access using any of 6 native authentication methods: XANO Auth, Supabase Auth, WeWeb Auth, Auth0, OpenID or any custom token-based auth system using the JWT standard.
Roles and Permissions
WeWeb allows you to protect pages based on current user roles and permissions.
Integration with Authentication Providers
WeWeb integrates with authentication providers like Supabase to manage user authentication and roles.
Restricting Access
You can restrict access to certain users or display specific data based on a user's role.
Supabase Integration
In Supabase, you'll need to create a roles table with a list of roles and a join table that links the roles table with your users' table. In order for the integration to work with the Users tab in WeWeb, it is crucial that the role title is a text field named name.
Linking Users to Roles
Once you've added your list of roles in Supabase and created an empty join table to link your roles with users, it's time to go to WeWeb. In Plugins > Supabase Auth > 3. Roles table, you'll click refresh and select the relevant Supabase tables you just created.
Managing User Roles
Once you've told WeWeb where to find the roles and the join table in Supabase, you'll be able to easily view and maintain user roles in the Users tab in WeWeb.
Automatic Updates
When you make a change to a User in WeWeb, it will automatically be updated in Supabase.
Group Assignment
You can also create user groups (for example, premium customers) where if the user has both the customer and premium roles, there are a premium customer.
Access Control
You can decide to make a page private so that only authenticated users can access it, or only authenticated users that are in the premium customer group can access it.
Row Level Security
Supabase allows you to enable Row-Level Security for each of your tables. If you want to restrict certain actions to specific users or roles, you'll need to add Supabase authentication to your WeWeb project and write SQL policies in Supabase.
How does WeWeb's component system aid development efficiency?
WeWeb's component system significantly enhances development efficiency through reusability, consistency, and streamlined management. Components in WeWeb are reusable elements that can be leveraged across various parts of a web application, ensuring design consistency and reducing redundant development efforts.
Reusability. WeWeb's component-based architecture promotes the reuse of custom elements across a web application. Instead of creating the same element multiple times, you can create a component once and then reuse it wherever needed. For example, if you have a button that you want to use on multiple pages, you can create a component for that button and then reuse that component on each page. Changes to the component are reflected everywhere it is used.
Consistency. Components ensure consistency in design and functionality throughout the application. When you modify a component, the changes are automatically reflected in all instances where that component is used. This eliminates the need to manually update each instance of an element, saving time and effort.
Dynamic Properties (Props). WeWeb components are versatile and can house properties (props) that define specific behaviors like text, numbers, and booleans. These properties can be customized per instance to suit different needs within the same application. This adaptability streamlines the development process and enhances the application's ability to meet diverse business requirements without complicating the codebase.
Distinction from Templates. Unlike templates, which create a copy when dragged onto a page (modifications to the template won't affect existing instances), components function dynamically. Changes made to a component are reflected across all instances where it's used, promoting uniformity and easing maintenance.
Integrated Management. WeWeb's environment supports creating, editing, and managing components directly within the editor. This integrated management system makes it easier to maintain large-scale projects and ensures that all parts of an application interact seamlessly.
Vue.js Components. WeWeb allows you to import your own Vue.js components into your projects. This feature enables you to extend the platform's capabilities and use custom components that are tailored to your specific needs.
Libraries. The libraries tab shows the project library where you can add topographies, colors, spacings, view all the classes you use in your project, and components and templates.
Looking to build a powerful web application with full control over your code and hosting? At Sommo, we specialize in leveraging WeWeb to create scalable, self-hosted applications tailored to your needs. With our extensive experience, we ensure your project is delivered efficiently and effectively. Contact us today to start your journey towards a custom-built solution!
.webp)
