DocuxLab
LightNews LightNews
banner
docuxlab.com
DocuxLab
@docuxlab.com
10 followers 20 following 38 posts
Find here my developments, research, and notes about Docusaurus and more
#docusaurus #reactJS #Markdown
Posts Replies Media Videos
docuxlab.com
⏰ Inspired by my daughter’s Time Timer, I built a React component that shows content only when it matters — using real DOM rendering,0% CSS.
Bonus : create amazing Advent calendar !

Perfect for promos, events, and Advent calendars
docuxlab.com/blog/docusau...

#react #webdesign #Docusaurus #DOM
Component TimeTimer | DOCUX
React component for time-based conditional rendering in Docusaurus. Display content based on fixed dates or time ranges with UTC support, custom fallback dates, and flexible period management.
docuxlab.com
November 2, 2025 at 10:26 AM
docuxlab.com
🚧 Turn your 404 page into a UX win!
I explain how to customize a 404 page in Docusaurus (swizzle, WebP, dvh/svh, etc.) for a clean and responsive result
👇
docuxlab.com/blog/404-cus...

#webdev #Docusaurus #frontend #404page #designweb #seo #googleanalytics #javascript #w3c #nodejs #reactjs #mkdocs
Creating Custom 404 Page | DOCUX
Learn how to build a stylish, responsive custom 404 error page in Docusaurus using swizzle, modern CSS, and optimized WebP images.
docuxlab.com
November 2, 2025 at 8:08 AM
docuxlab.com
🎉 New launch!
I’ve just opened a community forum about Docusaurus : forum.docuxlab.com

It’s a space to discuss technical documentation, share tips, ask questions, and grow our projects together.

👉 Join the discussion
#Docusaurus #OpenSource #reactJs #Mkdocs
October 30, 2025 at 8:48 PM
docuxlab.com
🧩 New on my blog
I built a small component to display GoatCounter views on pages using the JSON API.

No external scripts, no flashing — just clean and lightweight

👉 docuxlab.com/blog/goatcou...

Thanks @arp242.bsky.social for creating such a great tool!

#GoatCounter #analytics #GDPR #docusaurus
GoatCountViews Component | DOCUX
Add a clean view counter in Docusaurus with GoatCounter, the JSON API, and an explicit per-post path (path={metadata.permalink}).
docuxlab.com
October 27, 2025 at 8:28 PM
docuxlab.com
🐐 New on my blog!
I dive into GoatCounter, a privacy-friendly, open-source alternative to Google Analytics.
Simple, ethical, and self-hostable — perfect for anyone who wants to track visitors without invasive trackers.

👉 look > docuxlab.com/blog/goatcou...

#OpenSource #Analytics #goatcounter
GoatCounter analytics | DOCUX
Discover GoatCounter (open‑source, cookieless) and 3 ways to integrate it with Docusaurus, including SPA route change tracking.
docuxlab.com
October 26, 2025 at 5:38 PM
docuxlab.com
🌳 New on DocuxLab!

Check out Trees, a Docusaurus component that displays interactive file trees in your docs — with custom icons, keyboard navigation & more.

Perfect for visualizing your project structure!

👉 docuxlab.com/blog/trees-c...

#Docusaurus #React #OpenSource #DevTools #treeStructure
Component Trees | DOCUX
Create interactive file and folder trees in your Docusaurus pages with the Trees component. Works with or without custom icons.
docuxlab.com
October 22, 2025 at 6:51 AM
docuxlab.com
🦖 Want to automate the formatting of words or phrases in your #markdown content?
Automatically replace words with other words or React components.

👉 Learn how it works full code and examples included:
🔗 docuxlab.com/blog/remark-replace-words-plugin

#Remark #React #Docusaurus #OpenSource #DevTools
Plugin Remark Replace Words | DOCUX
Automatically replace words with text, icons, or MDX components (Tooltip, buttons…) in your pages/blog/docs with a configurable Remark plugin.
docuxlab.com
October 7, 2025 at 6:49 AM
docuxlab.com
🚀 Boost your Docusaurus site UX with a “Scroll to Top” button!
Easy to add, lightweight, and fully customizable 💡
👉 Full guide: docuxlab.com/blog/docusaurus-scroll-to-top-button/

