mithril-materialized

A Mithril.js component library inspired by materialize-css design principles, available on npm. This library provides you with ready-to-use Mithril components that follow Material Design guidelines, with no external JavaScript dependencies.

🚀 v3.3.0 - Latest Release

The current stable release that provides a complete Mithril.js Material Design component library with no external JavaScript dependencies.

✨ What's New

🔥 Zero External JS Dependencies: No longer requires materialize-css JavaScript or material-icons fonts
📦 Smaller Bundle Size: Reduced package size by eliminating external dependencies
⚡ Better Performance: Direct implementations without jQuery or other heavy dependencies
🛠️ Enhanced Components: Improved DatePicker with date ranges, week numbers, and TimePicker with configurable AM/PM/24h or inline style
🛠️ New Components: DataTable, TreeView, Timeline, Masonry, RatingControl, ImageList, Wizard/Stepper, Breadcrumb
📱 Modern Architecture: Factory components with proper TypeScript support
🎯 CSS-Only Styling: Uses only CSS for styling - no JavaScript initialization needed
🎨 Custom SVG Icons: Built-in MaterialIcon component with custom SVG icons (caret, close)

✨ Key Features

🔥 Zero External JS Dependencies: No longer requires materialize-css JavaScript or material-icons fonts
📦 Smaller Bundle Size: Reduced package size by eliminating external dependencies
🎨 Custom SVG Icons: Built-in MaterialIcon component with custom SVG icons
⚡ Better Performance: Direct implementations without jQuery or other heavy dependencies
🛠️ Enhanced Components: Comprehensive component library with modern features
🌗 Dark Theme Support: Built-in light/dark theme system with CSS custom properties
📱 Modern Architecture: Factory components with proper TypeScript support, and clear separation between controlled and uncontrolled component state
🎯 CSS-Only Styling: Uses only CSS for styling - no JavaScript initialization needed

📦 Installation

npm install mithril mithril-materialized

Supported Components

Components marked with an * are not included in the original materialize-css library.

Buttons
- Button
- FlatButton
- RoundButton
- SubmitButton
Inputs
- TextInput
- TextArea
- AutoComplete
- UrlInput
- EmailInput
- NumberInput
- ColorInput
- RangeInput* (with vertical, double-thumb support, and smart tooltip display)
- Chips
Pickers
- DatePicker (with optional week numbers and date range selection)*
- TimePicker (with inline mode and switchable AM/PM/24h)*
Selections
- Select
- SearchSelect*, a searchable select dropdown
- Options
- RadioButtons
- Switch
- Dropdown
Collections
- Basic, Link and Avatar Collections
- Collapsible or accordion
Theme & Upload
- ThemeSwitcher* (light/dark/auto theme switching)
- ThemeToggle* (simple light/dark toggle)
- FileUpload* (drag-and-drop with validation and preview)
Navigation
- Sidenav (responsive navigation drawer)
- Breadcrumb* (navigation path indicator)
- Wizard/Stepper* (multi-step process guidance)
Others
- ModalPanel
- MaterialBox
- Carousel
- Pagination
- PaginationControls*
- Parallax
Layout & Display
- Masonry* (Pinterest-style responsive grid layout)
- ImageList* (responsive image galleries with various layouts)
- Timeline* (vertical timeline with events and milestones)
Rating*
- RatingControl (Horizontal control, configurable range and step size, optionally with custom icons)
Data & Tables
- DataTable* (sorting, filtering, pagination, selection)
- TreeView* (hierarchical data with expand/collapse, selection, and customizable icons)
Additional
- Label
- HelperText
- CodeBlock
- Icon, a simple wrapper for creating icons using material-icons font
- MaterialIcon, for creating the close/clear and caret as SVG

📖 Usage Instructions

Quick Start

Install the package:

npm install mithril mithril-materialized

Import the CSS (optional, for Material Design styling):
```
import 'mithril-materialized/index.css';
```

Use components in your app:

import m from 'mithril';
import { 
  TextInput, 
  Button, 
  RangeInput,
  DatePicker,
  DataTable,
  TreeView,
  ThemeToggle,
  FileUpload,
  Sidenav,
  Breadcrumb,
  Wizard,
  Masonry,
  Timeline,
  ImageList
} from 'mithril-materialized';

