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
npm install funky-frameOr clone from GitHub:
git clone https://github.com/ThisUsedToBeAnEmail/Funky-Frame.gitLive Demo & Documentation: https://funkyfra.me
Include the core library and any components you need:
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap 5 (required) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- Funky Frame Styles -->
<link rel="stylesheet" href="node_modules/funky-frame/css/themes.css">
<link rel="stylesheet" href="node_modules/funky-frame/css/custom.css">
<link rel="stylesheet" href="node_modules/funky-frame/css/toasts.css">
</head>
<body>
<button id="notify" class="btn btn-primary">Show Toast</button>
<!-- Core (namespace must be loaded first) -->
<script src="node_modules/funky-frame/js/core/namespace.js"></script>
<script src="node_modules/funky-frame/js/core/dom.js"></script>
<!-- Components -->
<script src="node_modules/funky-frame/js/components/toast.js"></script>
<script>
Funky.Dom('#notify').on('click', function() {
Funky.Toast.show({
title: 'Hello!',
message: 'Welcome to Funky Frame',
type: 'success'
});
});
</script>
</body>
</html>Try components in the browser without any setup:
npm start
# Opens 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 |
Funky.Table- Data tables with sorting, filtering, paginationFunky.TreeView- Hierarchical tree navigationFunky.Kanban- Drag-and-drop kanban boardsFunky.Calendar- Event calendarsFunky.Timeline- Vertical/horizontal timelinesFunky.VirtualisedList- Efficiently render large lists
Funky.Combobox- Searchable dropdowns with autocompleteFunky.DatePicker- Date/time pickerFunky.Mask- Input maskingFunky.Signature- Signature capture padFunky.InlineEdit- Click-to-edit fieldsFunky.FormSchema- Schema-driven form generation
Funky.Modal- Modal dialogsFunky.Popover- Popovers and tooltipsFunky.ContextMenu- Right-click context menusFunky.CommandPalette- Cmd+K spotlight searchFunky.SlidePanel- Slide-out panelsFunky.Tour- Guided tours
Funky.Toast- Toast notificationsFunky.NotificationCenter- Notification inboxFunky.PushNotification- Browser push notifications
Funky.Audio- Audio player controlsFunky.Video- Video player with custom controlsFunky.Carousel- Image/content carouselsFunky.CodePreview- Syntax-highlighted code blocks
Funky.Charts- Chart.js wrapperFunky.Plotly- Plotly.js integrationFunky.DashboardGrid- Draggable dashboard widgets
Funky.Morph- DOM morphing transitionsFunky.PageAnimate- Page transition effectsFunky.GestureTracker- Touch gesture recognitionFunky.Typewriter- Typewriter text effect
Funky Frame requires no build step - just serve the files with any static HTTP server.
make help # Show available make commands| 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:
make start-python PORT=9000Any server that serves static HTML files will work:
# 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- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
Contributions are welcome! Please read our contributing guidelines and submit PRs.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing) - Open a Pull Request
MIT © Funky Frame Contributors