Library overview

A library is a table view of reusable design assets and UI elements that helps you build applications faster while maintaining consistency. It includes guidelines, styles (colors, typographies, spacings, radius, shadows, and borders), components, templates, and classes that can be shared across your workspace and reused across different projects. It is essentially a way for you to build your design system.

Why use libraries

Styles allow you to build user interfaces with a consistent look-and-feel, while templates and components help you build faster.

To access the library of your project:

1. Click on the Assets tab in the Interface section
2. Open Library

You will now see the overview of your project's library. From there, you can share it with your workspace and see the other libraries your project uses. Its sections are listed under Library in the Assets menu: Guidelines, Styles, Components, Templates, and Classes. Styles has one entry per type of style: Colors, Typographies, Spacings, Radius, Shadows, and Borders.

If you start with a blank project, it will be empty but you can add:

1. Components
2. Templates
3. Classes
4. Styles: colors, typographies, spacings, radius, shadows, and borders
5. Guidelines

TIP

Each WeWeb project has its own library, but you can:

1. Share that library with the rest of your workspace, and
2. Add other libraries from your workspace to a project

Learn more about sharing libraries in WeWeb.

Guidelines

In Library > Guidelines, you can write the design rules of your project in plain text: how to name things, how folders are organized, which colors to use for what. Click Edit guidelines to write them, then Save guidelines.

Guidelines help anyone working on the project, people and AI alike, follow the same design choices.

Styles

Click Styles under Library to set the Default theme of your project (Light or Dark). This is the same setting as in Theme & Style.

Each type of style has its own entry under Styles. Hover the question mark next to the panel title to see what that type of style is for. Click New to create a style, and give it a folder to keep your styles organized.

Typographies

In Library > Styles > Typographies, you can create and edit typographies so that all text elements bound to a typography are updated accordingly when a typography is updated:

In the example above, you can see:

• In Typographies, we opened the display-hero typography in the typography folder
• We bound that typography to the page title in the Style tab on the right side of the editor

TIP

When creating a typography, we recommend using a default font:

That way, users will be able to use the library without needing to add 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 to the browser's default font.

Colors

In Library > Styles > Colors, you can add and organize colors that you can then bind to the CSS color property in the Style tab on the right side of the editor.

Each color has a Light value and a Dark value. Your app shows one or the other depending on its theme. Learn more about switching between light and dark themes.

In the example below, we opened the text-primary color, which our page title uses. It has a dark value for the light theme and a light value for the dark theme:

You can also use library colors in formulas:

In the example above, we inserted the text-primary color in the formula of the Text color property. Library colors are in the COLORS section of the binding window.

Spacings

In Library > Styles > Spacings, you can add and organize spacing styles that you can then bind to paddings, margins, gaps, and border widths in the Style tab on the right side of the editor.

Radius

In Library > Styles > Radius, you can add the corner radius of your buttons, inputs, cards, and badges. In the Style tab, link the corner radius of an element to one of them. A radius of 999px gives a pill shape.

In the example above, we bound the corner radius of a card to the md radius (10px).

Shadows

In Library > Styles > Shadows, you can create box shadows. A shadow can have several layers: click Add a layer to stack them. The color of each layer is a color from your library, so your shadows follow the light or dark theme too.

In the Style tab, link the shadow of an element to one of your shadows. If you unlink it, the element keeps the shadow's layers and you can edit them.

In the example above, the card shadow has two layers, and the card on the page is linked to it.

Borders

In Library > Styles > Borders, you can create borders with a width, a style, and a color. The width can be one of your spacings and the color one of your colors.

In the Style tab, you can link the border or the outline of an element to one of your borders.

Classes

In Library > Classes, you will be able to see all the style classes in your 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 Library > Components, you will find reusable components that you can use to build a UI that has a consistent look-and-feel, without having to build the same functionalities multiple times.

Learn more about WeWeb components.

Templates

In Library > Templates, you will find section and element templates that you can use as UI building blocks to design your apps faster:

How to add a template to a library

To save an element or section as a template:

1. Select the element or section on the page
2. Click on the three dots (•••) menu in the top right corner
3. Click Save to assets
4. In the window that opens, click Create
5. Name your template and click Create

How to add a template to a page

Once you have saved templates to your project library, you will be able to drag-and-drop them onto the page.

To view available templates and components:

1. Click the Add Element icon in the Interface left sidebar
2. Open UI Kits and select the library you want to use
3. Browse templates and components from that library
4. Drag and drop the item onto your page

TIP

Components have a small component icon in the top-left corner of their thumbnail.

Rename library item

To rename a library item:

1. Open Library in the Assets tab
2. Navigate to the section where the item is located
3. Select the item you wish to rename (for a style, click the three dots (•••) next to it and click Edit)
4. Update the name and save

To rename a folder of styles, click the three dots (•••) next to its name, then click Rename.

Delete library item

To delete a library item:

1. Open Library in the Assets tab
2. Navigate to the section where the item is located
3. Hover over the item you want to delete
4. Click on the three dots (•••) next to it
5. Click Delete

To delete a folder of styles, click the three dots (•••) next to its name, then click Delete. This deletes all the styles in the folder, subfolders included, and the elements that use them lose these styles. You can undo it with Ctrl+Z.

TIP

Before deleting a style, click Find in its menu to see where it's used in your project.

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.