const MyComponent = () => ({
  view: () => m('.container', [
    // Theme toggle in header
    m('nav', [
      m('.nav-wrapper', [
        m('.right', m(ThemeToggle))
      ])
    ]),
    
    // Breadcrumb navigation
    m(Breadcrumb, {
      items: [
        { text: 'Home', href: '/' },
        { text: 'Products', href: '/products' },
        { text: 'Details', active: true }
      ]
    }),
    
    // Form inputs
    m(TextInput, {
      label: 'Your name',
      onchange: (value) => console.log(value)
    }),
    
    // Enhanced range sliders with smart tooltips
    m(RangeInput, {
      label: 'Volume',
      min: 0,
      max: 100,
      valueDisplay: 'auto', // Show tooltip on drag
      onchange: (value) => console.log('Volume:', value)
    }),
    
    m(RangeInput, {
      label: 'Price Range',
      min: 0,
      max: 1000,
      minmax: true,
      minValue: 100,
      maxValue: 500,
      valueDisplay: 'always', // Always show values
      onchange: (min, max) => console.log('Range:', min, '-', max)
    }),
    
    m(RangeInput, {
      label: 'Vertical Slider',
      min: 0,
      max: 100,
      vertical: true,
      height: '200px',
      valueDisplay: 'auto',
      tooltipPos: 'right',
      onchange: (value) => console.log('Vertical:', value)
    }),
    
    // Enhanced DatePicker with range selection
    m(DatePicker, {
      label: 'Event Date',
      helperText: 'Select a single date',
      format: 'mmmm d, yyyy',
      onchange: (value) => console.log('Date:', value)
    }),
    
    m(DatePicker, {
      dateRange: true,
      label: 'Project Timeline',
      helperText: 'Select start and end dates',
      format: 'mmmm d, yyyy',
      minDateRange: 1,
      maxDateRange: 30,
      onchange: (value) => console.log('Date range:', value)
    }),
    
    m(Button, { 
      label: 'Submit',
      onclick: () => alert('Hello!')
    }),
    
    // File upload
    m(FileUpload, {
      accept: 'image/*',
      multiple: true,
      onFilesSelected: (files) => console.log(files)
    }),
    
    // TreeView for hierarchical data
    m(TreeView, {
      data: [
        {
          id: 'root',
          label: 'Project Root',
          expanded: true,
          children: [
            { id: 'src', label: 'src/' },
            { id: 'docs', label: 'docs/' },
          ]
        }
      ],
      selectionMode: 'multiple',
      iconType: 'caret',
      showConnectors: true,
      onselection: (selectedIds) => console.log('Selected:', selectedIds)
    }),
    
    // Layout components
    m(Masonry, {
      items: [
        { id: 1, title: 'Card 1', content: 'Short content' },
        { id: 2, title: 'Card 2', content: 'Much longer content...' },
        { id: 3, title: 'Card 3', content: 'Medium content' }
      ],
      columnWidth: 250,
      gap: 16,
      renderItem: (item) => m('.card', [
        m('.card-content', [
          m('span.card-title', item.title),
          m('p', item.content)
        ])
      ])
    }),
    
    m(Timeline, {
      events: [
        {
          id: 1,
          title: 'Project Started',
          date: '2024-01-15',
          description: 'Initial project kickoff',
          type: 'milestone'
        },
        {
          id: 2,
          title: 'First Release',
          date: '2024-03-20',
          description: 'Released version 1.0',
          type: 'release'
        }
      ]
    }),
    
    m(ImageList, {
      images: [
        { src: '/image1.jpg', alt: 'Image 1' },
        { src: '/image2.jpg', alt: 'Image 2' },
        { src: '/image3.jpg', alt: 'Image 3' }
      ],
      layout: 'masonry', // 'grid' | 'masonry' | 'quilted'
      cols: 3
    })
  ])
});

Integration with Build Tools

Webpack/Vite/Parcel: The library works out-of-the-box with modern bundlers.

CSS Framework Integration: You can use the components with any CSS framework. The included CSS provides Material Design styling, but you can override it with your own styles.

TypeScript: Full TypeScript support with comprehensive type definitions included.

See the live documentation for examples and component APIs.

Note: The date range picker is now fully implemented with comprehensive validation and formatting support.

🗺️ Roadmap & Planned Improvements

🚀 Phase 1: Core Optimizations & New Components (In Progress)

✅ Completed:

✅ Modular CSS architecture with tree-shaking support
✅ Dark theme system with CSS custom properties
✅ File upload component with drag-and-drop
✅ Theme switching components (ThemeSwitcher, ThemeToggle)
✅ Sidenav component with responsive behavior
✅ Breadcrumb navigation component
✅ Wizard/Stepper component for multi-step forms

✅ Recently Completed (v3.2.x):

✅ TextArea Height Alignment: Fixed single-line textarea height to match TextInput components perfectly
✅ Improved AutoResize Logic: TextArea now only sets custom height for multi-line content, matching Materialize CSS reference behavior
✅ Better Mithril Integration: Hidden div for height measurement now properly managed within Mithril's render cycle
✅ DataTable component with sorting, filtering, and pagination
✅ TreeView component for hierarchical data with expand/collapse, selection, and VSCode-style connectors
✅ Enhanced TypeScript definitions with better JSDoc comments
✅ Performance optimizations and bundle size improvements
✅ Enhanced RangeInput with vertical orientation, double-thumb range selection, and smart tooltip display
✅ Advanced DatePicker with date range selection, constraints, and format support
✅ Layout components: Masonry (Pinterest-style grid), Timeline (vertical event display), ImageList (responsive galleries)
✅ RatingControl with configurable icons, min/max, tooltip/helpers, readonly and disabled mode
✅ Improved RangeInput components converted to proper Mithril components with better lifecycle management
✅ Enhanced accessibility with individual thumb slider elements and PageUp/PageDown keyboard support

