I’m looking to fully customize the frontend of Open edX and would appreciate some guidance. After doing some research, I found there are a few approaches to frontend customization:
Plugin Slots
Micro-Frontend (MFE)
Theming
I have specific questions about each of these:
1. Plugin Slots:
Is it possible to completely change the layout of a page using plugin slots?
2. MFE:
I’ve successfully added a custom MFE, which is a React app with new components. However, I’m unsure how to integrate it with the backend. I’d like to retain the functionality of existing components while also introducing new ones. What’s the best way to integrate the old components so they work as before alongside my custom ones?
Hey @Sasha ,
Can you share exactly what kind of changes you are looking for in the frontend, so i can guide you better about them, to answer your queries :
Plugin Slots
Plugin slots are best thought of as extension points where you can inject additional UI or logic. They’re great for adding features or small UI changes without forking core code.But you can do very limited frontend changes through them
However, they don’t allow you to completely restructure or replace an entire page layout. If your goal is to fundamentally change how a page looks or behaves, plugin slots will feel too limited, for instance header and footer plugin slots would provide you ability to add more options/links over them, you can t compelting redesgin header and footer with them. In that case, theming or forking the relevant MFE may be more suitable.
2. Micro-Frontends (MFEs)
You’re right — MFEs are React apps that handle specific domains (Learning MFE, Account MFE, etc.). If you’ve already built a custom MFE, that’s the most flexible approach for larger changes.
Integration with the backend:
MFEs talk to the backend primarily through the REST APIs exposed by edx-platform (Django LMS/CMS). For example, the Learning MFE consumes courseware APIs, while the Account MFE uses user profile APIs. Your custom MFE should do the same — call the relevant APIs for data and actions instead of directly coupling to backend code.
Reusing existing components:
If you want to retain existing functionality but add new UI pieces, you have two options:
Extend an existing MFE by forking it and modifying its React components. This way, you inherit all the existing integrations and only swap in your changes.
Build a standalone MFE and mount it alongside the standard ones, but still point it at the same backend APIs.
In both cases, the key is to rely on the existing APIs so that you don’t break backend compatibility.So i think forking the existing mfe is better option in that case
3. Theming
If your customization is mainly visual (CSS, branding, templates, assets), theming is often simpler and upgrade-friendly compared to rewriting MFEs. For deep functional changes, though, MFEs are the way to go.
Brand-edx: This repo is typically used for styling changes in MFEs (CSS, Sass, colors, logos, etc.), so it’s great for aligning the MFEs with your organization’s brand.
Indigo (or custom theme repos): These can be used for template and page-level changes in the LMS/CMS Django apps, where you need to override Django templates or apply custom layouts.
Let me know if you need any further help regarding these.
Hey @Abdul_Muqadim , thank you so much for detailed response . Some more thoughts have arrived .
If I use MFE approach , as you said correctly I have to consume REST APIs , so is there a good way to figure out which REST API should I consume , let’s say I have to consume API to retrieve course list , should I have to refer to the openedx frontend code to figure it out or any easy way?
If I use theme , what is the correct way to change the theme ? If I have to just modify all buttons in the app, what is the way to do that? Do I have to clone the existing html file and change in it and make a plugin to set this theme?
@Sasha
As @arbrandes mentioned, you can refer to Indigo to see how we are handling theming/branding in Open edX via Tutor.
You can do theme changes directly in Indigo itself, but note that this only affects template pages, For MFEs branding and similar changes If you want to customize buttons or other global UI elements across MFEs, you’ll need to customize the brand-edx package, since Indigo also maintains its own brand-edx app to apply branding in MFEs such as buttons.
However, they don’t allow you to completely restructure or replace an entire page layout. If your goal is to fundamentally change how a page looks or behaves, plugin slots will feel too limited, for instance header and footer plugin slots would provide you ability to add more options/links over them, you can t compelting redesgin header and footer with them. In that case, theming or forking the relevant MFE may be more suitable.