---
created: 2023-10-21 15:30:26
updated: 2024-09-01 15:40:16
---
# How to manage UIBUILDER documentation using Docksify.
The UIBUILDER documentation is made available as a GitHub web site and locally in Node-RED via its ExpressJS web server.
Docksify works using a single, main `docs/index.html` file.
## Build process
The Docsify configuration, styles and extensions are optimised for offline use when used in Node-RED.
Run `npm run buildDocBundle` from the uibuilder source folder. (Only for uibuilder developers)
## Included Docksify Extensions
The following Docsify extensions are bundled into this package:
* `docsify-copy-code`
* `docsify-darklight-theme`
* `docsify-pagination`
* `docsify-plugin-flexible-alerts`
* `docsify-plugin-toc`
* `docsify-themeable`
## Custom Code
The before and after page rendering hooks are used to:
* Provide a smart footer containing a copyright with auto-dates and the last updated date for the page (depends on the `lastUpdated` field in each pages frontmatter).
* Replace all instances of UIBUILDER text in pages with a colourified version using the UIBUILDER branding.
## Themes and CSS Overrides
### Docksify themes
```html
```
### Custom theming
`./.config/index.css` contains a large number of style overrides.
#### Image alignment & sizing
Align images:
```markdown
 - aligns an image right
 - aligns an image left
 - aligns an image centre
```
Size overrides for images:
```markdown
```
You can also add a custom CSS class if needed:
```markdown
```
You can also customise the HTML ID:
```markdown
```
## Information/Callout Boxes
The ["Flexible Alerts"](https://github.com/fzankl/docsify-plugin-flexible-alerts/) plugin provides highlighted callout information boxes. Each one is defined using an initial line:
```markdown
> [!NOTE]
> [!TIP]
> [!WARNING]
```
Additional types can be defined in `index.html` and the layout/style can be adjusted. See the plugin documentation for details.
Note that the 3 listed match the callouts allowed in GitHub markdown as well. They are also supported in Obsidian (via ) and natively in Typora.
Docsify native callouts (`!>`, `?>`) are not recommended as they do not match the commonly used GitHub callouts.
## UIBUILDER Major Version Changes
Update the documentation version in `index.html` and in `docs/_coverpage.md`
`index.html` has three places to change: html title, `.app-name-link::after`, and `window.$docsify.name`.
## Moving pages/folders
If you need to move a page or a folder, make use of `index.html`s `window.$docsify.alias` which provides mappings from old to new. It supports `regex` in the key.