studio Open-Source Community Project: Remove Vuetify from Studio in favor of Kolibri Design System

🙂 Looking for an issue? Welcome! This project offers many issues for open-source community.

After you have familiarized yourself with the project, find an issue from the task list at the bottom and then comment in the chosen issue to get assigned.

Please read Contributing to our open code base. Pay special attention to Using generative AI.

Summary

Studio's frontend is primarily built with V... components from Vuetify 1.5 framework, alongside K... components from our own Kolibri Design System (KDS).

This project aims to replace Vuetify components with:

KDS components
New custom Studio components

and then completely remove the Vuetify dependency.

KDS components already provide strong support for accessibility (a11y) and internationalization (i18n). For all new Studio components, it’s important to prioritize these areas. While mobile experience isn’t a priority, it should be reasonably functional.

👥 Community contributions

This project is designed for open-source community.

What we offer

Meaningful project: Your contributions will support our ecosystem of open digital products and tools centered around an offline-first learning platform. You'll especially help curriculum experts who prepare content for diverse learning needs in Kolibri Learning Platform.
Hands-on learning experience: Implement common frontend and a11y patterns with support from existing examples in our other codebase Kolibri, which already uses KDS. Receive pull request reviews from experienced engineers.
Well-crafted issues: Rich variety of carefully scoped tasks with clear steps, acceptance criteria, and additional guidance. Each issue has complexity estimation to help you choose exactly the right issue.
Well-documented codebase: There are plenty of materials available to make contributing easier.
Growth opportunities: After some time of successful collaboration, you are welcome to join Kolibri Contributors, a community of active volunteers who regularly collaborate with Learning Equality, receive peer support, and are often awarded public recognition for their invaluable contributions. In case of interest, you may also take more responsibility in this project and plan new issues or review pull requests.

What we expect

Follow Contributing to our open code base. Pay special attention to Using generative AI.
Before opening a pull request, double-check you have followed issue guidance and met acceptance criteria.
Independent and proactive approach. Double-check all information and references available in issues and documentation.
Flag any unexpected challenges you encounter.

Sounds interesting? Read the rest of the project details and find your first issue below.

Guidance

Work from the unstable branch
Set up your local Studio development server. Note that Windows is not recommended, but many of our contributors were able to use Windows Subsystem for Linux (WSL) and there is WSL Studio development setup guidance available.
Studio uses Vue 2.7 and Vuetify 1.5
KDS is already installed in Studio - simply use the current version
To work efficiently, install and use the legacy Vue Devtools (v6)
Get familiar with Kolibri Design System. Depending on the issue you're working on, check the relevant sections under Foundation, Patterns, and Components.
Kolibri Studio User Guide explains all important user workflows
While Studio doesn't depend on Kolibri, it's highly recommended to have it running locally. Its interface and codebase are great references, as it uses KDS and includes many reusable patterns.
When creating new custom Studio components, keep a11y and i18n in mind:
- ARIA Authoring Practices Guide
- Internationalization
- RTL language support
  - Preview with pnpm run devserver since :hot doesn't render RTL properly
- Bidirectionality
Even though KDS already offers strong support for a11y and i18n, always review the refactored area as a whole.
For new unit tests, do not use obsolete @vue/test-utils approach. Instead, use Vue Testing Library.

Why remove Vuetify?

To benefit from KDS a11y, i18n, and other features tailored for our ecosystem
Create a consistent user interface and experience
Eliminate conflicts between the two libraries
Simplify maintenance and developer experience
Reduce framework learning overhead
Move away from an outdated Vuetify version

Strategy

Concrete steps will be specified in issues. Decisions are guided by:

The main focus is complete removal of Vuetify without major regressions. In some cases, the user interface and experience may not match exactly - this will be noted in "Expected UI/UX Changes" issue section.
Issues are very strictly scoped to affect only a specific area, ensuring smooth development and QA.
- For example, shared components with Vuetify dependencies won’t be refactored but gradually replaced by new components. This continues until the original component is no longer referenced and can be removed entirely. This approach reduces the need to review and test many parts of Studio.
Although the goal is to migrate away from Vuetify, if needed, we can copy a Vuetify component and keep it. However, it must be refactored to work without the Vuetify library and have no unused logic.

Project issues

Settings

Low complexity

[x] https://github.com/learningequality/kolibri-design-system/issues/1030
[x] https://github.com/learningequality/studio/issues/5062
[x] https://github.com/learningequality/studio/issues/5063
[x] https://github.com/learningequality/studio/issues/5080
[x] https://github.com/learningequality/studio/issues/5081
[x] https://github.com/learningequality/studio/issues/5082
[x] https://github.com/learningequality/studio/issues/5092
[x] https://github.com/learningequality/studio/issues/5094
[x] https://github.com/learningequality/studio/issues/5095
[x] https://github.com/learningequality/kolibri-design-system/issues/1054

Medium complexity

[x] https://github.com/learningequality/kolibri-design-system/issues/1113
[x] https://github.com/learningequality/studio/issues/5064
[x] https://github.com/learningequality/studio/issues/5061
[x] https://github.com/learningequality/studio/issues/5123
[x] https://github.com/learningequality/kolibri-design-system/issues/1055 + https://github.com/learningequality/studio/issues/5127
[x] https://github.com/learningequality/studio/issues/5132

