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.
Top comments (0)