Adding interactive Code Blocks to Manim Documentation — Manim Binder

Published on November 20, 2023Adding interactive Code Blocks to Manim Documentation — Manim Binder image

You can view the project live on the Manim Documentation.

Below is a demo video of the project:

Project’s Background

Manim is a powerful animation engine for explanatory math videos. Currently, one of the biggest challenges for newcomers is the learning curve. The documentation lacks interactivity (the ability to run code directly from the documentation), which makes it difficult for users to experiment with the code and understand the underlying concepts.

The goal is clear: Manim users should be able to try out the examples directly from the documentation.

Project Features

The key feature of this project is a button to make the example interactive in the documentation. Clicking this button opens a code editor below the example code, allowing users to experiment with the code. There also exists a run button below the editor. With a simple click, users can execute their code, visualize the output, and iterate on their animations effortlessly.

This feature significantly improves the learning experience, allowing users to interactively explore Manim without leaving the documentation. It bridges the gap between theoretical understanding and practical application, making the onboarding process smoother for newcomers.

Project Details

GitHub Repository: Manim Binder

Pull Request: https://github.com/ManimCommunity/manim/pull/3427

The project’s core functionality is implemented in TypeScript and compiled into a minified JavaScript file using Webpack. This file is then included in the Manim repository, ensuring seamless integration. The approach not only maintains the cleanliness of the Manim codebase but also allows for efficient updates and maintenance.

Being an open-source project, Manim Binder is licensed under the MIT License, encouraging collaboration and use in other projects. This flexibility empowers the broader community to adopt and adapt the interactive documentation feature for their needs.

The inspiration for this project stems from the Juniper project and the documentation of spaCy.

The project leverages the Binder API to enable this interactivity, where users run Manim code in a Jupyter kernel. It not only simplifies the execution process but also ensures consistency across different user environments.

Conclusion

This project is to make Manim easy to use without the friction for the users to install Manim. The interactive code blocks embedded in the documentation empower users to experiment, learn, and create without problem.