SuperDeck overview

Create presentations with Flutter and Markdown.

What you can build

With SuperDeck, you can:

• Write slides in Markdown with live hot-reload during development
• Embed interactive content like DartPad playgrounds, Mermaid diagrams, and custom widgets
• Style everything with type-safe control over typography, colors, and themes
• Deploy to web or desktop
• Export to PDF or publish directly to GitHub Pages

Core features

Markdown layout system

SuperDeck uses a powerful @block syntax for organizing slide content into flexible layouts:

@section {
  flex: 2
}

@column {
  align: center
}

# Welcome to SuperDeck
Build presentations with Markdown and Flutter

@column {
  align: center
  flex: 1
}

![Logo](assets/logo.png)

Core block types

• @section – multi-column container with configurable flex ratios
• @column – display markdown content with alignment and scrolling
• @widget – custom registered Flutter widgets

Built-in widgets (use shorthand syntax like @image { ... }):

• image – images with fit options (cover, contain, fill, fitWidth, fitHeight)
• dartpad – embedded DartPad snippets with live editing
• qrcode – generate QR codes

Alignment options: top_left, top_center, top_right, center_left, center, center_right, bottom_left, bottom_center, bottom_right

Custom widget support

Register custom Flutter widgets and use them directly in Markdown:

SuperDeckApp(
  options: DeckOptions(
    widgets: const {
      'twitter': TwitterWidgetDefinition(),
    },
  ),
)

Use in Markdown:

@twitter {
  username: flutterdev
  tweetId: 1234567890
}

SuperDeck calls WidgetDefinition.parse() with the block's arguments and then WidgetDefinition.build() to render your widget. For complex widgets, parse into a typed args class and validate with Ack (see the Custom Widgets guide).

Markdown extensions

Hero animations – CSS-like tags for seamless slide transitions:

# My Title {.hero-title}
![Logo](logo.png) {.hero-logo}

GitHub alerts – Native alert blocks with icons:

> [!NOTE]
> This is an informational note

> [!WARNING]
> Proceed with caution

> [!CAUTION]
> Critical warning

Mermaid diagrams – Full support with automatic PNG rendering:

```mermaid
graph TD
  A[Start] --> B[Process]
  B --> C[End]
```

Code highlighting – Syntax highlighting for supported grammars (Dart/JSON/YAML/Markdown) with a Dart fallback

Standard Markdown – Full CommonMark plus GitHub Flavored Markdown support

Styling & theming

Comprehensive styling API

Control every aspect of your presentation through the SlideStyle system:

final customStyle = SlideStyle(
  h1: TextStyler().style(
    TextStyleMix(fontSize: 48, color: Colors.purple),
  ),
  p: TextStyler().style(
    TextStyleMix(fontSize: 18, height: 1.5),
  ),
  code: MarkdownCodeblockStyle(
    textStyle: const TextStyle(fontFamily: 'Fira Code', color: Colors.white),
    container: BoxStyler(
      decoration: BoxDecorationMix(
        color: const Color(0xFF1E1E1E),
        borderRadius: BorderRadiusMix.all(Radius.circular(16)),
      ),
    ),
  ),
  blockContainer: BoxStyler(
    decoration: BoxDecorationMix(
      borderRadius: BorderRadiusMix.all(Radius.circular(16)),
    ),
  ),
);

Import package:flutter/material.dart and package:mix/mix.dart to access the builders above. Use customStyle as DeckOptions.baseStyle or as a named style variant.

Styleable elements

• Typography: h1–h6, paragraphs, blockquotes
• Code: code blocks and inline code with syntax highlighting
• Markdown primitives: tables, lists, checkboxes
• Alerts: note, tip, important, warning, caution
• Layout: containers, images, flex configurations

Theme system

• Mix 2.0 integration – Type-safe, composable styles
• Google Fonts support – Custom typography with automatic loading
• Scoped variants – Apply style variants per slide with front matter (style: recap)

How it works

SuperDeck uses a two-stage build pipeline:

1. Build time: The CLI parses your slides.md file, renders Mermaid diagrams to images, and generates asset manifests
2. Runtime: Flutter renders the parsed slide data as widgets with full styling control

This approach gives you fast hot-reload during development while ensuring optimized assets in production.

Next steps

• Learn how to author slides with the Markdown Authoring Guide
• Dive deeper into block behavior in the Block Types reference
• Explore automation and publishing with the CLI Reference