Here I show a simple yet realistic example: using an API during Docusaurus build, saving the result in a static JSON file, and then displaying this data in a page or component.

This type of workflow is ideal for keeping a static site in production while leveraging external data at compile time. But beware: not all APIs can be easily queried from a CI server (GitHub Actions). We will see how to bypass blocking (Cloudflare) and set up a robust fallback.

The Time Timer is an innovative visual tool designed to "materialize" the passage of time, allowing for better activity management by making the remaining time visible. It comes in the form of a timer with an analog dial featuring a colored disk, often red on a white background, which gradually shrinks as the countdown progresses until the final alarm or color change. This device, invented by Jan Rogers to help her daughter better understand transitions between activities, is particularly useful for children who struggle with the concept of elapsed time, but also for adults. It's used to visualize the remaining time for a task, whether for homework, classes, playtime, or other daily activities, thus promoting autonomy, concentration, and time management.

While observing my daughter's Time Timer, I had the idea to develop the TimeTimer component to solve a simple need: displaying content only at certain dates or during specific periods. Whether for promotional offers, seasonal events, or temporary announcements, this component allows you to automate the display without having to manually modify your pages.

Bonus: at the end of this article, you'll discover how I created an Advent calendar with my TimeTimer component!

The default 404 page in Docusaurus is functional, but quite basic. For many years now, it has become a page that allows you to stand out even though it's the result of a website flaw (broken link or unredirected URL). Building a stylish 404 page is therefore an opportunity to provide a better experience when a link breaks. Here's how I set up a custom 404 with Docusaurus, keeping the page lightweight and responsive.

After adding Goatcounter to my blog, I wanted to display view counts for each page. My goals were to:

• Display the number of views for a page
• In the article list, show the views for each post individually
• Avoid HTML injection and the "flash" of unparsed content (common when using JavaScript or the iframe)

So I created this component using GoatCounter's JSON API.

Official Goatcounter docs for this: View counts

Analyzing website traffic while respecting user privacy is an increasing challenge. Goatcounter is an open‑source, cookieless analytics solution that addresses this need. Here's how I integrated Goatcounter with my Docusaurus site, exploring three different approaches including proper tracking for single‑page application (SPA) navigation.

Introduction​

I created the Trees component to display interactive file and folder trees directly in Docusaurus pages. It's perfect for documenting project structure, explaining architecture, or presenting code examples.

I created this component to add a fixed floating Back to Top button. It becomes visible after the user scrolls 300px vertically; on click it triggers a smooth scroll to the top while playing a short visual animation on the icon. I kept it simple without public props: customization (threshold, image) is done by editing the source (index.js). My goal was to keep it lightweight and easy to reuse.

1. Why I added a playground​

I wanted readers to learn faster by allowing them to modify examples inline. The @docusaurus/theme-live-codeblock theme integrates react-live to evaluate JSX in real time.

Benefits I gained:

• Instant feedback for readers
• Pedagogical demos without an external sandbox
• Visual consistency with the site
• No page context switching

Tooltips are everywhere on the web. They are essential for providing contextual information without cluttering the interface. But creating one that is robust, aesthetically pleasing, and above all, accessible, is a real challenge.

I developed this Tooltip component for Docusaurus. It doesn't just display a simple information box; it integrates intelligent positioning logic, an arrow that always stays aligned, and great customization flexibility.