🎯 Phase 2: Advanced Components & Features

Data Display:

Card layouts with enhanced Material Design 3.0 styling
Advanced tree operations (drag & drop, context menus)

Input & Forms:

✅ Advanced date range picker with validation and constraints
Autocomplete with async data loading

Navigation & Layout:

AppBar/Toolbar component with responsive behavior
Bottom navigation component for mobile apps
Drawer/Sidebar component with overlay and push modes
Grid system enhancements with CSS Grid support

🔮 Phase 3: Modern Features & Integration

Developer Experience:

Storybook integration for component documentation
Figma design system integration
CLI tools for component generation
Better accessibility (ARIA) support throughout

Performance & Optimization:

Virtual scrolling for large lists
Lazy loading component utilities
Bundle analyzer and optimization tools
CSS-in-JS runtime support option

📊 Bundle Size Targets

Current Status (v3.2.2):

Total: ~65KB gzipped (42KB JS + 23KB CSS)
Modular CSS can reduce bundle by 30-50%
Optimized component implementations reduce overhead

Phase 1 Targets:

Core bundle: <40KB gzipped
Modular approach: <25KB for typical apps
Tree-shaking effectiveness: 60%+

Long-term Goals:

Individual components: <2KB each
Micro-bundle support for single components
Zero-runtime CSS option for static sites

🤝 Contributing

We welcome contributions! Priority areas for community involvement:

Usage: Accessibility improvements, performance optimizations
Documentation: Examples, guides, API documentation
Testing: Unit tests, visual regression tests, browser compatibility

See our contributing guide for detailed information.

📈 Performance Benchmarks

Bundle Size Comparison:

mithril-materialized v3.2.2: ~65KB gzipped
Material-UI: ~350KB gzipped
Materialize CSS + jQuery: ~180KB gzipped
Vuetify: ~250KB gzipped

Runtime Performance:

Component initialization: <5ms average
Theme switching: <10ms for full page
File upload processing: Real-time without blocking
TextArea auto-resize: <1ms per keystroke

Build instructions

This repository consists of two packages, combined using lerna: the lib package that is published to npm, as well as an example project which uses this library to display the Mithril components that it contains.

To install the dependencies, you can use npm i, or, alternatively, use pnpm m i (assuming you have installed pnpm as alternative package manager using npm i -g pnpm) to perform a multi-repository install. Next, build everything using npm start and visit the documentation page on http://localhost:1234 in case port 1234 is not occupied already.

🎨 Styling & CSS

CSS Usage

The library includes carefully crafted CSS that provides Material Design styling without external dependencies. You can import the ready-to-use CSS:

import 'mithril-materialized/index.css';

Important: The CSS styling is completely independent of the original materialize-css. This means:

✅ No conflicting styles from materialize-css
✅ Smaller CSS bundle size
✅ Custom optimizations for better performance
✅ No external font dependencies

🔥 NEW: Modular CSS Architecture

Tree-shakable CSS modules for optimal bundle sizes! Import only the CSS you need:

// Option 1: Import everything (64KB total)
import 'mithril-materialized/index.css';

// Option 2: Import only what you need (modular approach)
import 'mithril-materialized/core.css';      // Essential styles (18KB)
import 'mithril-materialized/forms.css';     // Form components only
import 'mithril-materialized/components.css'; // Interactive components

// Option 3: Advanced components only when needed
import 'mithril-materialized/pickers.css';   // Date/Time pickers
import 'mithril-materialized/advanced.css';  // Carousel, sidenav, etc.
import 'mithril-materialized/utilities.css'; // Badges, icons, cards

CSS Modules Available:

core.css (18KB) - Essential foundation (normalize, grid, typography, variables)
components.css - Interactive components (buttons, dropdowns, modals, tabs)
forms.css - All form components (inputs, selects, switches, file upload)
pickers.css - Date and time picker components
advanced.css - Specialized components (carousel, sidenav, navbar, preloader)
utilities.css - Visual utilities (badges, cards, icons, toast, chips)

Bundle Size Optimization:

Full bundle: 64KB gzipped (44KB JS + 20KB CSS)
Modular approach can reduce CSS by 30-50%
Use only core.css + specific modules for your use case

🌓 Dark Theme Support

Built-in dark theme support with CSS custom properties:

import { ThemeManager, ThemeSwitcher } from 'mithril-materialized';

// Programmatic theme control
ThemeManager.setTheme('dark');    // 'light' | 'dark' | 'auto'
ThemeManager.toggle();            // Toggle between light/dark
ThemeManager.getTheme();          // Get current theme

// UI Components
m(ThemeSwitcher, {
  onThemeChange: (theme) => console.log('Theme:', theme)
});

m(ThemeToggle); // Simple toggle button

CSS Custom Properties: All colors use CSS variables for runtime theme switching:

:root {
  --mm-primary-color: #26a69a;
  --mm-background-color: #ffffff;
  --mm-text-primary: rgba(0, 0, 0, 0.87);
}

[data-theme="dark"] {
  --mm-primary-color: #80cbc4;
  --mm-background-color: #121212;
  --mm-text-primary: rgba(255, 255, 255, 0.87);
}

SASS Usage

For advanced customization, you can use the SASS source files directly:

// Import all SASS components
@import 'mithril-materialized/sass/materialize.scss';

// Or import individual components
@import 'mithril-materialized/sass/components/buttons';
@import 'mithril-materialized/sass/components/forms';
@import 'mithril-materialized/sass/components/grid';

SASS Variables: You can customize colors, spacing, and other design tokens by overriding SASS variables before importing:

// Customize Material Design variables
$primary-color: #2196F3;
$secondary-color: #FF9800;

// Then import the library
@import 'mithril-materialized/sass/materialize.scss';

Custom Styles

The library includes these additional styles for enhanced functionality:

/* For the switch */
.clear,
.clear-10,
.clear-15 {
  clear: both;
  /* overflow: hidden; Precaution pour IE 7 */
}
.clear-10 {
  margin-bottom: 10px;
}
.clear-15 {
  margin-bottom: 15px;
}

span.mandatory {
  margin-left: 5px;
  color: red;
}

label+.switch {
  margin-top: 1rem;
}

/* For the color input */
input[type='color']:not(.browser-default) {
  margin: 0px 0 8px 0;
  /** Copied from input[type=number] */
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 16px;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: border 0.3s, -webkit-box-shadow 0.3s;
  transition: border 0.3s, -webkit-box-shadow 0.3s;
  transition: box-shadow 0.3s, border 0.3s;
  transition: box-shadow 0.3s, border 0.3s, -webkit-box-shadow 0.3s;
}

/* For the options' label */
.input-field.options > label {
  top: -2.5rem;
}

/* For the code block */
.codeblock {
  margin: 1.5rem 0 2.5rem 0;
}
.codeblock > div {
  margin-bottom: 1rem;
}
.codeblock > label {
  display: inline-block;
}

Name		Name	Last commit message	Last commit date
Latest commit History 565 Commits
.github/workflows		.github/workflows
.vscode		.vscode
docs		docs
packages		packages
.gitignore		.gitignore
.prettierrc		.prettierrc
.releaserc.json		.releaserc.json
CHANGELOG.md		CHANGELOG.md
CLAUDE.md		CLAUDE.md
CONTROLLED_COMPONENTS.md		CONTROLLED_COMPONENTS.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

mithril-materialized

🚀 v3.3.0 - Latest Release

✨ What's New

✨ Key Features

📦 Installation

Supported Components

📖 Usage Instructions

Quick Start

Integration with Build Tools

🗺️ Roadmap & Planned Improvements

🚀 Phase 1: Core Optimizations & New Components (In Progress)

🎯 Phase 2: Advanced Components & Features

🔮 Phase 3: Modern Features & Integration

📊 Bundle Size Targets

🤝 Contributing

📈 Performance Benchmarks

Build instructions

🎨 Styling & CSS

CSS Usage

🔥 NEW: Modular CSS Architecture

🌓 Dark Theme Support

SASS Usage

Custom Styles

About

Uh oh!

Releases 14

Packages

Uh oh!

Contributors 5

Uh oh!

Languages

License

erikvullings/mithril-materialized

Folders and files

Latest commit

History

Repository files navigation

mithril-materialized

🚀 v3.3.0 - Latest Release

✨ What's New

✨ Key Features

📦 Installation

Supported Components

📖 Usage Instructions

Quick Start

Integration with Build Tools

🗺️ Roadmap & Planned Improvements

🚀 Phase 1: Core Optimizations & New Components (In Progress)

🎯 Phase 2: Advanced Components & Features

🔮 Phase 3: Modern Features & Integration

📊 Bundle Size Targets

🤝 Contributing

📈 Performance Benchmarks

Build instructions

🎨 Styling & CSS

CSS Usage

🔥 NEW: Modular CSS Architecture

🌓 Dark Theme Support

SASS Usage

Custom Styles

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 14

Packages 0

Uh oh!

Contributors 5

Uh oh!

Languages

Packages