slidev-monaco-editor

Integrates Monaco Editor into Slidev for interactive live coding blocks with TypeScript or JavaScript.

34|1|Updated Jan 25, 2026

Search Tags:#typescript #javascript #interactive #slidev #code-blocks #monaco-editor #live-coding

Ready to run

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-monaco-editor

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: slidev-monaco-editor
Source: https://github.com/yoanbernabeu/slidev-skills/tree/main/skills/code/slidev-monaco-editor
Command: npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-monaco-editor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables integrating Monaco Editor into Slidev presentations, turning static slides into interactive code demos with live editing and execution capabilities.

Core Features & Use Cases

Live coding blocks: Editable, syntax-highlighted code blocks within Slidev.
Monaco Runner & Autorun: Run code directly in the presentation and optionally auto-run on load.
Custom setup: Configure editor height, themes, and run behavior via setup/monaco.ts.

Quick Start

Use the Monaco Editor skill to convert your code blocks into live, editable slides in Slidev.

Frequently Asked Questions about slidev-monaco-editor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add live code editing to a Slidev presentation?▼

To add live code editing to a Slidev presentation, you integrate Monaco Editor using setup/monaco.ts, enabling editable, syntax-highlighted code blocks with execution capabilities directly within your slides.

Can I run TypeScript and JavaScript code directly in Slidev slides?▼

Yes, you can run TypeScript and JavaScript code directly in Slidev slides by configuring code blocks with monaco-run options, which allows real-time execution and auto-running on load during presentations.

How do I configure Monaco Editor height and themes in Slidev?▼

You configure Monaco Editor height and themes in Slidev by specifying options in a custom setup/monaco.ts file, applying settings to monaco, monaco-run, and monaco-diff code blocks to control run behavior and display.

Does Slidev support interactive code demonstrations for live coding?▼

Slidev supports interactive code demonstrations for live coding by embedding Monaco Editor, which transforms static slides into executable code demos with real-time editing and syntax highlighting.

What is the difference between monaco-run and monaco-diff code blocks in Slidev?▼

Monaco-run code blocks execute live TypeScript or JavaScript code with autorun capabilities, while monaco-diff code blocks display code differences, both configured via setup/monaco.ts to control presentation behavior.