learningequality / learningequality/studio

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

Open
#5,060 12 comments 0 reactions 1 assignee View on GitHub

@marcellamaki is already working on this.

Since Jun 2, 2026.

DEV: frontend Feature
Dominant language
Python
Stars
191
Forks
307
Avg merge
5d 6h
Merged PRs (30d)
10

Description

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

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

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

Medium complexity

Channels

Low complexity

Medium complexity

High complexity

Channel editor

Low complexity

Accounts

Low complexity

Medium complexity

Administration

Low complexity

Medium complexity

Shared / common

Low complexity

Medium complexity

High complexity

VTL migration sub-epic

https://github.com/learningequality/studio/issues/5789

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.