Imports
Import from @expressivecss/expressive for document setup, or
@expressivecss/expressive/modular for explicit initialization.
Both entries export the same runtime names. The IIFE script exposes them on Expressive.
import { AutoInit, version } from '@expressivecss/expressive';
// Run after the markup exists.
const stop = AutoInit(document.body, {}, { watch: true });
console.log(version);
// Stop observing when the view unmounts. Existing instances keep running.
stop();The version string is the framework package version.
Type-only exports disappear at runtime. Import option and data types by name from the
public entries, such as MenuOptions, AutoInitOptions and ConfirmOptions.
Internal core helpers, Utils, Component,
ModalDisplayPlugin and DockedDisplayPlugin have no package export.
Use the component APIs below instead of importing files from the build's internal chunks.
Component lifecycle
Element components share init, getInstance, defaults,
el, options and destroy.
Each component's page documents its markup, extra methods, options and events.
import { Menu } from '@expressivecss/expressive/modular';
const trigger = document.querySelector('.menu-trigger');
const menu = Menu.init(trigger, { closeOnClick: false });
// Menu.getInstance(trigger) returns the same instance.
menu.open();
// When this view unmounts:
menu.destroy();| API | Contract |
|---|---|
init(element, options?) | Returns one instance. Reinitializing the same element destroys its previous instance first. |
init(elements, options?) | Accepts an array, NodeList or HTMLCollection and returns an array of instances. An empty collection returns an empty array. |
getInstance(element) | Returns the current instance, or undefined before initialization and after destruction. It does not create one. |
defaults | The class's default option object. Inspect it; pass overrides to init rather than mutating shared defaults. |
el, options | The element and merged initialization options. Missing i18n strings retain their defaults. Changing an option property does not rerun initialization. |
destroy() | Removes the instance's listeners and performs its component-specific cleanup. Call before discarding a manually managed view. |
AutoInit documents selectors, markup options,
watch mode and expressive:* events. It starts registered components only.
Snackbar uses new Snackbar(options) and its own
dismissal API. CharacterCounter and
Slider require their documented initialization paths.
Document behaviors
The root bundle installs every behavior below. The modular entry installs none.
Call the required Init() methods once after a browser document is available.
These document listeners have no per-element destroy() API.
import { Forms, Copy, Dialogs, BottomSheets } from '@expressivecss/expressive/modular';
Forms.Init();
Copy.Init();
Dialogs.Init();
BottomSheets.Init();| Setup | What it enables |
|---|---|
Forms.Init() | Fields, labels, validation, textarea resizing and file paths. |
Chips.Init(), Slider.Init(), Cards.Init(), ExpandingCard.Init() | Initial scans for the corresponding element components. Initialize new elements explicitly or use their documented AutoInit support. |
Dialogs.Init(), BottomSheets.Init(), SideSheets.Init() | Dialog dismissal and sheet dragging. Include Dialogs.Init() for sheet light dismissal. |
Copy.Init(), Theme.Init() | Copy buttons and theme controls. |
PaneResize.Init(), ImageCompare.Init() | Resizable panes and image comparison. |
Tour.Init(), Sortable.Init(), Lists.Init() | Tours, sortable lists and actionable-row keyboard navigation. |
DataTables.Init(), TransferList.Init() | Data tables and transfer lists. |
The modular AutoInit() call does not replace document behavior setup.
It includes the full registry, so importing it can retain more components in a bundled application.
Browser APIs are required when initializing components; importing the modular entry alone is inert.
All exports
Every runtime export links to its usage guide. This table reads the shared page catalogue; contributor checks compare it with the built bundle.
CSS and Sass
CSS-only components need no JavaScript initialization. Their pages in the navigation document markup, variants and accessibility requirements.
Use Helpers for layout, spacing, visibility and formatting; Grid for columns; Color and Typography for role classes; Elevation, Shapes and Scroll area for their utility families.
Design tokens covers runtime custom properties. The Sass API covers compile-time configuration, functions and mixins.