smalljs$molSearch⌘ KDocsPlaygroundCompareEcosystemAboutEN
PluginsGetting StartedIntroductionMental modelGetting StartedFrom TypeScript to view.treeProject StructureToolingEssentialsInstallationViewsState & ReactivityRoutingRenderingTestingDeploymentTroubleshootingDataData FetchingData SchemasGiper BazaMoreShowcaseFrom React, Vue & SvelteCookbookAdvancedPluginsModule metadataOfflineGhost viewsAboutFAQTeamReleasesAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

Plugins

A plugin is a component with no DOM element of its own. Instead of rendering into the page, it attaches behaviour to the element of the component that hosts it — much like a directive. You list plugins under plugins / in a view.tree; they run alongside the view but never show up in its sub.1$my_app $mol_view2 plugins /3 <= Theme $mol_theme_auto4 <= Search_key $mol_hotkey5 key *6 K? <=> open_search?7 sub /8 <= Content $my_contentBecause a plugin shares its host's element, it can add event listeners, attributes, or reactive side-effects to that element without wrapping it in extra markup.

Plugins you'll use often

$mol_hotkey — bind keyboard shortcuts. key * escape? <=> close? runs close on Escape; set mod_ctrl true to require Ctrl/⌘.$mol_theme_auto — apply a light/dark theme to the host subtree.$mol_nav — arrow-key navigation across a list of components (keys_y, current_y).$mol_speech — speech recognition input.

Writing one

A plugin extends $mol_plugin (which is itself element-less) and typically wires an event to a handler:1$my_autosave $mol_plugin2 event *3 ^4 input? <=> save? nullAttach it to any view via that view's plugins / list, and it augments that view's element.Edit this page on GitHubWas this helpful?YesNoPreviousCookbookNextModule metadataOn this pagePlugins you'll use oftenWriting one
Type to search the documentation.