#Docusaurus #WebDev #UX #JavaScript #DocuxLab #Frontend #webdesign #css #reactjs
ScrollToTopButton Component | DOCUX
Simple React component adding a floating 'back to top' button with delayed appearance (after scrolling 300px), click animation and smooth scroll behavior in Docusaurus.
docuxlab.com
October 6, 2025 at 5:48 AM
docuxlab.com
💡 Did you know your Docusaurus docs can include live-editable React code?

With React Live, readers can test & tweak examples right on the page — no external sandbox needed ⚡👩‍💻

👉 Full guide: docuxlab.com/blog/docusau...

#Docusaurus #React #Docs #livecoding #reactJS #opensource #webtools #markdown
Tutorial Docusaurus React Live | DOCUX
Practical guide to add interactive react-live code playgrounds in Docusaurus: theme installation, configuration, ReactLiveScope swizzle, and maintainable example patterns.
docuxlab.com
October 2, 2025 at 5:42 AM
docuxlab.com
Don't miss out on this!

🚀 Boost your Docusaurus site! DocuxLab components & plugin:
🧑‍💻 Avatar: docuxlab.com/blog/avatarc...
🧱 Columns: docuxlab.com/blog/columns...
🖼️ ImageOnClick: docuxlab.com/blog/imageon...

#Docusaurus #WebDev #webdesign #jamstack #reactJS #createyourblog #plugin #docs #masonry
Reusable Avatar Component | DOCUX
A complete tutorial to design and customize an Avatar component in Docusaurus, based on Infima. Includes JS/TS examples, props, advanced integration and best practices.
docuxlab.com
September 24, 2025 at 5:39 AM
docuxlab.com
🚀 New on DocuxLab: a Tooltip component for Docusaurus!
✨ Auto flip + arrow alignment
♿ Accessible (ARIA, keyboard)
🎨 Themes: info, success, warning, error

👉 Full article: docuxlab.com/blog/Tooltip...

#React #Docusaurus #WebDev #Accessibility #tooltip #webaccessibility #webtools
Tooltip tools | DOCUX
A comprehensive guide to creating a dynamic and accessible Tooltip component in React and Docusaurus, featuring smart positioning and custom styling.
docuxlab.com
September 21, 2025 at 10:58 AM
docuxlab.com
🔥 New on my blog: a Skill component with animated progress bars or circles for #Docusaurus!
Show off your skills with sleek animated bars or circle ✨

👉 docuxlab.com/blog/skill-c...

#DevUI #OpenSource #webdesign #jamstack #css #blog
#StaticSiteGenerator
#FrontEndDev
#ReactJS
#MDX
#DevCommunity
Add Skill Bars & Circles | DOCUX
A comprehensive React component for displaying skills as animated progress bars or circles with scroll animations, gradients, and theme support in Docusaurus.
docuxlab.com
September 16, 2025 at 6:54 AM
docuxlab.com
New on my blog

A Simple Analytics plugin for #Docusaurus!
Add privacy-friendly stats to your docs site in seconds 🚀 with @simpleanalytics.bsky.social

This case allowed me to test plugin creation, but we could have done it differently.

👉 docuxlab.com/blog/simple-...

#DevUI #analytics #docs #seo
Simple Analytics Plugin | DOCUX
A complete tutorial to integrate Simple Analytics into your Docusaurus site with a custom local plugin.
docuxlab.com
September 15, 2025 at 4:14 PM
docuxlab.com
💡 New on my blog:

a new LogoIcon component for #Docusaurus with iconify !!

Add logos in 1 line inside your #React / #MDX pages 🚀

👉 docuxlab.com/blog/logoico...

