Manim Sideview
An extension for Visual Studio Code that provides a live preview and various other features in working with manim.
Index
- Rendering
- Moject Gallery
- Context Variables
- Extension Settings
- Status Bar Item
- Credits
Rendering
Before you can start a live preview you'll have to setup a few configuration settings for rendering! As well as the media path. This is because the extension combines the sideview and the file execution into a single workflow, read further ~
The final Product!

Upon opening any Python files, you'll see an icon pop up in the menu bar that looks like this
. The file will be executed and rendered using manim under appropriate configurations when clicked. You can also use the hotkey which is set to by default ctrl + '
r
press, release and then press r, this is not simultaneous.
Whenever a file is run successfully for the first time, the extension creates a dedicated job tied to the source file, you can look at this to make sure - as long as this job is active, all your settings will persist. Note that run on save does not get activated on files that don't have jobs.
Configuration
It can be done in two ways.
The first option is to provide in a runtime/in time (can be used interchangeably) configuration - where we'll ask you a few questions to tweak the settings on run time
HOTKEY - ctrl + '
s
press, release and then press s, this is not simultaneous
For the second option you'll have to configure a manim.cfg
with a few mandatory flags. Importantly, you must have the config file in the working directory.
Preview
To serve a live preview, the extension needs a relative path to the media file (it can be absolute for an intime configuration).
Those using a manim.cfg
file can skip this part as we derive programmatically where the media file will be with the given flags.
For those using the runtime configurations, you'll have to provide the media path in the same dialog. When doing so, you can use a few context variables with as privillege as you can when changing the settings as provided here.
- figure taken from the in time configuration menu
On Save
Configuring your manim projects to execute on save is very easy, just enable the manim-sideview.runOnSave
settings inside vscode File -> Preferences -> Settings
menu. This is disabled by default.
Mobject Gallery
A mobject gallery for inserting mobjects

Open the gallery by the vscode command palette Show Mobject Gallery For manim
and click on the shape that you want to use.
It will appear in your code editor (either in a python or jupyter file).
Context Variables
Sometimes we don't want to set an absolute path to the media file. Context Variables can only be used in:
- Configuration of
manim-sideview.videoFilePath
- In time configurations
Video Directory
option
The case of variable names matter.
Variables
Variable |
Description |
{module_name} |
The name of the file being run. |
{media_dir} |
The directory of the media files. |
{scene_name} |
The name of the scene being run. |
Using unset variables will result in default values being used.
Extension Settings
Contemporary settings
After starting a job, you can change the scene name between executions. This can be done by using the command manim-sideview.setRenderingScene
through pressing F1
and searching it up - or use the hotkey by default set to ctrl + '
c
. This prompt looks exactly like the one shown whenever you start an execution process.
When running a job using in time configurations you can change it anytime by resetting it. You can reset it by calling the command manim-sideview.setInTimeConfiguration
through pressing F1
and searching it up. This will bring up a webview if you have an active job that allows resetting.
Application or default settings
Identifier |
Description |
Default |
manim-sideview.defaultManimPath |
The absolute path to the manim executable. |
manim |
manim-sideview.commandLineArgs |
The command line arguments in rendering manim. Refer to https://docs.manim.community/en/stable/tutorials/configuration.html?highlight=configuration#a-list-of-all-cli-flags for existing arugments. |
-ql |
manim-sideview.videoDirectory |
The video output directory. We can use context variables here to place them under the media directory. This does not include the `.mp4` file itself. |
{media_dir}/videos/{module_name}/480p15 |
manim-sideview.mediaDirectory |
The root folder for all media output. |
media |
manim-sideview.runOnSave |
Whether to run on save for a file that has been run before. |
false |
manim-sideview.focusOutputOnRun |
Whether to focus on the output log when running. |
true |
manim-sideview.previewShowProgressOnIdle |
Whether to display the video progress bar in the video player when the job is idle. |
true |
manim-sideview.previewProgressColor |
The color of the progress bar. You can use https://code.visualstudio.com/api/references/theme-color colors here. |
textLink.foreground |
manim-sideview.previewAutoPlay |
Whether to auto-play the preview right after rendering. |
True |
manim-sideview.previewLooping |
Whether to loop the preview at the end. |
True |
manim-sideview.outputToTerminal |
Whether to relay output to a terminal. If False, an output channel rather than a terminal is used to display text. |
False |
## Utilities
You can find a status bar item inside the status bar (the one at the very bottom) an icon that looks like:
Note that this is a visual reminder that the file in current focus has an active job. Relevantly, this icon will change colors to either green or red depending on the results of an execution at times.
Known Issues
- Buttons from Picture in Picture unresponsive linked issue.
- Seeking video duration linked issue.
Changelog
0.0.13
- Optional Terminal Output
- Jupyter Notebook Fix
- Webview URI error fix
0.0.12
- Added configurations to disable or enable auto-play
- Added configurations to disable or enable looping
0.0.11
- Patched the local incorrect version filepath for mobject gallery
0.0.10
- Run-time configuration settings can be set for jobless scene where it'll create a new job for the user
- Changed default quality mappings with responsiveness to Manim 0.13.1
- Smarter manim.cfg file analysis and in determining context
- It should be noted that default rendering will still use
-ql
for backwards compatibility
- Added manim version re-synchronization command for developer independent compatibility
- Added version signifier to the mobject gallery
0.0.9
- Scene scanner now looks for all class definitions with subclasses with name Scene in them
- Better responsiveness for refocusing selected documents in mobject gallery
0.0.8
- Using axios now to synchronize assets for better performance
0.0.7
- Added force redownload when assets are damaged
0.0.6
- Added video player configurations
previewProgressColor
, previewShowProgressOnIdle
- Added
Check For Updates
button in mobject gallery and a sync lock with the repo
0.0.5
- Fixed server links
- Added
manim-sideview.showMobjectGallery
- Added hide progress button
- Added debrief for the video
0.0.4
- Minor bug fix for Unix machines with trimmed leading slashes
0.0.3
- Added
manim-sideview.stop
for stopping any running processes
- Paths are now normalized to work with both forward and backward slashes
- video directories are now static and will not depend on the verdict of manim
- Setting a valid path no longer replies with "Success" because this can be confusing when there is an exception thrown later down the line that has has nothing to do with the scene name
manim.cfg
files are now derived from the working path - which is the correct case
- Added support server link
0.0.1 - 0.0.2
Initial release of Manim Sideview.
Credits
Icons made by Smashicons and Freepik from www.flaticon.com, mobject gallery by kolibril13 and ofcourse the logo by the manim/community project themselves!
Made with <3 by Ricky,