Login Register
Back to Help Center

Introduction to Plugins

Introduction to what plugins are and how to implement them in Monkeycode

Plugins are interactive visualizers or tools embedded directly in a problem statement. They run inside a sandboxed <iframe> and can receive the current sample input, allowing you to build custom animations, diagrams, or interactive demos that help contestants understand the problem.

What is a Plugin?

A plugin is a self-contained HTML application that you include in your problem package. When a contestant views the problem, the plugin is rendered inline within the problem statement — giving you full control over how input data is visualized.

Common use cases include:

  • Graph visualizers — render nodes and edges from a sample input
  • Grid animators — show a 2D grid or maze described in the input
  • Step-by-step demos — walk through an algorithm with the sample data
  • Custom diagrams — draw any domain-specific illustration tied to the input

How Plugins Work

You place a plugin in your problem package and reference it with a \plugin{name} macro in your LaTeX problem statement. The platform renders it as an iframe at that position in the statement.

When a contestant selects a sample input, it is automatically passed to the plugin so it can visualize that specific input. The plugin always receives the currently selected input — no extra setup needed.

The "Run" Button

When a problem has at least one plugin, a Run button (▶) appears on each sample input panel. Clicking it scrolls the page to the plugin and passes the selected sample's input to it.

The same Run button also appears on the custom test case panel, so contestants can visualize their own inputs with the plugin.

Plugin Documentation Overview

PageWhat it covers
Add a Plugin to a ProblemZIP structure, \plugin{} macro, multiple plugins
Plugin File Structure & PathsFolder layout, asset paths, multi-file plugins
Reading Input in a PluginmonkeyCodeInput.js API, manual input reading
Plugin LimitationsSandbox rules, size limits, name constraints
Using Third-Party LibrariesBundling external JS/CSS, why CDN links fail