DocuxLab

Hi @eliostruyf.com thanks for your work

I’m currently learning demos.js for a conference where I’ll be presenting Docusaurus and Frontmatter CMS. I haven’t finished reading the documentation yet, but I was wondering if it’s possible to make an export to read directly from a repository?

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.

🦖 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

Thank you, Christophe, for using my component — it really makes me happy.

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.

🚀 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

Thank you so munch @avonture.be it’s very great idea !!!

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.

💡 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

Amazing !!! I love that @avonture.be

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.

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

And Custom thème !!!

Tooltip tools | DOCUX A comprehensive guide to creating a dynamic and accessible Tooltip component in React and Docusaurus, featuring smart positioning and custom styling.

🚀 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

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.

🔥 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

Simple Analytics Plugin | DOCUX A complete tutorial to integrate Simple Analytics into your Docusaurus site with a custom local plugin.

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

LogoIcon Component | DOCUX A React component tutorial to easily display Iconify logos in Docusaurus MDX pages without individual imports.

💡 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

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

I understand — to be honest, it was a clumsy way to reach out and highlight the excellent work done by my friend Christophe avonture www.avonture.be, and just a tiny bit of mine 😅🥹 docuxlab.com
Have a Nice day
Belle fin de journée ;)

You can talk about the latest great contributions from the Docusaurus community this week 😜😜

Appreciate it Christophe, this pushes our #Docusaurus to the next level! Thank you so munch is amazing.

Organize Your Docusaurus Content with a Custom Series Component | Christophe Avonture Organize Your Docusaurus Content with a Custom Series Component

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? ;)

Yes, thank you for your feedback. There are other components created from the Infima framework on my blog.

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.

🦖 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 ImageOnClick Component | DOCUX A complete tutorial to create an interactive image lightbox component in Docusaurus. Includes React implementation, modern CSS animations, and responsive design.

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

Ba il est essayiste il a essayé 🤣

from the front matter

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.

✨ 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

So cool ;) good idea !

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.

🚀 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

a man is holding a microphone and making a funny face while testing 1 , 2 , 3 . ALT: a man is holding a microphone and making a funny face while testing 1 , 2 , 3 .

Great, I'm keeping this article aside to test that.

Very interesting article Christophe🧠

Thanks Christophe for this great tip !

My public repositories - Christophe Avonture | Christophe Avonture

I've also created a page where all my public repositories can be retrieved with searching and filtering options