webiny-js
Open-source serverless enterprise CMS. Includes a headless CMS, page builder, form builder, and file manager. Easy to customize and expand. Deploys to AWS.
Top Related Projects
π Strapi is the leading open-source headless CMS. Itβs 100% JavaScript/TypeScript, fully customizable, and developer-first.
The flexible backend for all your projects π° Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.
The superpowered headless CMS for Node.js β built with GraphQL and React
Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
Sanity Studio β Rapidly configure content workspaces powered by structured content
JavaScript library for Contentful's Delivery API (node & browser)
Quick Overview
Webiny is an open-source serverless CMS platform built on top of AWS cloud infrastructure. It provides a modern, scalable solution for building and managing websites and applications, offering features like headless CMS, page builder, and form builder, all within a serverless architecture.
Pros
- Serverless architecture for easy scaling and cost-effectiveness
- Comprehensive set of features including headless CMS, page builder, and form builder
- Built on modern technologies like React, GraphQL, and Node.js
- Extensible and customizable through plugins and custom code
Cons
- Primarily focused on AWS, which may limit options for users preferring other cloud providers
- Steeper learning curve for developers not familiar with serverless architectures
- Documentation could be more comprehensive for advanced use cases
- Community is growing but still relatively small compared to some other CMS platforms
Code Examples
- Fetching data using Webiny's GraphQL API:
import { GET_PUBLISHED_PAGE } from "./graphql/pages";
import { client } from "./graphql/apollo";
const fetchPage = async (slug) => {
const { data } = await client.query({
query: GET_PUBLISHED_PAGE,
variables: { slug }
});
return data.pageBuilder.getPublishedPage;
};
- Creating a custom Webiny plugin:
import { definePlugin } from "@webiny/plugins";
export default definePlugin({
type: "admin-menu-item",
name: "admin-menu-item-custom",
render({ Menu, Item }) {
return (
<Menu name="custom-menu">
<Item label="Custom Item" path="/custom" />
</Menu>
);
}
});
- Using Webiny's form builder in a React component:
import React from "react";
import { Form } from "@webiny/form";
import { Input } from "@webiny/ui/Input";
const MyForm = () => (
<Form onSubmit={data => console.log(data)}>
{({ submit }) => (
<>
<Input label="Name" name="name" />
<Input label="Email" name="email" type="email" />
<button onClick={submit}>Submit</button>
</>
)}
</Form>
);
Getting Started
To get started with Webiny:
-
Install Webiny CLI:
npm install -g @webiny/cli -
Create a new Webiny project:
webiny create my-webiny-project cd my-webiny-project -
Deploy to AWS:
webiny deploy -
Start the local development server:
webiny dev
Visit the Webiny documentation for more detailed instructions and configuration options.
Competitor Comparisons
π Strapi is the leading open-source headless CMS. Itβs 100% JavaScript/TypeScript, fully customizable, and developer-first.
Pros of Strapi
- More mature and widely adopted, with a larger community and ecosystem
- Offers a user-friendly admin panel out-of-the-box
- Supports multiple databases (SQLite, MySQL, PostgreSQL, MongoDB)
Cons of Strapi
- Less focus on serverless architecture compared to Webiny
- May require more server resources for larger projects
- Limited built-in support for complex content modeling
Code Comparison
Strapi (Route definition):
module.exports = {
routes: [
{
method: 'GET',
path: '/hello',
handler: 'controller.hello',
config: {
policies: [],
middlewares: [],
},
},
],
};
Webiny (GraphQL resolver):
export const helloResolver = {
Query: {
hello: (_, args, context) => {
return "Hello, World!";
}
}
};
Both Strapi and Webiny are powerful headless CMS solutions, but they cater to different use cases. Strapi excels in traditional server-based setups with its user-friendly admin interface and multi-database support. Webiny, on the other hand, is designed for serverless environments and offers more flexibility in terms of infrastructure. The code comparison shows that Strapi uses a more traditional route-based approach, while Webiny leverages GraphQL for its API layer.
The flexible backend for all your projects π° Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.
Pros of Directus
- More flexible and customizable data model
- Stronger focus on content management and API-first approach
- Larger and more active community, with frequent updates
Cons of Directus
- Steeper learning curve for developers
- Less integrated serverless functionality
- May require more setup and configuration for complex projects
Code Comparison
Directus API endpoint example:
app.get('/items/:collection', (req, res) => {
const { collection } = req.params;
const items = directus.items(collection).readByQuery(req.query);
res.json(items);
});
Webiny API endpoint example:
export const handler = createHandler(
plugins([
createStorageOperations(),
createCrudOperations({
model: MyModel,
read: { maxResults: 100 }
})
])
);
Both Directus and Webiny offer powerful solutions for building web applications and managing content. Directus excels in flexibility and content management, while Webiny provides a more integrated serverless approach. The choice between them depends on specific project requirements and developer preferences.
The superpowered headless CMS for Node.js β built with GraphQL and React
Pros of Keystone
- More mature and established project with a larger community
- Flexible schema definition and customization options
- Built-in GraphQL API and admin UI
Cons of Keystone
- Steeper learning curve for beginners
- Less focus on serverless architecture
- Fewer built-in features for complex applications
Code Comparison
Keystone schema definition:
const { Text, Relationship } = require('@keystonejs/fields');
const listSchema = {
fields: {
name: { type: Text },
author: { type: Relationship, ref: 'Author' },
},
};
Webiny schema definition:
import { Model } from "@webiny/commodo";
class Book extends Model {
static name = "Book";
constructor() {
super();
this.attr("name").char();
this.attr("author").models("Author");
}
}
Both Keystone and Webiny are powerful headless CMS platforms, but they cater to different needs. Keystone offers more flexibility and customization options, making it suitable for complex projects with specific requirements. Webiny, on the other hand, provides a more streamlined experience with a focus on serverless architecture and rapid development. The choice between the two depends on the project's specific needs, team expertise, and desired deployment strategy.
Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
Pros of Payload
- Lightweight and flexible, allowing for easier customization
- Built-in authentication and access control system
- Extensive documentation and active community support
Cons of Payload
- Less comprehensive out-of-the-box features compared to Webiny
- Steeper learning curve for developers new to headless CMS
- Limited serverless deployment options
Code Comparison
Payload configuration:
const config = {
collections: [
{
slug: 'posts',
fields: [
{ name: 'title', type: 'text' },
{ name: 'content', type: 'richText' },
],
},
],
};
Webiny configuration:
const contentModelGroup = await createContentModelGroup({
name: "Blog",
description: "A group for blog-related models",
});
await createContentModel({
name: "Blog Post",
group: contentModelGroup.id,
fields: [
{ fieldId: "title", type: "text" },
{ fieldId: "content", type: "rich-text" },
],
});
Both Payload and Webiny offer powerful content management capabilities, but they cater to different needs. Payload focuses on simplicity and flexibility, making it ideal for developers who want more control over their CMS. Webiny, on the other hand, provides a more comprehensive solution with additional features like serverless deployment and a graphical interface for content modeling. The choice between the two depends on project requirements and developer preferences.
Sanity Studio β Rapidly configure content workspaces powered by structured content
Pros of Sanity
- More flexible content modeling with a powerful schema system
- Real-time collaboration features for content editors
- Extensive plugin ecosystem and customization options
Cons of Sanity
- Steeper learning curve for developers new to the platform
- Requires more setup and configuration compared to Webiny
- Pricing can be higher for large-scale projects or high-traffic sites
Code Comparison
Sanity schema definition:
export default {
name: 'post',
title: 'Blog Post',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
// ... more fields
],
}
Webiny schema definition:
import { createContentModelField } from "@webiny/api-headless-cms/content-model";
export default {
name: "BlogPost",
fields: [
createContentModelField("title", "text"),
// ... more fields
],
};
Both Sanity and Webiny offer powerful content management capabilities, but they cater to different use cases. Sanity provides more flexibility and real-time collaboration features, making it suitable for complex content structures and team-based workflows. Webiny, on the other hand, offers a more integrated serverless approach, which can be advantageous for developers looking for an all-in-one solution. The choice between the two depends on specific project requirements and team preferences.
JavaScript library for Contentful's Delivery API (node & browser)
Pros of Contentful.js
- More established and widely adopted in the industry
- Extensive documentation and community support
- Simpler integration for content-focused applications
Cons of Contentful.js
- Less flexible for custom backend development
- Higher costs for large-scale projects
- Limited control over the underlying infrastructure
Code Comparison
Contentful.js:
const client = contentful.createClient({
space: 'your_space_id',
accessToken: 'your_access_token'
});
client.getEntries()
.then((response) => console.log(response.items))
.catch(console.error);
Webiny.js:
import { createHandler } from "@webiny/handler-aws";
import headlessCmsHandler from "@webiny/api-headless-cms/handler";
export const handler = createHandler(
headlessCmsHandler()
);
Webiny offers a more comprehensive framework for building serverless applications, while Contentful.js focuses primarily on content management and delivery. Webiny provides greater flexibility for custom backend development, but may have a steeper learning curve. Contentful.js excels in simplicity and ease of use for content-centric projects, but may be less suitable for complex, custom applications. The choice between the two depends on project requirements, scalability needs, and development preferences.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Open-Source Serverless Enterprise CMS
Website | Documentation | Community Slack | Forum | Twitter
https://user-images.githubusercontent.com/2216344/194592342-2a63da40-136c-4190-9776-680d1ac2382f.mp4
Webiny Serverless CMS includes:
1Γ―ΒΈΒΓ’ΒΒ£ Page Builder - Drag&drop page editor. Pages are prerendered automatically and cached on CloudFront for lightning-fast delivery.
2Γ―ΒΈΒΓ’ΒΒ£ Headless CMS - Headless CMS with a GraphQL API. Build APIs and content models through a UI. It includes content revisions, localization, and fine-grain permission control.
3Γ―ΒΈΒΓ’ΒΒ£ File Manager - Upload files images. Search and organize your assets. It includes a built-in image editor for basic image manipulations.
4Γ―ΒΈΒΓ’ΒΒ£ Form Builder - Build forms with a drag&drop editor. Insert forms through Page Builder into your pages. It has webhook support and ReCaptcha integration.
All Webiny apps can be customized easily to fully fit an enterprise publishing workflow and integrate with leading identity providers like OKTA and Cognito.
Γ°ΒΒΒ Quick installation guide
- Create a Webiny project:
npx create-webiny-project my-new-project
- Deploy to your AWS cloud:
yarn webiny deploy
Prerequisites
- Node.js ^12 || ^14
- yarn ^1.22.0 || ^2
- AWS account
For the detailed install guide, please see Γ°ΒΒΒ https://www.webiny.com/docs/get-started/install-webiny
Need help, having trouble installing, find us on our community slack Γ°ΒΒΒ https://www.webiny.com/slack
Γ°ΒΒΒ Documentation
For complete documentation Γ°ΒΒΒ https://www.webiny.com/docs
ð€ Community & Support
Community Forum. Best for: help with building, discussion about database best practices Γ°ΒΒΒ https://www.webiny.com/slack
GitHub Issues. Best for: bugs and errors you encounter using Webbiny Γ°ΒΒΒ https://github.com/webiny/webiny-js/issues
Γ°ΒΒΒͺ Contributing
Webiny is all about the community. Please feel free to join in, whether it's fixing bugs, improving our documentation, or simply spreading the word. Please see our Contributing Guidelines, which explain project organization, setup, testing, and other steps.
If you need any assistance in contribution, please reach out via our community Slack.
Γ°ΒΒΒ License
This project is licensed under the terms of the MIT license except for the following modules, which require a Webiny Enterprise license:
- Multi-tenancy module
- OKTA integration
Contact sales@webiny.com for more information.
Why are those modules paid? It's a way we support the development of the project!
Γ°ΒΒΒ·Γ’ΒΒΓ’ΒΒΓ―ΒΈΒ When to use Webiny?
Webiny has many features, too many to list to make this readme digestible, so instead of talking about features, here are the common use-cases you can satisfy using Webiny:
-
Headless CMS - Programmatically integrate your apps with Webiny's GraphQL Headless CMS.
-
GraphQL API - You can build a GraphQL API using the Headless CMS, but you can also use the
webiny scaffoldcommand to create new GraphQL resolvers where you can add your custom business logic. -
Marketing landing pages and micro-sites - Using the Page Builder marketing teams can quickly build new websites without knowledge of HTML or CSS.
-
Multi-tenant SaaS applications - Webiny has a robust multi-tenancy layer with built-in data separation. You can build your own SaaS applications on top and let Webiny handle the API, security, and data storage for you.
-
Full-stack serverless applications - Besides using Webiny to manage your content needs, you can expand the existing functionality by creating new full-stack serverless applications on top. Follow this tutorial to build your own full-stack serverless Pinterest clone.
-
Multi-website & multi-language portal - All Webiny apps are multi-tenant by default, meaning with a single instance of Webiny, you can run hundreds of projects and websites from a single code-base.
-
Dynamic Page (coming soon) - We're working on seamless integration between the Headless CMS and the Page Builder, so you can build and publish dynamic pages without a single line of code or build pipelines required. New content is live instantly and visible to the users.
-
Multi-cloud support (coming soon) - At the moment, Webiny only supports AWS, but we have plans to add support for other cloud vendors such as GCP and Azure. Because Webiny uses cloud-native services to run, not containers, this task is not easy, but we have a plan.
Γ’ΒΒ FAQ
Γ’ΒΒ¦ Why serverless?
We believe serverless is the future of web development. It gives us much more bang for our buck!
Γ’ΒΒ¦ Why open-source?
Open-source has two main aspects over SaaS:
- It's customizable, unlike being locked in a SaaS solution.
- Your data is stored under your rules, in your data center, with your compliance standard inside your security parameter and delivered through your CDN.
Γ’ΒΒ¦ How is this enterprise?
- Webiny is built to be integrated inside enterprise environments. Being open-source is one part of that solution; the other is that Webiny integrates with enterprise IdPs such as OKTA and Cognito.
- Webiny is architected to sustain heavy usage coming from large volumes of users.
- Webiny is built on top of fault-tolerant serverless services.
- Webiny keeps the data encrypted both in transit and at rest.
- In the paid edition, enterprises have access to our SLA-based support and consultancy services.
Γ’ΒΒ¦ How fast and scalable is Webiny?
How about a load-test :)
Γ’ΒΒ¦ How much does it cost to run Webiny?
Webiny comes in 2 database options, DynamoDB + Elasticsearch and DynamoDB only. The latter option, when looking at all the infrastructure pieces Webiny uses to operate, the consumption of the AWS services fully determines the cost. In the DDB + ES option, there is a minimum ~$25/mo charge to AWS for the Elasticsearch cluster as it's not a consumption-based service.
As part of our performance benchmark, we also benchmarked the cost of the DDB + ES, specifically, Headless CMS read and write operations. So that benchmark is a good starting point to determine your cost.
As a rule of thumb, we recommend the DDB option for small and medium-size projects, which should be cheaper when compared to a solution running on VMs or containers.
Γ’ΒΒ¦ Why should my enterprise consider using Webiny?
Top 5 reasons to do so:
- Self-hosted: Webiny runs inside your own AWS cloud; you keep control over your data and security perimeter.
- Open-source: We released Webiny under the MIT license, so you can customize every aspect of the system to match your needs fully.
- Serverless: Webiny runs on AWS services such as Lambda, S3, and DynamoDB, to offer a highly scalable and fault-tolerant infrastructure.
- Cost-savings: Cut your infrastructure and operations costs by 60% to 80% compared to solutions running on VMs.
- Secure: Webiny follows security best practices by encrypting data both in transit and rest across all services. It integrates with IdPs such as OKTA and Cognito. CodeQL and Dependabot scanning tools ensure code security.
Contributors
𧑠Thanks goes to these wonderful people!
Top Related Projects
π Strapi is the leading open-source headless CMS. Itβs 100% JavaScript/TypeScript, fully customizable, and developer-first.
The flexible backend for all your projects π° Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.
The superpowered headless CMS for Node.js β built with GraphQL and React
Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
Sanity Studio β Rapidly configure content workspaces powered by structured content
JavaScript library for Contentful's Delivery API (node & browser)
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot