www.webiny.com
Open in
urlscan Pro
151.101.66.132
Public Scan
Submitted URL: http://webiny.com/
Effective URL: https://www.webiny.com/
Submission Tags: tranco_l324
Submission: On April 25 via api from DE — Scanned from DE
Effective URL: https://www.webiny.com/
Submission Tags: tranco_l324
Submission: On April 25 via api from DE — Scanned from DE
Form analysis 1 forms found in the DOM
GET https://app.mailerlite.com/webforms/landing/g9f1i1
<form action="https://app.mailerlite.com/webforms/landing/g9f1i1" data-code="g9f1i1" method="get" target="_blank" class="wby-1in9kvy-InputWrapper ebx3zoe6" data-cb-wrapper="true" data-hs-cf-bound="true"><input placeholder="email@domain.com"
type="email" name="fields[email]" id="newsletter_email" required="" class="wby-w62x7-Input ebx3zoe5" value=""><img alt="Email"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMjAgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUwLjIgKDU1MDQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5iYXNlbGluZS1tYWlsX291dGxpbmUtMjRweDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJIb21lLXYxIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIwLjUiPgogICAgICAgIDxnIGlkPSJNYWluLXBhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDA5LjAwMDAwMCwgLTc1MzUuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJGb290ZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcxLjAwMDAwMCwgNzQxOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJOZXdzbGV0dGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MjMuMDAwMDAwLCA2MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iYmFzZWxpbmUtbWFpbF9vdXRsaW5lLTI0cHgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjAwMDAwMCwgNTMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDAgMjQgMCAyNCAyNCAwIDI0Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCw0IEw0LDQgQzIuOSw0IDIuMDEsNC45IDIuMDEsNiBMMiwxOCBDMiwxOS4xIDIuOSwyMCA0LDIwIEwyMCwyMCBDMjEuMSwyMCAyMiwxOS4xIDIyLDE4IEwyMiw2IEMyMiw0LjkgMjEuMSw0IDIwLDQgWiBNMjAsMTggTDQsMTggTDQsOCBMMTIsMTMgTDIwLDggTDIwLDE4IFogTTEyLDExIEw0LDYgTDIwLDYgTDEyLDExIFoiIGlkPSJTaGFwZSIgZmlsbD0iIzAwMDAwMCIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4="
class="wby-re0cjt-EmailIcon ebx3zoe3"><button class="wby-1wjbvy4-Submit ebx3zoe4">Join</button></form>Text Content
You need to enable JavaScript to run this app.
* Product
APPLICATIONS
Headless CMS
GraphQL-based Headless CMS
Advanced Publishing Workflow
Peer reviewed publishing process
Page Builder
No-code, drag&drop page builder
coming soon
Control Panel
Site reliability and monitoring
File Manager
Serverless digital asset management
Form Builder
No-code, drag&drop form builder
FEATURES
Multi-Tenancy
One instance, many projects
Self-Hosted
Your data, your rules
Open-Source
Customize, integrate, extend
AWS Serverless Infrastructure
Highly scalable and cost efficient infrastructure
Development Framework
Develop new severless apps in less time
CMS+
It's more than just a CMS
* Developers
RESOURCES
Documentation
Developer docs, guides and references
User guides
Step-by-step guides for how to use Webiny apps
Tutorials
Tutorials to get you started with Webiny
Demo instance
Have a look around Webiny without needing to install anything
Contribute
Want to contribute to Webiny? Here's how
Developer community
Join our community of over 2,500+ developers
INTEGRATIONS
Next.js
Webiny + Next.js
Gatsby
Webiny + Gatsby
React
Webiny + React
Vue
Webiny + Vue
Flutter
Webiny + Flutter
* Partners
Partner program overview
Learn about Webiny's Partner program
Find a Partner
Need a skilled partner to help you with your project?
Become a Partner
Apply to become a Webiny certified partner
Partner Portal
Access your partner profile portal
* Pricing
* Resources
Blog
Read the latest news and updates from Webiny
Knowledge Base
Learn more about Webiny, our techology and case-studies
Why Webiny
Learn more about Webiny and why it's the right choice for your next project
Enterprise
Learn more about Webiny Enterprise product offering
WHITEPAPER
BUSINESS VALUE OF A SERVERLESS CMS
Read the Whitepaper
* Company
*
--------------------------------------------------------------------------------
* BOOK A CALL
* Product
APPLICATIONS
Headless CMS
Advanced Publishing Workflow
Page Builder
coming soon
Control Panel
File Manager
Form Builder
FEATURES
Multi-Tenancy
Self-Hosted
Open-Source
AWS Serverless Infrastructure
Development Framework
CMS+
* Developers
RESOURCES
Documentation
User guides
Tutorials
Demo instance
Contribute
Developer community
INTEGRATIONS
Next.js
Gatsby
React
Vue
Flutter
* Partners
Partner program overview
Find a Partner
Become a Partner
Partner Portal
* Pricing
* Resources
Business Value of a Serverless CMS
Blog
Knowledge Base
Why Webiny
Enterprise
* Company
--------------------------------------------------------------------------------
BOOK A CALL
COMPOSABLE OPEN-SOURCE CONTENT PLATFORM THAT SHAPES AROUND YOUR BUSINESS
Host in your own AWS cloud on top of serverless infrastructure. Increase the
reliability, performance and security of your content platform under enterprise
workloads, and reduce your infrastructure spend.
Get a demo
View our pricing →
RECOGNIZED BY GARTNER DIGITAL MARKETS
WHEN DIY IS TOO LABOUR INTENSIVE, AND SAAS IS TOO LIMITING
We take a different approach to the rest of the market. We cut the cost of the
DIY approach, whilst allowing the customizability beyond what any SaaS solution
can provide, all whilst keeping you in control of your data.
WEBINY IS THE CHOICE OF LEADERS
World’s leading companies use Webiny to create, manage and deliver content at
scale while keeping privacy at the forefront.
SIEMENS.COM
Siemens chose Webiny to power their global website.
CUSTOMIZATION & DATA OWNERSHIP
Main reasons why Siemens went with Webiny.
PRODUCTS USED
* Headless CMS
* Developer Framework
* Multi-Tenancy
* Advanced Publishing Workflow
SIEMENS CHOSE WEBINY AS THEIR NEW HOME FOR SIEMENS.COM.
While evaluating all the options on the market, and also the potential of a DIY
approach, Webiny stood out as the best platform when it came to meeting Siemens'
demands in terms of customization, scale, performance and feature set.
Siemens decided Webiny was the best platform to power siemens.com, 300 regional
offices, across 60 languages and with over 1200 content writers creating
content.
90M DATA POINTS
Size of the data set that was migrated to Webiny.
COLLABORATION & SUPPORT
The most praised thing about working with Webiny.
PRODUCTS USED
* Headless CMS
* Developer Framework
* File Manager
MOTORTREND.COM THE LARGEST AUTOMOTIVE MEDIA PLATFORM IN THE WORLD
Motortrend, a Warner Bros. Discovery (WBD) brand, chose Webiny as their content
platform as it was the only one on the market that met the high bar of scale and
customization.
GLOBAL PROJECT
Webiny as a foundation for a multi-region, multi-language project.
IDEAL ARCHITECTURE
Serverless and open-source made Webiny an easy choice.
PRODUCTS USED
* Headless CMS
* Developer Framework
* Multi-Tenancy
"IF WE WERE TO BUILD OUR OWN CMS, WE WOULD BUILD IT LIKE WEBINY." - SR. ENG.
MANAGER AT AWS
AWS was in the process or rebuilding one of their global product offerings for
which they needed a highly-scalable and very customizable platform to use as a
foundation in order to deliver the project on budget and in time. Webiny stood
out from the crowd due to it's unique offering and serverless infrastructure.
INFINITE SCALABILITY
Delivering scalable and uninterrupted service during peak usage.
PERSONALISED EXPERIENCE
Ability to tailor the loyalty program experience to an individual customer.
PRODUCTS USED
* Headless CMS
* Developer Framework
STARBUCKS CHOSE WEBINY TO POWER THEIR LOYALTY APP
Starbucks, a global coffeehouse leader, recently revolutionized its loyalty
program mobile application by integrating Webiny as the backend solution. This
strategic move aimed to enhance customer experiences through serverless
infrastructure and unparalleled customization options.
*
*
*
*
EXPLORE REAL-WORLD EXAMPLES OF BUSINESS TRANSFORMATION WITH WEBINY.
LEARN WHY THESE COMPANIES MADE THE SWITCH AND THE RESULTS THEY ACHIEVED.
TALK TO OUR TEAM
WEBINY COMPOSABLE CONTENT PLATFORM
A fully customizable end-to-end solution designed with performance, reliability
and security in mind,
for your most complex and critical projects. With Webiny you are not limited to
the experiences the system allows
you to create, but only by your imagination.
MORE THAN A CMS - 5+ PRODUCTS IN ONE
It’s a no-code suite of products helping you create, manage
and distribute both content and assets
* HEADLESS CMS
* PAGE BUILDER
* FILE MANAGER
* PUBLISHING WORKFLOW
* FORM BUILDER
THE MOST SCALABLE AND CUSTOMIZABLE SELF-HOSTED HEADLESS CMS ON THE MARKET
Use Webiny Headless CMS when you need:
* Unprecedented scale
* Control and customization
* Full data ownership and governance
* Deep integrations with existing systems
Learn More
ENTERPRISE-READY NO-CODE PAGE BUILDER
Use Webiny Page Builder when you need to:
* Build stunning landing pages in seconds
* Build dynamic pages, such as product pages, blogs, training courses and more
* Bring your own custom interactive components
* Provide your content creators with a library of ready-made templates and
building blocks
* Deliver pages at scale to large audiences
Learn More
HIGHLY SCALABLE DIGITAL ASSET MANAGER BUILT ON TOP-OF SERVERLESS TECHNOLOGY
Use Webiny File Manager when you need to:
* Store and organize large amounts of digital assets
* Embed and share digital assets inside Webiny CMS
* Store assets securely within your own AWS account and geo
* Manage assets programatically through a GraphQL API
* Deliver assets efficiently and at scale
Learn More
MULTI-STEP COLLABORATIVE PUBLISHING REVIEW PROCESS
Use Webiny Advanced Publishing Workflow when you need to:
* Ensure only reviewed and approved content gets published
* Reduce the risk of mistakes and errors within your content
* Reduce the risk of potential damage to your brand reputation
* Have an established review process across your digital presence
Learn More
NO-CODE SOLUTION FOR YOUR MARKETING TEAMS TO BUILD FORMS AND CAPTURE LEADS
Use Webiny Form Builder when you need to:
* Empower marketing teams to autonomously create lead-gen forms
* Easily insert forms to your Page Builder pages
* Create workflows and integrate with tools like Zapier
* Connect your forms to 3rd party systems and APIs
Learn More
THE FOUNDATION BEHIND WEBINY
The end-to-end platform that Webiny provides solves challenges around data
ownership, customizations,
infrastructure cost, scalability & reliability and helps you manage the full
content lifecycle.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis et libero
eget
eleifend. Vestibulum felis ipsum, aliquet eget semper at, eleifend non nisl.
MULTI-TENANCY
Host thousands of projects from a single instance
Learn more →
OPEN SOURCE
Architected to be extended and customized.
Learn more →
SELF-HOSTED
Your data under your terms. A privacy-focused CMS.
Learn more →
AWS SERVERLESS INFRASTRUCTURE
Webiny runs on highly-scalable fault-tolerant serverless services.
Learn more →
DEVELOPMENT FRAMEWORK
Build new features, change existing ones, or create whole new apps.
Learn more →
CMS+
No-code suite of solutions helping you create, manage and distribute content.
Learn more →
Get a demo
IT’S A PLATFORM YOUR ENGINEERING TEAM WILL LOVE USING
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis et libero
eget eleifend. Vestibulum felis ipsum, aliquet eget semper at, eleifend non
nisl.
TYPESCRIPT SUPPORT
Type definitions across the whole project to help you get around.
Explore more →
DEPLOY TO MULTIPLE ENVIRONMENTS
Using Webiny CLI you can propagate code trough different environments, like dev,
prod.
Explore more →
EXTENDABLE GRAPHQL API
Change existing GraphQL resolvers, or add new ones in a few lines of code.
Explore more →
SOC2 COMPLIANT SETUP
Webiny is deployed inside your AWS account following all security best
practices.
Explore more →
BRING YOUR OWN IDP
You can integrate any of your existing IdPs.
Explore more →
PULUMI IAC
Control and modify your infrastructure through Pulumi IaC.
Explore more →
65+
Contributors
2000+
Developers on Slack
6400+
GitHub stars
Join the community →
WHEN WE SAY CUSTOMIZABLE & EXTENDABLE, WE REALLY MEAN IT!
Webiny is architected from the ground up to be adopted, extended and built upon.
You can literally change every part of Webiny, in a safe and maintainable way.
* HEADLESS CMS - DATA LIST
* PAGE BUILDER - EDITOR
* FILE MANAGER - FILE DETAILS
* GRAPHQL API
TRIGGER CUSTOM FUNCTIONS
Lifecycle events are added on top of folder actions which can be used to trigger
custom functions.
1
2new ContextPlugin<AcoContext>(async context => {
3 context.aco.onFolderAfterCreate.subscribe(async ({ folder }) => {
4 // Trigger custom function here
5 console.log('Folder created', folder.title);
6 });
7});
8
Read the full guide
REGISTER A CUSTOM BULK ACTION
When selecting multiple entries, you can register custom bulk actions that the
user can perform.
1
2<ContentEntryListConfig>
3 <BulkAction
4 name={"copy-json"}
5 element={<ActionCopyJson />}
6 modelIds={["article"]}
7 />
8</ContentEntryListConfig>
9
Read the full guide
REGISTER A CUSTOM FILTER
You can register custom filters to filter the entries in the list.
1
2<ContentEntryListConfig>
3 <Browser.Filter name={"demo-filter"} element={<span>Demo Filter</span>} />
4</ContentEntryListConfig>
5
Read the full guide
SHOW/HIDE COLUMNS
Configure on a per-model basis which columns are shown in the list view.
1
2<ContentEntryListConfig>
3 <Browser.Column
4 name={"price"}
5 header={"Price"}
6 modelIds={["property"]}
7 />
8</ContentEntryListConfig>
9
Read the full guide
CUSTOM COLUMN RENDERER
Control how a column is rendered in the list view.
1
2export const CellPrice = () => {
3 // You can destructure child methods to make the code more readable and easier to work with.
4 const { useTableRow, isFolderRow } = ContentEntryListConfig.Browser.Table.Column;
5 // useTableRow() allows you to access the entire data of the current row.
6 const { row } = useTableRow();
7
8 // isFolderRow() allows for custom rendering when the current row is a folder.
9 if (isFolderRow(row)) {
10 return <>{"-"}</>;
11 }
12
13 const currency = new Intl.NumberFormat("en-US", {
14 style: "currency",
15 currency: row.currency // Let's use the currency defined in the entry.
16 });
17
18 // Let's render the entry price.
19 return <>{currency.format(row.price)}</>;
20};
21<ContentEntryListConfig>
22 <Browser.Column
23 name={"price"}
24 header={"Price"}
25 modelIds={["property"]}
26 cell={<CellPrice />}
27 />
28</ContentEntryListConfig>
29
Read the full guide
CUSTOMIZE SEARCH QUERY
Customize how search query works and how the input parameters are handled.
1
2export const CellPrice = () => {
3 // You can destructure child methods to make the code more readable and easier to work with.
4 const { useTableRow, isFolderRow } = ContentEntryListConfig.Browser.Table.Column;
5 // useTableRow() allows you to access the entire data of the current row.
6 const { row } = useTableRow();
7
8 // isFolderRow() allows for custom rendering when the current row is a folder.
9 if (isFolderRow(row)) {
10 return <>{"-"}</>;
11 }
12
13 const currency = new Intl.NumberFormat("en-US", {
14 style: "currency",
15 currency: row.currency // Let's use the currency defined in the entry.
16 });
17
18 // Let's render the entry price.
19 return <>{currency.format(row.price)}</>;
20};
21<ContentEntryListConfig>
22 <Browser.Column
23 name={"price"}
24 header={"Price"}
25 modelIds={["property"]}
26 cell={<CellPrice />}
27 />
28</ContentEntryListConfig>
29
CUSTOM ACTION ON AN ENTRY
Remove or register new actions that can be performed on an entry.
1
2<ContentEntryListConfig>
3 <Browser.EntryAction
4 name={"copy-json"}
5 element={<CopyEntryData />}
6 modelIds={["property"]}
7 />
8</ContentEntryListConfig>
9
Read the full guide
CUSTOM ELEMENT GROUP
Register a custom element group
1
2export default {
3 name: "pb-editor-element-group-webiny-website",
4 type: "pb-editor-page-element-group",
5 group: {
6 title: "Webiny Website",
7 icon: <Icon />
8 }
9} as PbEditorPageElementGroupPlugin;
10
Read the full guide
CUSTOM ELEMENT
Register a custom element you can use to build your page
1
2const plugin = {
3 name: "pb-render-page-element-space-x",
4 type: "pb-render-page-element",
5 elementType: "spaceX",
6 render: SpaceX
7} as PbRenderElementPlugin;
8
Read the full guide
CONTROL ELEMENT NESTING
Create advanced nestable elements and control where and how they can be nested
1
2const plugin = {
3 name: "pb-render-page-element-child-example",
4 type: "pb-render-page-element",
5 elementType: "childExample",
6 render: ChildExample,
7 // Whitelist elements that can accept this element
8 // (for drag&drop interaction)
9 target: ["cell", "block"],
10} as PbEditorPageElementPlugin;
11
Read the full guide
INTERACTIVE ELEMENTS
Create elements that are interactive and can also fetch data from external
sources
1
2export const SpaceX = createRenderer(() => {
3 // Let's retrieve the variables that were chosen by
4 // the user upon dropping the page element onto the page.
5 const { getElement } = useRenderer();
6 const element = getElement<SpaceXElementData>();
7 const { limit, offset, type } = element.data.variables;
8
9 const [data, setData] = useState<Spacecraft[]>([]);
10
11 // This is where we fetch the data and store it into component's state.
12 useEffect(() => {
13 request(GQL_API_URL, QUERIES[type], {
14 limit: parseInt(limit),
15 offset: parseInt(offset)
16 }).then(({ data }) => setData(data));
17 }, [limit, offset, type]);
18
19 if (!data.length) {
20 return <>Nothing to show.</>;
21 }
22
23 return <>SpaceX has {data.length} rockets</>;
24});
25
26const plugin = {
27 name: "pb-render-page-element-space-x",
28 type: "pb-render-page-element",
29 elementType: "spaceX",
30 render: SpaceX
31} as PbRenderElementPlugin;
32
Read the full guide
STYLE PLUGINS
Register custom plugins to define new style props, or remove existing style
props
1
2export default {
3 name: "pb-editor-page-element-style-settings-text",
4 type: "pb-editor-page-element-style-settings",
5 render({ options }) {
6 return <TextSettings options={options} />;
7 }
8} as PbEditorPageElementStyleSettingsPlugin;
9
Read the full guide
ELEMENT PLUGINS
Register custom attributes for your custom elements. Example, define which
category of products will be listed inside your custom listing component.
1
2export default {
3 name: "pb-editor-page-element-advanced-settings-carousel",
4 type: "pb-editor-page-element-advanced-settings",
5 elementType: "carousel",
6 render() {
7 return <CarouselItems />;
8 }
9} as PbEditorPageElementAdvancedSettingsPlugin;
10
Read the full guide
EXTEND PAGE SETTINGS
Remove page settings props you don't need. Create custom page settings props for
your own needs.
1
2export default [
3 // Add 'password' to the page settings types
4 new GraphQLSchemaPlugin<Context>({
5 typeDefs: /* GraphQL */ `
6 extend type PbGeneralPageSettings {
7 password: String
8 }
9
10 extend input PbGeneralPageSettingsInput {
11 password: String
12 }
13 `
14 }),
15 // Subscribe to the page update event using the ContextPlugin.
16 new ContextPlugin<PbContext>(({ pageBuilder }) => {
17 // We are passing a custom event type to allow us to use the new 'password' field.
18 pageBuilder.onBeforePageUpdate.subscribe<CustomEventParams>(({ page, input }) => {
19 // Explicitly assign the field value from GraphQL input to the data that is used to update the page.
20 page.settings.general.password = input.settings.general.password;
21 });
22 })
23 ];
24
Read the full guide
LIFECYCLE EVENTS
Take over the publish button action and trigger a custom action. Or an action
that happens before or and after the page publish event.
1
2new ContextPlugin<PbContext>(async context => {
3 context.pageBuilder.onBeforePagePublish.subscribe(async ({ latestPage, page }) => {
4 /**
5 * For example, we do not allow a page which is not the latest one to be published.
6 */
7 if (latestPage.version > page.version) {
8 throw new Error(`Page you are trying to publish is not the latest revision of the page.`);
9 }
10 });
11 });
12
Read the full guide
CUSTOM FILE TYPE
Register a plugin to add a new file type handler to the file manager
1
2export default [
3 new FileManagerFileTypePlugin({
4 types: ["video/mp4"],
5 render({ file }) {
6 return (
7 <div style={{ paddingTop: "40%" }}>
8 <strong>My MP4</strong>
9 <br />
10 <span>{file.name}</span>
11 <br />
12 <span>{file.size} bytes</span>
13 </div>
14 );
15 }
16 })
17];
18
Read the full guide
CUSTOM FILE MANAGER UI
Register your own custom File Manager UI, useful if you want to use a different
DAM system, something like Cloudinary, Dropbox, etc.
1
2const CustomFileManager = createDecorator(FileManagerRenderer, () => {
3 return function FileManagerRenderer(props) {
4 const setRandomImage = () => {
5 const id = Date.now().toString();
6 const image: FileManagerFileItem = {
7 id,
8 src: `https://picsum.photos/seed/${id}/200/300`,
9 meta: [{ key: "source", value: "https://picsum.photos/" }]
10 };
11 if (props.multiple) {
12 props.onChange && props.onChange([image]);
13 } else {
14 props.onChange && props.onChange(image);
15 }
16 props.onClose && props.onClose();
17 };
18
19 return (
20 <OverlayLayout onExited={() => props.onClose && props.onClose()}>
21 {/* Render a simple button, and assign a random image on click. */}
22 <button onClick={setRandomImage}>Set random image</button>
23 </OverlayLayout>
24 );
25 };
26 });
27
28 export const App = () => {
29 return (
30 <Admin>
31 <Cognito />
32 {/* Mount the plugin, which will register a HOC for the `FileManagerRenderer`. */}
33 <CustomFileManager />
34 </Admin>
35 );
36 };
37
Read the full guide
CUSTOM FILE FILTERS
Create a custom filter that can be used to filter files in the File Manager
1
2const { Browser } = FileManagerViewConfig;
3
4const DemoFilter = () => {
5 return <span>Demo Filter</span>;
6}
7
8export const App = () => {
9 return (
10 <Admin>
11 <Cognito />
12 <FileManagerViewConfig>
13 <Browser.Filter name={"new-filter"} element={<DemoFilter />} />
14 </FileManagerViewConfig>
15 </Admin>
16 );
17};
18
Read the full guide
CUSTOM FILE FIELDS
Add custom meta data fields to your files
1
2export const handler = createHandler({
3 plugins: [
4 // Other plugins were omitted for clarity.
5
6 // Add the following code after your existing plugins.
7 createFileModelModifier(({ modifier }) => {
8 modifier.addField({
9 id: "carMake",
10 fieldId: "carMake",
11 label: "Car Make",
12 type: "text",
13 renderer: {
14 name: "text-input"
15 }
16 });
17
18 modifier.addField({
19 id: "year",
20 fieldId: "year",
21 label: "Year of manufacturing",
22 type: "number",
23 renderer: {
24 name: "number-input"
25 }
26 });
27 })
28 ],
29 http: { debug }
30});
31
Read the full guide
CUSTOMIZE FILE DETAILS DRAWER
Change the UI of the details drawer. You can change the size of the drawer, hide
fields, and group fields.
1
2<FileManagerViewConfig>
3 {/* Use percentage value. */}
4 <FileDetails.Width value={"80%"} />
5 {/* Use pixel value. */}
6 <FileDetails.Width value={"1300px"} />
7</FileManagerViewConfig>
8
Read the full guide
FILE LIFECYCLE EVENTS
You can listen to file lifecycle events, such as file upload, file delete, etc.
and trigger custom functions.
1
2new ContextPlugin<FileManagerContext>(async context => {
3 context.fileManager.onFileAfterCreate.subscribe(async ({ file }) => {
4 // Send a notification to Slack, or any other service.
5 await sendNotificationToSlack({
6 text: `New file created: ${file.name}`
7 });
8 });
9 });
10
Read the full guide
EXTEND THE GRAPHQL API
Extend the GraphQL types and operations
1
2new CmsGraphQLSchemaPlugin<Context>({
3 // Extend the `Query` type with the `listMyPosts` query. Note the `PostListResponse` type.
4 // It exists because we've previously created the `Post` content model via Admin Area.
5 typeDefs: /* GraphQL */ `
6 extend type Query {
7 # List posts that were created by the currently logged in user.
8 listMyPosts: PostListResponse
9 }
10 `,
11 // In order for the `listMyPosts` to work, we also need to create a resolver function.
12 resolvers: {
13 Query: {
14 listMyPosts: async (_, args: { id: string }, context) => {
15 const { security, cms } = context;
16
17 // Retrieve the `post` model.
18 const model = await cms.models.get("post");
19
20 // Use the `cms.entries.listLatest` method to fetch latest entries for the currently
21 // logged in user. Note that you could also use the `listPublished` method here instead
22 // of `cms.entries.listLatest`, if a list of published pages is what you need.
23 const response: [CmsContentEntry[], CmsContentEntryMeta] = await cms.entries.listLatest(
24 model,
25 {
26 where: {
27 // Retrieving the currently logged is as easy as calling the security.getIdentity method.
28 createdBy: security.getIdentity().id
29 }
30 }
31 );
32
33 return new ListResponse(...response);
34 }
35 }
36 }
37 })
38
Read the full guide
IMPLEMENT CUSTOM SORTING LOGIC
Create custom sorting for user defined content models
1
2export const customSorterPlugin = createCmsGraphQLSchemaSorterPlugin(({ sorters, model }) => {
3 // we only want to add the sorter when generating a certain model GraphQL Schema
4 if (model.modelId !== "yourTargetModelId") {
5 return sorters;
6 }
7 return [...sorters, "myCustomSorting_ASC", "myCustomSorting_DESC"];
8});
9
Read the full guide
DEFINE HEADLESS CMS CONTENT MODELS VIA CODE
Code-based content models can be used to implement custom business logic and
make it easier to version your schema changes
1
2export default [
3 // Defines a new "E-Commerce" content models group.
4 new CmsGroupPlugin({
5 id: "ecommerce",
6 name: "E-Commerce",
7 description: "E-Commerce content model group",
8 slug: "e-commerce",
9 icon: "fas/shopping-cart"
10 }),
11
12 // Defines a new "Product" content model.
13 new CmsModelPlugin({
14 name: "Product",
15 modelId: "product",
16 description: "Product content model",
17 group: {
18 id: "ecommerce",
19 name: "E-Commerce"
20 },
21 fields: [
22 {
23 id: "productName",
24 fieldId: "productName",
25 type: "text",
26 label: "Product Name",
27 helpText: "A short product name",
28 renderer: { name: "text-input" },
29 validation: [
30 {
31 name: "required",
32 message: "Value is required."
33 }
34 ]
35 },
36 {
37 id: "productSku",
38 fieldId: "productSku",
39 type: "text",
40 label: "SKU",
41 placeholderText: "SKU = Stock Keeping Unit",
42 renderer: { name: "text-input" }
43 },
44 {
45 id: "productPrice",
46 fieldId: "productPrice",
47 type: "number",
48 label: "Price",
49 renderer: { name: "text-input" }
50 }
51 ],
52 layout: [["productName"], ["productSku", "productPrice"]],
53 titleFieldId: "productName"
54 })
55 ];
56
Read the full guide
LIFECYCLE EVENTS
Create custom functions that are executed at specific points in the lifecycle of
a content entry
1
2new ContextPlugin<CmsContext>(async context => {
3 context.cms.onEntryAfterUpdate.subscribe(async ({ model, entry }) => {
4 /**
5 * For example, notify another system about updated entry.
6 */
7 await notifyAnotherSystemAboutEntryUpdate({ model, entry });
8 });
9});
10
Read the full guide
STORAGE TRANSFORMATION
Transform your data before it is stored in the database, and before it is
returned to the client
1
2new StorageTransformPlugin({
3 fieldType: "time",
4 fromStorage: async ({ value }) => {
5 const hours = Math.floor(value / 3600);
6 const secondsAfterHours = value - hours * 3600;
7 const minutes = secondsAfterHours > 0 ? Math.floor(secondsAfterHours / 60) : 0;
8 const seconds = secondsAfterHours - minutes * 60;
9
10 return [hours, minutes, seconds].map(value => String(value).padStart(2, "0")).join(":");
11 },
12 toStorage: async ({ value }) => {
13 const [hours, minutes, seconds] = value.split(":").map(Number);
14
15 return hours * 3600 + minutes * 60 + seconds;
16 }
17 });
18
Read the full guide
SELF-HOSTING POWERED BY SERVERLESS
THE INFRASTRUCTURE YOU CANNOT OUTGROW
Historically self-hosting has been hard, but the times have changed. Serverless
infrastructure significantly reduces the operational costs of self-hosting,
while giving you an infrastructure setup that's more secure and more scalable
than what many off-the-shelf SaaS solutions can provide.
Want more proof? Give us a call, we're happy to show you.
RESILIENT & SCALABLE
The underlying serverless infrastructure is fault-tollerant, and can scale to
handle workloads from your very first user, to your first million users, and
beyond.
YOUR DATA, YOUR RULES
Webiny is self-hosted, your data is your own, nobody else has access to it.
It’s easy to check-in, but also to check-out. No lock-in!
COST-EFFICIENT
The consumption-based pricing model of serverless infrastructure ensures you
never overpay or overprovision your infrastructure ever again.
SECURE INFRASTRUCTURE
The infrastructure is maintained by the cloud vendor for you. It will save you
time and money, and reduce potential attack vectors, while making you more
secure.
DATA GOVERNANCE
Webiny being self-hosted means you you can apply your own data governance
requirements.
Webiny is SOC2 compliant out-of-the-box, but you don’t need to stop there, GDPR,
FedRAMP and HIPPA compliances can also be met.
INCREASE OPERATIONAL EFFICIENCY
Less time spent on infrastructure management unlocks more time spent doing the
work that really matterrs, like building better products.
BRING YOUR USERS
Webiny provides integration points to bring any existing IdP or SSO setup,
including any custom made ones.
BRING YOUR VPC
Webiny can be deployed inside an existing VPC. What’s more, this allows Webiny
to communicate and tightly integrate with all your current systems and
applications in a secure way.
BRING YOUR SECURITY
We believe any security that's based on "trust" is a bad practice. With most
SaaS vendors instead of zero-trust approach, you get the "trust me" approach.
Webiny is the opposite, you own your data and control your security.
Bring and integrate your own Firewall, IDPS and monitoring system.
READY TO GET STARTED?
FOR BUSINESS TEAMS
Discuss your business/project needs and CMS requirements
Get the answers to your specific business questions
See Webiny in action and learn how it can power your business
Book a demo with our product team
FOR DEVELOPERS
Install Webiny in just 4 minutes.
Learn how to create a new Webiny project and deploy it into your AWS account.
Read the documentation
DevelopersInstall WebinyLicenseGitHub repositoryContribute
ProductsHeadless CMSPage BuilderFile ManagerForm BuilderPublishing
WorkflowControl Panel
FeaturesMulti TenancySelf HostedOpen SourceServerless InfrastructureDevelopment
FrameworkCMS+
IntegrationsNext.js CMSGatsby CMSReact CMSVue.js CMSFlutter CMS
ResourcesEnterpriseSlackBlogYouTubePartnersKnowledge Base
CompanyAbout UsCareersPrivacy PolicyTerms of ServiceContact Us
*
*
*
*
Webiny Inc © 2024
Join Webiny Newsletter
Join
* We send one newsletter a week.
* Contains only Webiny relevant content.
* Your email is not shared with any 3rd parties.
Webiny Inc © 2024
FIND US ON SLACK
--------------------------------------------------------------------------------
or
BOOK A PRODUCT DEMO
By using this website you agree to our privacy policy