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 DOMGET 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