https://github.com/manim-notebook/manim-notebook

💫 ManimGL with interactive previewing in VSCode. v1.0.0 is now available ✨
https://github.com/manim-notebook/manim-notebook

3b1b animation education manim math vscode

Last synced: about 1 month ago
JSON representation

💫 ManimGL with interactive previewing in VSCode. v1.0.0 is now available ✨

• Host: GitHub
• URL: https://github.com/manim-notebook/manim-notebook
• Owner: Manim-Notebook
• License: mit
• Created: 2024-10-14T16:55:12.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2025-02-23T10:37:34.000Z (2 months ago)
• Last Synced: 2025-03-31T17:54:20.945Z (about 1 month ago)
• Topics: 3b1b, animation, education, manim, math, vscode
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=Manim-Notebook.manim-notebook
• Size: 1.12 MB
• Stars: 24
• Watchers: 1
• Forks: 3
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        


  

    

  


  


    
Manim Notebook

    


      VSCode extension to interactively preview your Manim animations

    

  


  


    VSCode Marketplace

    |

    GitHub

  






> [!warning]

> This extension is for [3b1b's Manim library](https://github.com/3b1b/manim) and *NOT* the [Manim Community Edition (Manim CE)](https://www.manim.community/).

[**Manim Notebook Quick Showcase Video**](https://github.com/user-attachments/assets/24eab702-e351-4cc9-8f7b-7b94c54b4072)

## 🎈 What is this?

Manim Notebook is a VSCode extension tailored to your needs when writing Python code to animate mathematical concepts with 3Blue1Brown's [Manim library](https://github.com/3b1b/manim). It's *NOT* a Jupyter Notebook; instead it enriches your existing Python files with interactive Manim cells that let you live-preview parts of the code and instantly see the animations.

Originally, the motivation for this extension was Grant Sanderson's video [How I animate 3Blue1Brown](https://youtu.be/rbu7Zu5X1zI?feature=shared) where he shows his Manim workflow in Sublime Text. This extension brings a similar workflow to VSCode but even goes further and provides a rich VSCode integration.

## 💻 Usage

Our VSCode **walkthrough** will guide you through the first steps and provide a sample file. The walkthrough should open automatically upon installation of [the Manim Notebook extension](https://marketplace.visualstudio.com/items?itemName=Manim-Notebook.manim-notebook). If not, you can invoke it manually: open the command palette (`Ctrl/Cmd + Shift + P`) and search for `Manim Notebook: Open Walkthrough`.

The main concept is that of a Manim Cell, which is just a regular Python comment, but one that starts with `##` instead of `#`.

![manim-cell-preview](https://github.com/user-attachments/assets/577a93cb-0d05-4fa7-b1a9-52c1ccf2e5dc)

> [!tip]

> For customization options, troubleshooting tips and a lot more, check out the [Wiki](https://github.com/Manim-Notebook/manim-notebook/wiki/).

---

## 🚀 Features

- **Manim Cells**. Split your code into Manim Cells that start with `##`. You will be presented with a CodeLens to preview the animation (and you can even _reload_ your changed Python files such that you don't have to restart the preview).

- **Preview any code**. Simple as that, select any code and preview it. No manual copy-pasting needed.

- **With or without Terminal**. The extension parses the `manimgl` terminal output to provide rich VSCode integrations and makes possible an almost terminal-free workflow.

  - Shows the progress of the live Manim preview as VSCode progress bar.

  - Takes a user-defined delay into account, e.g. to wait for custom shell startup scripts (like `venv` activation).

  - State management: keeps track of the ManimGL state to react accordingly in different situations, e.g. prevent from running multiple statements at the same time.

- **Video export**. Export your animations to a video file. A small wizard will guide you through the most important settings.

- **And more...** Find all commands in the command palette (`Ctrl/Cmd + Shift + P`) by searching for `> Manim Notebook`. E.g. another command lets you `clear()` the window. Yet with another one you can start the scene at your cursor.



In the long run, we aim to even provide a Debugger for Manim code such that you can step through your animations and run until breakpoints. This would be a huge step forward in the Manim development workflow. For now, the Manim Cells that we provide are a start towards a more interactive experience.