Airflow3Plugin/markdown_view_plugin

Building the Plugin

You can build the plugin into a wheel file using any PEP-517 compatible build frontend. The build process will automatically:

1. Install UI dependencies using pnpm
2. Build the React frontend
3. Package everything into a wheel file

This is handled by a custom Hatch build hook (hatch_build.py).

Example build commands

# Using uv (recommended)
uv build

# Or using pip
pip wheel .

# Or using hatch directly
hatch build

The build process will fail if pnpm is not installed or if the UI build fails.

Quick Test Checklist

After building, you can quickly verify that the UI static files are included in the wheel:

# one-liner smoke test
rm -rf ui/dist && uv build
unzip -l dist/airflow_markdown_view_plugin-*.whl | grep 'ui/dist/index.*.js'

If the grep shows your JS bundles, you’re golden. If not, the hook didn’t run—fix it before shipping.

Markdown View Airflow Plugin

This plugin allows users to render Markdown content from a view.md file directly within the Airflow UI.

Features

• Displays content from a markdown_view_plugin/view.md file.
• Uses FastAPI for the backend and React/Vite for the frontend.
• Integrates with Airflow's UI theme, including light/dark mode support.
• Provides a theme toggle button within the plugin's view.

Setup

1. Place the Plugin: Put the entire markdown_view_plugin directory into your Airflow plugins folder.
2. Install UI Dependencies: Navigate to the markdown_view_plugin/ui directory and run:

   pnpm install
   

3. Build the UI: After installing dependencies, build the React frontend:

   pnpm run build
   

   This will create a dist folder inside markdown_view_plugin/ui.
4. Restart Airflow Webserver: After adding the plugin and building the UI, restart your Airflow webserver and scheduler.
5. Access the Plugin: In the Airflow UI, navigate to the "Plugins" menu. You should find a link to the "Markdown View" (the exact name and category might depend on future menu link configuration in markdown_view_plugin.py). Clicking this link will take you to the plugin's page.

Customization

• To change the displayed content, edit the markdown_view_plugin/view.md file.
• The UI can be further customized by modifying the React components in markdown_view_plugin/ui/src/.
• The backend logic is in markdown_view_plugin/markdown_view_plugin.py.

Development

• Backend: The FastAPI application is defined in markdown_view_plugin.py.
• Frontend: The React/Vite application is in the markdown_view_plugin/ui/ directory.
  • To run the frontend in development mode (with hot reloading), navigate to markdown_view_plugin/ui and run pnpm run dev.
  • Ensure your vite.config.ts has the correct base path and any necessary proxy configurations if you are developing against a running Airflow instance.