Channels

Low complexity

[x] https://github.com/learningequality/studio/issues/5218
[x] https://github.com/learningequality/studio/issues/5219
[x] https://github.com/learningequality/studio/issues/5234
[x] https://github.com/learningequality/studio/issues/5235
[x] https://github.com/learningequality/studio/issues/5243
[x] https://github.com/learningequality/studio/issues/5244
[x] https://github.com/learningequality/studio/issues/5295
[x] https://github.com/learningequality/studio/issues/5296
[x] https://github.com/learningequality/studio/issues/5297
[x] https://github.com/learningequality/studio/issues/5298
[x] https://github.com/learningequality/studio/issues/5299
[x] https://github.com/learningequality/studio/issues/5471
[x] https://github.com/learningequality/studio/issues/5484
[x] https://github.com/learningequality/studio/issues/5485
[ ] https://github.com/learningequality/studio/issues/5527

Medium complexity

[x] https://github.com/learningequality/studio/issues/5217
[x] https://github.com/learningequality/studio/issues/5474
[ ] https://github.com/learningequality/studio/issues/5502
[ ] https://github.com/learningequality/studio/issues/5529
[ ] https://github.com/learningequality/studio/issues/5530

High complexity

[ ] https://github.com/learningequality/studio/issues/5227
[ ] https://github.com/learningequality/studio/issues/5369
[ ] https://github.com/learningequality/studio/issues/5524
[ ] https://github.com/learningequality/studio/issues/5525
[ ] https://github.com/learningequality/studio/issues/5526
[ ] https://github.com/learningequality/studio/issues/5528

Channel editor

Low complexity

[x] https://github.com/learningequality/studio/issues/5355
[x] https://github.com/learningequality/studio/issues/5375
[x] https://github.com/learningequality/studio/issues/5376
[x] https://github.com/learningequality/studio/issues/5377
[x] https://github.com/learningequality/studio/issues/5378
[x] https://github.com/learningequality/studio/issues/5379
[x] https://github.com/learningequality/studio/issues/5420
[x] https://github.com/learningequality/studio/issues/5421
[x] https://github.com/learningequality/studio/issues/5422
[x] https://github.com/learningequality/studio/issues/5423
[x] https://github.com/learningequality/studio/issues/5442
[x] https://github.com/learningequality/studio/issues/5443
[x] https://github.com/learningequality/studio/issues/5444
[ ] https://github.com/learningequality/studio/issues/5470
[x] https://github.com/learningequality/studio/issues/5472
[x] https://github.com/learningequality/studio/issues/5473

Accounts

Low complexity

[x] https://github.com/learningequality/studio/issues/5352
[x] https://github.com/learningequality/studio/issues/5353
[ ] https://github.com/learningequality/studio/issues/5534

Administration

Low complexity

[x] https://github.com/learningequality/studio/issues/5354
[x] https://github.com/learningequality/studio/issues/5410
[x] https://github.com/learningequality/studio/issues/5411
[ ] https://github.com/learningequality/studio/issues/5441

Medium complexity

[x] https://github.com/learningequality/studio/issues/5425

Shared / common

Low complexity

[x] https://github.com/learningequality/kolibri-design-system/issues/1085
[x] https://github.com/learningequality/kolibri-design-system/issues/1163
[x] https://github.com/learningequality/kolibri-design-system/issues/1166

Medium complexity

[x] https://github.com/learningequality/kolibri-design-system/issues/1135
[ ] https://github.com/learningequality/kolibri-design-system/issues/1162

High complexity

[x] https://github.com/learningequality/studio/issues/5133
[ ] https://github.com/learningequality/studio/issues/5429
[ ] https://github.com/learningequality/studio/issues/5445
[ ] https://github.com/learningequality/kolibri-design-system/issues/1157

May 19 '25 10:05 MisRob

Hello @MisRob, I recently came across this project and would love to contribute. I’ve already set up the development environment locally. According to the guidelines, contributors should only create PRs for issues assigned to them, but most of the issues appear to be already assigned. Could you please let me know if there are any unassigned or inactive issues I can take up? I’d be happy to start working on one.

Thank you.

Nov 20 '25 06:11 curiouscoder-cmd

Hi! 👋

Thanks so much for your interest! This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

We really appreciate your willingness to help—you're welcome to find a more suitable issue, and let us know if you have any questions. 😊

Nov 20 '25 06:11 learning-equality-bot[bot]

Hi @curiouscoder-cmd, thanks for reaching out. Yes, currently all issues are already taken. I plan to open new 'help wanted' issues in a week or two - keep an eye on the list.

Nov 20 '25 07:11 MisRob

Hi @MisRob,

I’m currently familiarizing myself with the Studio codebase and the Kolibri Design System (KDS) to gain a deeper understanding of the project. I’ll be ready to contribute as soon as new 'help wanted' issues are available.

Thank you for your guidance and support!😇

Dec 02 '25 11:12 PixelCraftLab