# Discourse Qingwa Timelines - Custom BBCode for Beautiful Timeline Layouts
**URL:** https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954
**Category:** Theme component
**Created:** [November 8, 2025, 10:18pm UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954 "2025-11-08T22:18:20Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@scavin](https://meta.discourse.org/u/scavin)
#### Post date: [November 8, 2025, 10:18pm UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/1 "2025-11-08T22:18:20Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | A Discourse theme component for creating beautiful timeline layouts |
| 👓 | **Preview** | [https://meta.appinn.net/t/topic/76953](https://meta.appinn.net/t/topic/76953) |
| 🛠 | **Repository** | [GitHub - scavin/discourse-qingwa-timelines: A Discourse theme component for creating beautiful timeline layouts · GitHub](https://github.com/scavin/discourse-qingwa-timelines) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
I’m excited to share a new theme component that adds elegant timeline layouts to your Discourse community!
This is my first theme component, built with the assistance of LLM.
## What is it?
**Discourse Timelines** is a theme component that implements custom BBCode `[timelines]...[/timelines]` for creating beautiful, minimalist timeline layouts. Perfect for project roadmaps, step-by-step guides, company histories, chapter divisions, and more.
### Published Timeline Effect
### Composer Toolbar Button
### Markdown Editor View
## Key Features
✅ Custom BBCode - Simple [timelines] syntax
✅ Composer Toolbar Button - No need to type tags manually (solves the new editor bracket escaping issue!)
✅ Beautiful Design - Vertical gradient line with clean, minimalist aesthetic
✅ Markdown Support - Preserves all formatting inside timelines
✅ Multilingual - Built-in translations for 9 languages (EN, ZH\_CN, ZH\_TW, DE, ES, FR, JA, KO, RU)
✅ Theme Compatible - Works with both light and dark modes
✅ Customizable - Easily change colors via admin settings
✅ Responsive - Mobile-friendly layout
✅ Safe - XSS protection built-in
✅ No Dependencies - Uses only Discourse native APIs
## Usage
### Using the Toolbar Button (Easiest!)
1. Open the composer
2. Click the **“+”(options)** menu button
3. Select **“Insert Timeline”**
4. Edit your content
5. Publish!
The toolbar button solves the issue where the new Discourse editor auto-escapes manually typed square brackets.
### Example Syntax
```plaintext
[timelines]
## January 2024 - Project Launch
The project was officially initiated, and the team was formed.
## March 2024 - First Release
Core functionality development completed and beta testing began.
## June 2024 - Version 2.0
Major update with new features:
- Feature A
- Feature B
- Feature C
[/timelines]
```
## Customization
All colors can be customized via theme settings:
- **timeline\_gradient\_start** - Top gradient color (default: `#ff7a18`)
- **timeline\_gradient\_end** - Bottom gradient color (default: `#ffb800`)
- **timeline\_heading\_color** - Heading text color (default: `#d96d14`)
- **timeline\_dot\_color** - Timeline dot color (default: `#ff7a18`)
- **timeline\_heading\_color\_dark** - Dark mode heading color (default: `#ff9854`)
- **timeline\_dot\_border\_color\_dark** - Dark mode dot border (optional)
I hope you find this component useful! Please let me know if you have any questions, feedback, or suggestions. 😊
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [November 10, 2025, 1:31am UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/2 "2025-11-10T01:31:35Z")
This is a very nice component! Very useful.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [November 14, 2025, 1:57am UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/3 "2025-11-14T01:57:01Z")
Does this also support pics/video?
---
### Author:  [@scavin](https://meta.discourse.org/u/scavin)
#### Post date: [November 14, 2025, 6:50am UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/4 "2025-11-14T06:50:58Z")
Yes, it supports both images and videos.
Here is a quick demo[[DEMO LINK](https://meta.appinn.net/t/topic/76953/4?u=qingwa)]
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [November 15, 2025, 4:01am UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/5 "2025-11-15T04:01:45Z")
Very sweet indeed. Awesome work!
---
### Author:  [@jordanjay29](https://meta.discourse.org/u/jordanjay29)
#### Post date: [November 26, 2025, 4:16am UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/6 "2025-11-26T04:16:34Z")
Does this work with the DiscoTOC?
It seems to rely on the larger headers, which makes it a little more inflexible with the TOC hierarchy.
---
### Author:  [@scavin](https://meta.discourse.org/u/scavin)
#### Post date: [November 26, 2025, 5:07am UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/7 "2025-11-26T05:07:38Z")
I tested it with DiscoTOC and didn’t find any issues.
I’ve added a TOC on the [demo page](https://meta.appinn.net/t/topic/76953) — feel free to open it and see how it works.
---
### Author:  [@jordanjay29](https://meta.discourse.org/u/jordanjay29)
#### Post date: [November 26, 2025, 4:36pm UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/8 "2025-11-26T16:36:54Z")
Thanks for that reference.
When using it in a post with the autoTOC, it stands out by relying on the header 2 and 3 markdown. Is there any way to shift it to using headers 4 or 5 instead/in addition for more flexibility?
If the timeline appears further down in the TOC hierarchy, like after a header 2 or 3, it causes the TOC to look visually unordered.
EDIT: I can wrap this in [details] tags and it removes the Timeline headers from showing up on the TOC. Reasonable workaround for my purposes fwiw.
---
### Author:  [@scavin](https://meta.discourse.org/u/scavin)
#### Post date: [November 27, 2025, 10:19am UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/9 "2025-11-27T10:19:10Z")
Thanks for the suggestion! I’ll look into how to improve this.
---
### Author:  [@scavin](https://meta.discourse.org/u/scavin)
#### Post date: [November 28, 2025, 3:31am UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/10 "2025-11-28T03:31:05Z")
You can now keep your timeline headings out of the TOC without workarounds:
use pseudo-headings inside [timelines] by prefixing with `##!` (for H2 styling) or `###!` (for H3 styling).
Example:
```plaintext
[timelines]
##! 2020 – Foundation
Content…
[/timelines]
```
These render like H2/H3 inside the timeline but are not treated as real headings, so autoTOC stays tidy regardless of where the timeline sits.
If you want a timeline’s headings to stay in the TOC, keep using normal `##`/`###`.
Right now, if there’s even a single `##!` (or `###!`) inside [timelines], the TOC will skip the entire timeline.
~~Mixing both styles in the same timeline isn’t supported yet.~~
You can mix them now: `##`/`###` still show up in the TOC, while ##!/###! render only inside the timeline and stay out of the TOC.
Please update the component and give it a try.
---
### Author:  [@jordanjay29](https://meta.discourse.org/u/jordanjay29)
#### Post date: [November 28, 2025, 3:53am UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/11 "2025-11-28T03:53:00Z")
That’s a clever workaround idea!
This seemed to work fine for
```plaintext
[timelines]
##! 2020 - Foudnation
Content...
###! March
Content
[/timelines]
```
But not for a pseudo-header following another formatting item like a list:
```plaintext
[timelines]
##! 2020 - Foundation
* Listicle
###! March
Dooooooom!
[/timelines]
```
The first pseudo-header also prefers to be inline with the opening `[timelines]` tag to avoid formatting an empty line above. Like:
```plaintext
[timelines]##! 2020 - Foundation
Content...
[/timelines]
```
Otherwise there’s a gap above the first pseudo-header as if it was a regular, non-header, timeline block line.
Thanks for your work on this, it’s getting incredibly flexible to use now.
---
### Author:  [@scavin](https://meta.discourse.org/u/scavin)
#### Post date: [November 28, 2025, 8:11am UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/12 "2025-11-28T08:11:41Z")
Thanks for flagging it.
I’m seeing the same. Right now these render correctly:
```plaintext
[timelines]##! 2020 - Foundation
Content...
[/timelines]
```
and
```plaintext
[timelines]
##! 2020 - Foundation
Content...
[/timelines]
```
But this does not work:
```plaintext
[timelines]
##! 2020 - Foundation
Content...
[/timelines]
```
I’m looking into it but haven’t settled on the right fix yet. 😂
---
### Author:  [@jordanjay29](https://meta.discourse.org/u/jordanjay29)
#### Post date: [December 2, 2025, 8:16pm UTC](https://meta.discourse.org/t/discourse-qingwa-timelines-custom-bbcode-for-beautiful-timeline-layouts/387954/13 "2025-12-02T20:16:21Z")
The code also appears to activate anywhere `[timelines]` is present in the post, even if it is enclosed in code backticks like above. Escaping with backslash `\[timelines]` does not appear to make a difference, either.
ETA: the [timelines] and [/timelines] tags appear to escape linebreaks and appear on the same line as the closest text in code blocks with three backticks ```
So
```plaintext
[timelines]
Blah
Blah
[/timelines]
```
Appears as
```plaintext
[timelines]Blah
Blah[/timelines]
```
Encountered this while writing up a guide to use it, so it’s probably just an edge case.