17 free, dependency-free JS/PHP components for your next project

VIDALLET — Mon, 24 Aug 2026 08:07:17 +0000

I maintain a small library of standalone components: no npm, no bundler, no framework. Each one is a single file that encapsulates its own CSS (and SVG icons where relevant), so you just include the file, instantiate the class, and it works. 16 are pure JavaScript; one, ac_pdf, is PHP and wraps FPDF as its only dependency.

Here's the full list, all free and free to use in your own projects:

ac_notif_modale: toast notifications and confirmation modals (info, success, warning, error)
ac_note_etoiles: turns a number input into a rating widget (stars, hearts, or smileys)
ac_slider: enriched range slider with gradient or segment colors and a value bubble
ac_progression: animated progress bar with automatic color thresholds and a shimmer effect
ac_tags: turns a text input into a tag entry field, with optional autocomplete
ac_telephone_multipays: international phone field with country picker, flag emoji, and auto formatting
ac_signature: canvas-based signature pad, captured as base64 PNG
ac_video_url: paste a YouTube or Vimeo URL, get an automatic embedded preview
ac_fichier_upload: drag-and-drop file zone with previews, type/size validation, optional image resizing
ac_picture_select: enriched select with images, badges, and built-in search
ac_big_select: for selects with thousands of options, on-demand AJAX search instead of preloading everything
ac_graphique: dependency-free SVG charts (bar, line, pie), with hover tooltips and PNG export
ac_timeline: vertical or horizontal timeline with typed icons and scroll animation
ac_carte: interactive map (loads Leaflet automatically), with geocoding and multi-marker modes
ac_agenda: full calendar with month/week/day views, click-to-create, drag-and-drop to move or resize
ac_onglets: turns existing HTML blocks into accessible tabs, any content, any layout
ac_pdf: server-side PDF generation (certificates, reports, attendance sheets), wrapping FPDF

A quick example (ac_graphique)

javascript
const chart = new AcGraphique('#my-chart', { type: 'barres' }); chart.setDonnees([...]);

One thing worth flagging across the whole library: method and option names are in French (setDonnees, barres for bars, position_verticale, and so on), since these components were originally built for French-speaking clients. The behavior is standard, only the vocabulary isn't in English.

Full demos and docs: https://artisan-code.fr/outils.php

I also maintain a few premium components in the same spirit (ac_sidebar, ac_datagrid, ac_datagrid_pro, ac_text_to_html) if you need something heavier. ac_datagrid and ac_datagrid_pro share the same engine, tested at 6 million rows with solid performance.

I built a dependency-free sidebar with drag-and-drop and magnetic snapping , in vanilla JS

VIDALLET — Mon, 24 Aug 2026 07:48:49 +0000

Most sidebar components pull in a framework, a build step, or at least a CSS library. ac_sidebar doesn't. It's a single JavaScript class, no npm, no bundler, no external dependency, with its own CSS and SVG icon set baked in.

What it does

Two menu levels (menu / submenu), recursive structure
Role-based filtering (1 to 5, lower means more privileges), with menus auto-hiding when they end up empty
Five positions: left, right, top, bottom, or free. In free mode, you can drag the sidebar anywhere, with automatic magnetic snapping to screen edges
Collapses to an icon rail, or hides behind a single burger button
Counter badges per entry, multiple instances on the same page, state persisted via localStorage (optional)

Usage

javascript
const sb = new AcSidebar('#my-sidebar', { /* config */ });

Or load config from an external JSON file:

javascript
const sb = await AcSidebar.fromJson('#my-sidebar', '/config/sidebar.json');

A config example

One thing to flag: the config keys and values are in French (the class was originally built for French-speaking clients), so you'll see things like position: "gauche" (left) or theme: "clair" (light) rather than English terms.

json { "position": "gauche", "theme": "clair", "masquable": true, "menu": [ { "libelle": "Dashboard", "icone": "grille", "lien": "/dashboard" }, { "libelle": "Users", "icone": "groupe", "role": 2, "sousMenu": [ { "libelle": "List", "icone": "liste", "lien": "/users" }, { "libelle": "Roles", "icone": "cle", "lien": "/roles", "role": 1 } ] } ] }

Live demo: https://artisan-code.fr/ac_sidebar.php
)
ac_sidebar is part of a small catalog of standalone, dependency-free JS/PHP classes I maintain at artisan-code.fr, built for projects where a full framework would be overkill.

DEV Community: VIDALLET

17 free, dependency-free JS/PHP components for your next project

I built a dependency-free sidebar with drag-and-drop and magnetic snapping , in vanilla JS