---
title: Blogtini Themes and Web Components - Update
date: 2023-06-15
categories:
- website
tags:
- markdown
- javascript
- blog
- website
- blogtini
featured: theme-picker.png#top
comment:
---
Working with the amazing
[Renior, another volunteer](https://twitter.com/renoirb) ... We've been splitting up the main (javascript) post "crawling" and processing, from the formatting.
## Themes
That gives us very easy to create themes! A theme can reuse formating or "business logic" from other themes -- or come up with any number of new ways to display pages and/or the entire site.
The above image shows the theme picker from the top nav menu.
## Web Components
We settled on
[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
which are browser native (as opposed to `react`).
Tracey likes [lit](https://lit.dev/) since it is a lightweight/minimal setup atop
native web components. But a theme can use any style of web components they like.
## Example
Once the posts are all parsed from your site, they are stored in a browser cache (`localStorage` or `indexedDB`).
When you arrive at a blog post, a page, or a list of posts for a given tag, etc.
the main javascript can simply rewrite the page `` tag to:
```html
...
```
Each web component is its own javacript file that knows how to render the given section.
For example, this is the default theme's
[bt-post](https://blogtini.com/theme/future-imperfect/bt-post.js)
file/component.
Here is a [second theme](https://blogtini.com/theme/grid/index.js) and how it sets itself up --
as overrides to the main theme.