# Introduction

WEWEB LOGO

# What is weweb.io ?

weweb.io (opens new window) is a no-code site builder where you can drag and drop different customizable blocks. Every time you hit publish, we build a JavaScript application. Then, we render statically-generated pages from it that we host on a content delivery network. Search engines can load them fast and read them easily, improving SEO and overall user-experience.

# Core concepts

When you build your weweb.io (opens new window) website, you use two type of blocks: Sections and Elements (see below for difference).

Under the hood, they are both just Vue components, which have special props so that weweb.io editor can communicate with them.

We already provide a bunch of base elements (opens new window) (like editable text or image), but you can also develop your own. They are fully customizabled, and will be usable by users inside weweb.io (opens new window) in the same way as our core components (with drag and drop and properties edition in the sidebar).

Each element or section have what we call a content: it's a data object which hold your custom properties. There is two contexts when your element or section can be loaded: inside the editor (Editor mode) or inside the published website (Front mode). In Editor mode the content is editable by the user, and saved on our database on each change. In Front mode the content is static.

You can use the configuration file to use our build in logic to edit your section/element content, or handle yourself the edition interface. We have a strip logic available, so even if your element/section has a heavy editing logic, this will have no impact on the published website. You can learn more about stripping here

Your custom components will inherit the base edition interface, like size, background color or border. Be carefull to remember that a weweb.io (opens new window) user expects to change them, and write your style and javascript with this in mind.

If you want to provide value for these weweb.io (opens new window) properties (padding for example), we advice you to drop an instance of your component inside the editor, change the needed values with the editor interface, and then save them inside the Design System. Component source code is responsible to handle content/custom logic, and Design system are the way to save style/preset of your components.

# Section vs Element

Section are large block inside weweb.io (opens new window). They are standalone, and cannot be used inside other components. They offer less edition option, but are easier to design because you have more control on the layout they will appear in (they will be direct child of your page)

Elements are smaller blocks, and can be use by sections or other elements.

TIP

Use section if you need to master the layout of your component or if you will not use it inside other components. Otherwise go for an element

You can learn how to create a custom component here.