Lightweight, no-build JavaScript UI framework with 86+ components, PWA support, and zero dependencies
npm install funky-frame

A lightweight, no-build JavaScript UI framework with 86+ components, PWA support, and zero dependencies.
- No Build Step - Pure ES5 JavaScript, works directly in the browser
- 86+ UI Components - Tables, modals, forms, charts, and more
- 45+ Core Modules - DOM manipulation, routing, state management, API handling
- PWA Ready - Service workers, offline support, push notifications
- SPA Routing - Client-side navigation with history API
- Theming - Bootstrap 5 compatible with CSS custom properties (--pro-*)
- Accessibility - WCAG compliant components with focus management
- jQuery-like API - Chainable DOM manipulation via Funky.Dom
- Interactive Playground - Try components live in the browser
``bash`
npm install funky-frame
Or clone from GitHub:
`bash`
git clone https://github.com/ThisUsedToBeAnEmail/Funky-Frame.git
Live Demo & Documentation: https://funkyfra.me
Include the core library and any components you need:
`html
`
Try components in the browser without any setup:
`bash`
npm startOpens playground at http://localhost:3000/playground/
Or open playground/index.html directly in your browser.
Full API documentation is available in the docs/ directory:
- Architecture - System design and patterns
- Components - UI component reference
- SPA Routing - Client-side navigation
- PWA Guide - Service workers and offline support
- Theming - CSS custom properties and themes
- Accessibility - WCAG compliance
| Module | Description |
|--------|-------------|
| Funky.Dom | jQuery-like chainable DOM manipulation |Funky.Api
| | HTTP requests with CSRF, retry, caching |Funky.SPA
| | Single-page app routing |Funky.Pages
| | Page lifecycle management |Funky.Navigation
| | History API navigation |Funky.LiveBinding
| | Reactive data binding |Funky.Events
| | Event bus / pub-sub |Funky.Channel
| | Cross-tab communication |Funky.Storage
| | localStorage/sessionStorage wrapper |Funky.Keyboard
| | Keyboard shortcuts |Funky.FocusManager
| | Accessibility focus trapping |Funky.ServiceWorker
| | PWA service worker registration |
- Data tables with sorting, filtering, pagination
- Funky.TreeView - Hierarchical tree navigation
- Funky.Kanban - Drag-and-drop kanban boards
- Funky.Calendar - Event calendars
- Funky.Timeline - Vertical/horizontal timelines
- Funky.VirtualisedList - Efficiently render large lists$3
- Funky.Combobox - Searchable dropdowns with autocomplete
- Funky.DatePicker - Date/time picker
- Funky.Mask - Input masking
- Funky.Signature - Signature capture pad
- Funky.InlineEdit - Click-to-edit fields
- Funky.FormSchema - Schema-driven form generation$3
- Funky.Modal - Modal dialogs
- Funky.Popover - Popovers and tooltips
- Funky.ContextMenu - Right-click context menus
- Funky.CommandPalette - Cmd+K spotlight search
- Funky.SlidePanel - Slide-out panels
- Funky.Tour - Guided tours$3
- Funky.Toast - Toast notifications
- Funky.NotificationCenter - Notification inbox
- Funky.PushNotification - Browser push notifications$3
- Funky.Audio - Audio player controls
- Funky.Video - Video player with custom controls
- Funky.Carousel - Image/content carousels
- Funky.CodePreview - Syntax-highlighted code blocks$3
- Funky.Charts - Chart.js wrapper
- Funky.Plotly - Plotly.js integration
- Funky.DashboardGrid - Draggable dashboard widgets$3
- Funky.Morph - DOM morphing transitions
- Funky.PageAnimate - Page transition effects
- Funky.GestureTracker - Touch gesture recognition
- Funky.Typewriter - Typewriter text effect🖥️ Development Server
Funky Frame requires no build step - just serve the files with any static HTTP server.
`bash
make help # Show available make commands
`$3
| Command | Server | Port |
|---------|--------|------|
|
make start | Node.js/serve | 3000 |
| make start-js | Node.js/serve | 3000 |
| make start-python | Python 3 http.server | 8000 |
| make start-perl | Perl/Mojolicious | 8000 |
| make start-ruby | Ruby/WEBrick | 8000 |
| make start-php | PHP built-in server | 8000 |
| make start-deno | Deno file_server | 8000 |
| make start-bun | Bun/serve | 8000 |
| make start-rust | miniserve | 8000 |
| make start-csharp | dotnet-serve | 8000 |Override the default port:
`bash
make start-python PORT=9000
`$3
Any server that serves static HTML files will work:
`bash
Using npx
npx serve . -p 3000Using Python
python3 -m http.server 8000Using PHP
php -S localhost:8000Using Apache/Nginx
Just point the document root to the project directory
`🌐 Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
🤝 Contributing
Contributions are welcome! Please read our contributing guidelines and submit PRs.
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/amazing)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing`)MIT © Funky Frame Contributors