#DevUI #OpenSource @iconify.bsky.social #iconify #webdesign #docuxlab #docusaurus #reactjs
LogoIcon Component | DOCUX
A React component tutorial to easily display Iconify logos in Docusaurus MDX pages without individual imports.
docuxlab.com
September 15, 2025 at 6:49 AM
docuxlab.com
Thank you @avonture.be for using my #docusaurus component and for publishing an article about it. And what an article! The 200th on your site! Thank you for this honor !

#meta #reactJS #webdesign #docuxlab
avonture.be cavo789 🐳 @avonture.be · Sep 12
Adding a #ScrollToTopButton feature on my #Docusaurus website.

Now, a nice meerkat will be displayed during the vertical scroll on long articles. Just click on it and you'll jump back to the top with a smooth animation.

React component created by @docuxlab.com
Providing a go to the top button in Docusaurus posts | Christophe Avonture
Providing a go to the top button in Docusaurus posts
www.avonture.be
September 12, 2025 at 5:27 PM
Reposted by DocuxLab
avonture.be
My new #Docusaurus component (and plugin) to be able to create a list of articles as part of a series.

Also, create a /series and /series/:slug pages to promote them.

Creating series will allow authors to cut off very big articles in smaller ones, increase SEO and it's more professional, no? ;)
Organize Your Docusaurus Content with a Custom Series Component | Christophe Avonture
Organize Your Docusaurus Content with a Custom Series Component
www.avonture.be
September 10, 2025 at 8:49 AM
docuxlab.com
🦖 New blog post on #DocuxLab!
I’ll show you how to build a reusable Card component in #Docusaurus with #Infima.

• a customizable component
• modular structure (Header, Body, Footer, Image)
• MDX integration

🔗 docuxlab.com/blog/card-co...

#WebDev #Tutorial #UI #Design #OpenSource #webdesign
Reusable Card Component | DOCUX
A complete tutorial to create customizable card components in Docusaurus using the Infima CSS framework. Includes React implementation, multiple card variants, and responsive design.
docuxlab.com
September 8, 2025 at 5:45 AM
docuxlab.com
Discover my ImageOnClick component ✨

It lets you display an image in full size with a beautiful lightbox effect when clicked: smooth animations, blurred background, and a sleek close button.

👉 docuxlab.com/blog/imageon...

#Docusaurus #React #Lightbox #MDX #Component #DevTools #Documentation #UI
Reusable ImageOnClick Component | DOCUX
A complete tutorial to create an interactive image lightbox component in Docusaurus. Includes React implementation, modern CSS animations, and responsive design.
docuxlab.com
September 5, 2025 at 6:18 AM
docuxlab.com
✨ New on DocuxLab (Sep 3, 2025)

Learn how to build reusable columns components with Docusaurus + Infima.

👉 JS/TS examples, MDX integration, and visual demos included.

🔗 docuxlab.com/blog/columns...

#Docusaurus #Infima #React #Frontend #WebDev #DocuxLab
Create a Reusable Columns Components | DOCUX
A complete tutorial to design and customize Columns components in Docusaurus, based on Infima grid system. Includes JS/TS examples, props, advanced layouts and best practices.
docuxlab.com
September 3, 2025 at 7:57 PM
docuxlab.com
🚀 First blog post !
Learn how to build a fully customizable Avatar component in #Docusaurus using #Infima.
Perfect for improving your docs UI/UX ✨

👉 Read here: docuxlab.com/blog/avatarc...

#WebDev #DocsAsCode #OpenSource #Frontend #React
Create a Reusable Avatar Component | DOCUX
A complete tutorial to design and customize an Avatar component in Docusaurus, based on Infima. Includes JS/TS examples, props, advanced integration and best practices.
docuxlab.com
August 31, 2025 at 9:15 AM
Reposted by DocuxLab
avonture.be
I've also created a page where all my public repositories can be retrieved with searching and filtering options
My public repositories - Christophe Avonture | Christophe Avonture
www.avonture.be
August 21, 2025 at 2:41 PM