Overview

Patchwork includes nine built-in plugins for common dashboard components. Each plugin is designed to work seamlessly with the dashboard system and requires no additional configuration. The built-in plugins are:

Creating Custom Plugins

Extend Patchwork with any JavaScript library by creating custom plugins.

Plugin Interface

All plugins must implement to_html. Optional functions include css_deps, js_deps, init_script, and css.

module MyPluginModule

import ..Plugin, ..to_html, ..css_deps, ..js_deps, ..init_script, ..css
export MyPlugin

struct MyPlugin <: Plugin
    content::String
end

# Required
to_html(plugin::MyPlugin) = "<div class='myplugin'>$(plugin.content)</div>"

# Optional
css_deps(::Type{MyPlugin}) = ["https://cdn.example.com/lib.css"]
js_deps(::Type{MyPlugin}) = ["https://cdn.example.com/lib.js"]
init_script(::Type{MyPlugin}) = "// initialization code"
css(::Type{MyPlugin}) = ".myplugin { padding: 1rem; }"

end

Best Practices

  1. Use unique CSS classes to avoid conflicts
  2. Generate unique IDs with UUIDs for elements
  3. Store data in attributes using data-* attributes
  4. Query by class in init_script to initialize all instances
  5. Handle visibility for libraries that need visible elements
  6. Use different module/struct names to avoid conflicts
  7. Add error handling in JavaScript initialization

API Reference

Patchwork.Plugin — Type
Plugin

Abstract base type for all Patchwork plugins.

All plugin types must subtype Plugin and implement the to_html function. Optionally, plugins can implement css_deps, js_deps, init_script, and css functions to provide external dependencies and initialization code.

Example

struct MyPlugin <: Plugin
    content::String
end

to_html(plugin::MyPlugin) = "<div>$(plugin.content)</div>"

See also: to_html, css_deps, js_deps, init_script, css

source
Patchwork.css — Method
css(::Type{<:Plugin}) -> String

Return custom CSS styles for a plugin type.

Arguments

  • ::Type{<:Plugin}: Plugin type (not instance)

Returns

  • String: CSS styles

Default

Returns "" if not implemented.

Example

css(::Type{MyPlugin}) = """
    .my-plugin {
        padding: 1rem;
        border: 1px solid #ccc;
    }
"""

See also: css_deps, to_html

source
Patchwork.css_deps — Method
css_deps(::Type{<:Plugin}) -> Vector{String}

Return vector of CSS dependency URLs for a plugin type.

Arguments

  • ::Type{<:Plugin}: Plugin type (not instance)

Returns

  • Vector{String}: CDN URLs for CSS dependencies

Default

Returns String[] if not implemented.

Example

css_deps(::Type{MyPlugin}) = ["https://cdn.example.com/style.css"]

See also: js_deps, to_html

source
Patchwork.init_script — Method
init_script(::Type{<:Plugin}) -> String

Return JavaScript initialization code for a plugin type.

This code runs after all dependencies are loaded and the DOM is ready. Typically used to initialize JavaScript libraries on plugin elements.

Arguments

  • ::Type{<:Plugin}: Plugin type (not instance)

Returns

  • String: JavaScript initialization code

Default

Returns "" if not implemented.

Example

init_script(::Type{MyPlugin}) = """
    document.querySelectorAll('.my-plugin').forEach(el => {
        // Initialize library
    });
"""

See also: js_deps, to_html

source
Patchwork.js_deps — Method
js_deps(::Type{<:Plugin}) -> Vector{String}

Return vector of JavaScript dependency URLs for a plugin type.

Arguments

  • ::Type{<:Plugin}: Plugin type (not instance)

Returns

  • Vector{String}: CDN URLs for JavaScript dependencies

Default

Returns String[] if not implemented.

Example

js_deps(::Type{MyPlugin}) = ["https://cdn.example.com/lib.js"]

See also: css_deps, init_script

source
Patchwork.to_html — Function
to_html(plugin::Plugin) -> String

Convert plugin to HTML string. Must be implemented for all custom plugins.

Arguments

  • plugin::Plugin: Plugin instance to convert

Returns

  • String: HTML representation of the plugin

Example

to_html(plugin::MyPlugin) = "<div class='my-plugin'>$(plugin.content)</div>"

See also: Plugin, css_deps, js_deps

source
Patchwork.get_plugin_type — Method
get_plugin_type(plugin::Plugin) -> String

Get the lowercase type name of a plugin.

This function extracts the plugin type name from the fully qualified type name and converts it to lowercase. Used internally for HTML class generation and plugin identification.

Arguments

  • plugin::Plugin: Plugin instance

Returns

  • String: Lowercase plugin type name

Example

plugin = Patchwork.ChartJs("Title", "bar", Dict{String,Any}(...))
get_plugin_type(plugin)  # Returns "chartjs"
source