Funky Frame


A lightweight, no-build JavaScript UI framework with 86+ components, PWA support, and zero dependencies.

✨ Features

- 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

📦 Installation

``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

🚀 Quick Start

Include the core library and any components you need:

`html












Show Toast











`

🎮 Interactive Playground

Try components in the browser without any setup:

`bash
npm start


Opens playground at http://localhost:3000/playground/


`

Or open playground/index.html directly in your browser.

📚 Documentation

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

🧩 Core Modules

| 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 |

🎨 UI Components

$3


- Funky.Table - 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 3000

Using Python

python3 -m http.server 8000

Using PHP

php -S localhost:8000

Using 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`)
5. Open a Pull Request

📄 License

MIT © Funky Frame Contributors