Intro to libraries
Why use libraries
In WeWeb, libraries have two main benefits: building speed and consistency.
Colors, spacings, and typographies allow you to build user interfaces with a consistent look-and-feel, while templates and components help you build faster.
When you open the Libraries
panel, you will be able to see your current project's library:
If you start with a blank project, it will be empty but you can add:
- colors,
- spacings,
- typographies,
- UI components, and
- element and section templates
TIP
Each WeWeb project has its own library, but you can:
- share that library with the rest of your workspace, and
- add other libraries from your workspace to a project.
Learn more about sharing libraries in WeWeb.
Typographies
In the Typographies
section, you can create and edit typographies so that all text elements bound to a typography are updated accordingly when a typography is udpated:
TIP
When creating a typography, we recommend using a default font:
That way, users will be able to use the library without needing to adding a specific font to their project.
If you associate a typography to a specific font, users will need to have that font installed in their project for the library to work as expected. Otherwise, when the project is published, the font displayed on the page will fall back on the browser's default font.
Colors
In the Colors
section of a library, you can add and organize colors that you can then bind to the CSS color
property in the Styles
tab of the right panel.
In the example below, we bound our headline to the Gray 900
color in our project library:
You can also use library colors in formulas:
In the example above, the text color will be different if it's in a primary or secondary button.
Spacings
In the Spacings
section of a library, you can add and organize spacing styles that you can then bind to the CSS properties in the Styles
tab of the right panel:
In the example above, we added standard Tailwind spacing scales to our project library and bound:
- spacing
4
to ourpadding-top
andpadding-bottom
, and - spacing
6
to ourpadding-left
andpadding-right
properties.
Classes
In the Classes
section of a library, you will be able to see all the style classes that were added to that library.
While you won't be able to rename or delete classes through this panel, it can be helpful to get an overview of what classes are used in an external library or to check if a class is attached to a specific library.
Learn more about working with CSS classes in WeWeb.
Components
In the Components
section of a library, you will find reusable components that you can use to build a UI that has a consistent look-and-feel, without having to no-code the same functionalities multiple times.
Learn more about WeWeb components.
Templates
In the Element templates
and Section templates
of a library, you will find templates that you can use as UI building blocks to design the frontend of your apps faster:
How to add a template in a library
To save an element or section as a template, select it on the page, and click on the Save to library
icon:
How to add a template on a page
Once you have saved templates to your project library, you will be able to drag-and-drop them on the page from the Add
panel:
How to rename or delete a template
To rename or delete a template, go to the Libraries
panel under the Element templates
and Section templates
categories:
Templates vs components
When you drag-and-drop a template on a page, it will create a copy of the template. If you later make a change to the template, those changes will not be reflected in the copies you created before.
When you drag-and-drop a component on a page, it will create a new instance of the component. If you make a change to the component, those changes will be reflected in all the instances of the component you created before.