# The CMS widgets repository: 43 widgets and how to add them

> A tour of totaljs/cms-widgets, the official widgets of the Total.js CMS: what they cover, which ones render on the server, how db.json is generated and how to install a widget from a file.

Framework: cms
Product: CMS (cms@8071e48)
Language: en
Content-SHA256: 4ad631d644c4203883e4d4e49114a1dac43eb6eb1e92f4c319e9d4c360676593
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) holds the official widgets of the Total.js CMS. In the revision documented here (`dc92cb7`) it has **43 widgets** in `widgets/`, one HTML file each, all with the group *Content*, plus the script that generates the catalogue (`db.js`). The format of every file is described in [widgets](/en/cms/widgets/).

## What they cover

The repository puts every widget in one group; the table below only orders them by what their names suggest, to help you find them.

| Kind | Widgets |
|---|---|
| Text | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Layout | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Text with image | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Images and media | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Links and buttons | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Integration | `importer`, `uibuilder` (see [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Nine of them use `exports.render` to build their HTML on the server (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` and `uibuilder`); the rest are static blocks that the editor configures and the CMS serves as they are.

## Add a widget to your CMS

Each file is a complete widget. In the admin, open the plugin *Widgets* and import the file, or send it with the API:

```json
{ "schema": "widgets_save", "data": { "html": "<the content of headline.html>", "singleton": true } }
```

`POST` it to `/admin/` with the session cookie or the `x-token` header ([the admin API](/en/cms/the-admin-api/)).

## The catalogue: `db.json`

The editor can list the widgets of a catalogue. `db.js` creates it: it reads every file of `widgets/`, takes `name`, `author` and `preview` from its `exports`, builds the address `https://cdn.totaljs.com/cms/<file>` and writes `db.json` sorted by name, with one entry per widget (`id`, `name`, `url`, `author`, `preview`). `db.js` starts with `require('total4')`, so it needs Total.js 4 to run, as in the repository of the components of Flow ([the components repository](/en/flow/the-components-repository/)).

## Your own widgets

Copy the closest widget, change `exports.id` and `exports.name`, and adapt the style, the design and the settings. If the widget needs a library, list it in `exports.dependencies` and the CMS adds it to the head of the pages that use it.