Features

Components

All WebDigital websites are SPAs (Single Page Applications). They are built with a modified version of Preact for better performance. All components have their contents (result of render function) and this is represented as an elements tree in WebDigital. All components have a root element and that element can have its own children, which makes up a tree. The elements of the components can be edited in the component designer. That part of the component designer is called element designer. Element designer has 6 tabs that help you edit different aspects of the element.

Element Designer

  • The first 2 tabs are styler and style list. Styler provides a visual way to edit element's inline styles. Style list allows you to cut, copy and paste them between different elements. 
  • The third tab is the settings tab, which includes the attributes of the element. For example, an image would have a src, width and height attribute, among others. It is also possible to set custom element attributes. 
  • The fourth tab is the CSS tab, which controls the element classes and default styles. Adding an element class in the CSS tab would automatically add the class definition to the component CSS. Then you can edit the CSS rule styles in a similar way to the styler that is used to edit element inline styles. After that, you can go back to editing the element. Component designer retains your history and allows you to go back and forth. This tab also displays the rules that impact the element and links to them. It provides a list of default styles for the element and provides a way to override them if needed.
  • The fifth tab is the JavaScript tab. This is used in a very similar way to the React JSX. You can add component functions and bind them to the element styles, classes, attributes and its text contents. They work in conjunction with the component class, which defines the state and can modify the contents based on that. Very much like React.
  • The sixth tab is for linking to the element ancestors and editing element children with a different interface. This tab provides bulk operations like wrap, wrap each, add before/after and add first/last child. It allows you to copy and paste children between different elements. It is a more difficult UI but very powerful. You can place children anywhere in the element. This tab also provides text editing for text elements like Rich Text.

Elements

There are many elements that are available to be used. They may have different settings, styles or events but the editing experience remains the same. Pretty much any HTML element is available. There are also some enhanced elements. Here are some notable ones:

  • Columns/shape divider/masonry grid: similar to Wordpress columns element versions. 
  • Slide show: a wrapper around popular Swiper project.
  • YouTube/Vimeo/Video controls: upload your video to WebDigital or to third party platforms and embed in WebDigital. 
  • DynamicText: renders a span with dynamic text content based on the output of a component function. 
  • Switch: renders different children based on the output of a component function. 
  • Repeater: renders the same children multiple times based on the output of a function. Loop record and index are available to the repeated elements.
  • Form Control: Forms are edited the same way any other HTML element would be edited but there is an enhanced Form Control that allows you to save the form submissions and get email notifications. It can even handle file fields. Recaptcha automatically added. Our website editor makes it possible to add ANY kind of form to your pages. You can even create forms with dynamic lists (e.g. patient medicines or historical records).
  • Router: works like React routers. Displays different components based on the url.
  • Component Element: renders a component inside a div. It can be styled like other elements.

Rendering

Basically components can render other components using either router or a component element and components can use jsText, switch and repeater elements to produce dynamic text. The top level component renders lower level components and so on. They are also rendered on the server side (SSR) for initial request for better SEO scores. You can edit the component contents from the workspace. If a component is rendered multiple times in the workspace, all of them would change at the same time if you change an element in the component. Components can also import other objects, very much the same way it's done in React. Each CSS object can be a text-edited like Bootstrap/Font Awesome or "managed" where the medias, rules and keyframes of the CSS object are edited in the component designer. In a similar way, file and font dependencies are kept with the component so that it can be shared. So, with this architecture you can see: Components are apps and apps are components.