Skip to content

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

New issue
New issue
Open
60 of 77 issues completed
Open
Open-Source Community Project: Remove Vuetify from Studio in favor of Kolibri Design System#5060
60 of 77 issues completed
Labels
DEV: frontendEpic
@MisRob

Description

@MisRob
MisRob
opened on May 19, 2025

🙂 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

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

Administration

Low complexity

Medium complexity

Shared / common

Low complexity

Medium complexity

High complexity

Sub-issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    DEV: frontendEpic

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions